sending form’s button’s value

Question

User's data posted once user click either of buttons with same name="respond" different values "Confirm" and "Ignore". My problem here, button's values are not posted when I use jquery as in the following codes. Is there a way to fix this?

    $("[name='respond']").live('click', function() { 
            $.ajax({
                type: "POST",
    data: $(this).closest('#REQUESTFORM').serialize(),
    url: "content/requests/index.cs.asp?Process=RespondRequests", 
    success: function(output) { 
    alert(output);
    //$(this).closest('#REQUESTFORM').html(output);
             },
    error: function(xhr){
     alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
    }

            }); 
    }); 
                            <div class="tools">
                                <form method="post" action="content/requests/index.cs.asp?Process=RespondRequests" id="REQUESTFORM">

                                        <input type="hidden" name="REQUESTID" value="<%=objRequests("REQUESTID")%>">   
                                        <input type="hidden" name="BYID" value="<%=objRequests("BYID")%>">   
                                        <input type="hidden" name="TOID" value="<%=objRequests("TOID")%>">   
                                        <input type="button" name="respond" value="Confirm" class="btn_confirm" />
                                        <input type="button" name="respond" value="Ignore" class="btn_ignore" />

                                </form>

Answer 1

Do like this

data: 'respond='+$(this).attr('value')+$('#REQUESTFORM').serialize(),

Answer 2

My guess would be that because these are (A) "button" inputs and not "submit" inputs, and/or because (B) your onclick function (especially perhaps combined with live()) is catching the post and not allowing the "name" to become considered part of the form data.

One idea is that you can just add some code to be sure it does become part of the form data. Consider adding one more hidden input to your HTML:

<input type="hidden" name="TheActualRespondField" value="" />

And then, in your 'click' function javascript,

$("[name='respond']").live('click', function() { 
    // register the correct button-click-value:
    $('[name="TheActualRespondField"]').val($(this).val());
    // now do your ajax form post:
    $.ajax({
        type: "POST"  // etc...
    });
}

Best of luck!
-f!

Answer 3

Put a hidden field with id="action" in your form and set its value when you click one of the buttons. So the JS will be:

$("[name='respond']").live('click', function() { 
    $('#REQUESTFORM #action').val($(this).val());
 $.ajax({
          type: "POST",
              data: $(this).closest('#REQUESTFORM').serialize(),
              url: "content/requests/index.cs.asp?Process=RespondRequests", 
              success: function(output) { 
              alert(output);
              //$(this).closest('#REQUESTFORM').html(output);
          },
          error: function(xhr){
                  alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
          }
      }); 
});

And the HTML:

<form method="post" action="content/requests/index.cs.asp?Process=RespondRequests" id="REQUESTFORM">
 <input type="hidden" name="REQUESTID" value="<%=objRequests("REQUESTID")%>">   
 <input type="hidden" name="BYID" value="<%=objRequests("BYID")%>">   
 <input type="hidden" name="TOID" value="<%=objRequests("TOID")%>">   
 <input type="button" name="respond" value="Confirm" class="btn_confirm" />
 <input type="button" name="respond" value="Ignore" class="btn_ignore" />
 <input type="hidden" id="action" value="" />
</form>