[farril]

Hi,

I've got an asp.net page, which uses three separate stages, only stage 2 uses jquery and ajax to submit data, stage 1 and stage 3 both contain asp buttons to submit to the codebehind however.

As ASP.net pages require a form to encompass the entire pages code, im having trouble only submitting the section of code i want. At the moment if i press a submit button in any section it runs the jquery function, i only want it to run when i press a particular button inside stage2.

I can get it to trigger onclick using the buttons class, however this then takes away the form submit, so none of the data is read within the form.

below is an example of my code layout

<form runat="server" id="import_form">
<div id="stage1">
<asp:Button ID="stage1ContinueBtn" runat="server" onclick="stage1Cont_btnClick" Text="Button" />
</div>
<div id="stage2">
//lots of other buttons, gets list of contacts here. button below should call the jquery function, and submit everything inside just this DIV.

<input src="images/button-continue.png" title="Save Contacts" type="image" /> 
</div>
<div id="stage3">
<asp:Button ID="stage3FinishBtn" runat="server" onclick="stage3Finish_btnClick" Text="Button" />
</div>
</form>



    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('form#import_form').submit(function () {
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/ParseContact",
                    data: JSON.stringify({
                        selectedContactsArray: selectedContactsArray,
                        numberOfSelectedContacts: numberOfSelectedContacts
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function () {
                    },
                    error: function (x) {
                        alert("The call to the server side failed. "
                            + x.responseText);
                    }
                });
</script>

As you can see its currently set up to submit the whole form when i press a submit button. However as lots of buttons submit to the codebehind it doesn't work as i need. I just need to keep the data inside stage2, and only run the function when i click the button inside stage2.

Is there a way to have both an onclick for a button class, and keep the form area to encompass the data? Or even better, run and submit the query for everything inside the DIV instead of the form?

This post has been edited by farril: 13 November 2012 - 11:35 AM

[BobRodes]

If I understand you correctly, you want to access all of the data inside a div when a submit button is clicked. Just put a class on the div. When you click the submit button, use a selector something like this:

$('.myClass input, .myClass select').each(index, element) {
    //get the value of each element and plug it into a JSON variable
});
//send the JSON to the server

This post has been edited by BobRodes: 17 November 2012 - 12:05 PM