Trying to use jquery submit form with multiple submit buttons

Question

I have a form called incident form. Its a form with over 90 fields and within this form I have several submit buttons. The first 2 are as follows:

<input type="submit" class="button" id="updateincidentButton" name="updateincidentButton" value="Update Incident"> 
<input type="submit" class="button" id="cancelincidentButton" name="cancelincidentButton" value="Cancel Incident">

They are my basic update the incident or if they don't want to, the user cancels the incident.
Within this form I wanted the user to be able to add a series of date ranges for work missed so I build within the form a "sub-form" which is just a div with some fields that add these date ranges for missed work. I build this section with an "Add Osha Days" button using jquery and ajax. This is submitted when the below button is clicked.

<input type="submit" name="saveoshadayssubmit" id="saveoshadayssubmit" value="Save OSHA Days" class="button rmargin3">

All this is working perfectly using submit button and a php processing file.

Now I am trying to use ajax to update the the add days records and refresh the part of the form that summarizes these days added records to no avail. Here is the jquery snippet I have written just to start testing this. It is not working as it just does the default form submit. In the code I am at this point just trying to capture the input in the div I have ided as "addoshadaysdiv". I am using an alert as I always to see if I am capturing the data I want. It does not seem to be working.

$(function(){
$("#saveoshadayssubmit").click(function(){
    $("#incidentform").submit(function(event){
        var formdata = $("#addoshadaysdiv *").serializeArray();
        alert(formdata);
        event.preventDefault();
})
})

As you can see I am trying to do this only on the "saveoshadayssubmit" button click. Any ideas on what I am doing wrong?

Here is the div code.

<div id="addoshadaysdiv">
<div class="paddingbottom3">
<label class="rmargin3 subtitle">OSHA Days</label>
<input type="hidden" name="oshadaysid" value="3">
</div>
<div class="paddingbottom3">
<input type="submit" name="saveoshadayssubmit" id="saveoshadayssubmit" value="Save OSHA Days" class="button rmargin3">
<input type="button" name="closeoshadayssubmit" value="Close OSHA Days" class="button">
</div>
<div>
<label for="oshastartdate" class="rmargin3">Start Date:</label>
<input type="text" id="oshastartdate" name="oshastartdate" value="01/03/2015" class="datepick eighth rmargin10">
<label for="oshaenddate" class="rmargin3">End Date:</label>
<input type="text" id="oshaenddate" name="oshaenddate" value="03/11/2015" class="datepick eighth rmargin10">
<label for="oshadaytypeid" class="rmargin3">OSHA Days Type:</label>
<select id="oshadaytypeid" name="oshadaytypeid">
<option value="3">Job Transfer</option>
<option value="2">Light Days</option>
<option value="1">Lost Days</option>
</select>
</div>
</div>

by clicking on "#saveoshadayssubmit" you are already submitting a form, since it is a submit button. You should first prevent the event of #saveoshadayssubmit and, then, prevent the event of #incidentform like you did (or do whatever you want on the ".submit" but, in order to execute it, you have to prevent the first form to submit first) — briosheje
– briosheje, Commented Mar 10, 2015 at 16:48

Blazemonger · Accepted Answer · 2015-03-10 16:49:40Z

1

I think you want to remove the .submit() line and just run that inner function on click.

Try this instead:

$("#saveoshadayssubmit").click(function(e){
    e.preventDefault();
    var formdata = $("#addoshadaysdiv *").serializeArray();
    console.log(formdata);
})

answered Mar 10, 2015 at 16:49

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1554967 Over a year ago

This is killing me. I am getting nothing. I know as usual it is some simple error on m part.

Blazemonger Over a year ago

Do you still need to wrap it in $(document).ready? Are you getting errors in your JavaScript console?

user1554967 Over a year ago

Sorry I got it to work. I made a named function and bound it to the click event.

Collectives™ on Stack Overflow

Trying to use jquery submit form with multiple submit buttons

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related