开发者

Jquery some complex data binding to input fields

I am开发者_运维问答 trying to add some Jquery functionaliy to my form.

Want I want to do:

The .greenDiv is standard and should have 100% opacity When either .blackDiv or .redDiv is clicked the .greenDiv should have 50% opacity. And the div that was clicked should have 100% opacity and the rest 50%.

I have this in my Jquery:

$('#webhost_navn').data('myData', 'i');

Instead I want to select the nearest input filed without the added "info" and bind the data to it.

And on submit all of the data that are binded to the inputs should be saved.

Example:

I user clicks on the .redDiv the data i is added to the nearest input filed without the info added to its name.

A user clicks another input field with a .blackDiv and the p is added to the input filed without the "added to its name" .

When the user submits the form the i and the p is added to the correct inputs fields.

My Jquery:

$('.redDiv').click(function() {
    $('#webhost_navn').data('myData', 'i');
});
$('.greenDiv').click(function() {
    $('#webhost_navn').data('myData', null);
});
    $('.blackDiv').click(function() {
    $('#webhost_navn').data('myData', 'p');
});

$('#smt').click(function() {
    var myData = $('#webhost_navn').data('myData'),
        val = $('#webhost_navn').val();
    if (myData) {
        $('#webhost_navn').val(myData + val);
    }
});

My HTML:

<div class="input numeric integer optional"><label for="company_ekstratrafik" class="integer optional"> Pris pr.</label><input type="number" step="1" size="50" name="company[ekstratrafik]" id="company_ekstratrafik" class="numeric integer optional"></div>
<div class="button-row">
            <button style="font-size: 11px; display: none;" type="button" class="add">Add info</button>
            <button style="font-size: 11px; display: inline;" type="button" class="remove">Remove</button>
<input type="input" step="1" size="50" name="company[ekstratrafikinfo]" id="company_ekstratrafikinfo" class="infoinput"><div class="redDiv"></div><div class="greenDiv"></div><div class="blackDiv"></div></div>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜