Question

I’m stuck at this part..

Trying to get a simple AjaxPost to post some values from a entered textbox.. But the problem I can’t figure out is that it posts the id and the value for the first input… and for all the inputs.

Javascript code

<script type="text/javascript">
    $(function () {
        $('.hexen1').after('<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon onopordon" onClick="save();" title="Save" style="float:left; height:20px;" onclick="save ()"></span><br />')// ui icon
    .keypress(function() {
        $(this).next('.onopordon').show();//appends ui icon
    });

$('.onopordon').hide().click(function() {
    $(this).hide(); // removes ui icon on click
});

$('.ui-state-default').hover(
    function () { $(this).addClass('ui-state-hover'); },
    function () { $(this).removeClass('ui-state-hover'); } //ui icon hover
);
});

function save() {
  $.ajax({
    url: "Default.aspx",
    type: "POST",
    data: "{ Id: " + $(".hexen1").attr("id") + ", Value: " + $(".hexen1").val() + "}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);

        },


});
}
</script> 

html

<div id="besen">
<input class="hexen1" id="A1"/>
<input class="hexen1" id="A2"/>
<input class="hexen1" id="A3"/>
<input class="hexen1" id="A4"/>
<input class="hexen1" id="A5"/>
</div>

Firebug reads:
for input “A1”.. Value entered is 1… Result: { Id: A1, Value: 1}
for input “A2”.. Value entered is 2… Result: { Id: A1, Value: 1}
for input “A3”.. Value entered is 3… Result: { Id: A1, Value: 1}
Etc…

Thanks in advance

Answer 1

Because you have multiple elements that have the class “hexen1” you will need to iterate through the collection of elements that are matched by your JQuery statement $(".hexen1") by using the foreach statment. That will give you each element matched to form your object to post to the server containing all the form elements.