Multiple forms Ajax, submit one at a time

Question

I am trying to create a page that has multiple forms on it. When one form is open, the others are closed, and you will submit one form at a time. Currently, titleForm2 is submitting beautifully. Console.log shows correct input, "input" for SectionTitle and "2" for SectionID. However, when submitting titleForm3 or titleForm4, they do not work. Console.log shows "" (blank) for SectionTitle and "2" for the SectionID. If I have changed titleForm2 first, then attempting to change the other two will show "earlier input from 2" and "2" in the console.log, but no changes are made to the actual form items. Not sure how to get the other two forms to work.

Here is my HTML:

<div class="expand">
<div class="title" id="SectionTitle2" >Academics</div>
<input type="button" onclick="showTitleForm('2');" name="editTitle2" value="Edit Title">
<form id="titleForm2" method="POST" onsubmit="processTitle('titleForm2')" >
    <div id="SectionTitle2-group" class="form-group">
        <input type="text" name="SectionTitle" />
    </div>
    <div id="SectionID2-group" class="form-group">
        <input type="hidden" name="SectionID" value="2" />
    </div>
    <input type="submit" value="Save" />
</form>
</div>
<div class="expand">
<div class="title" id="SectionTitle3" >Athletics</div>
<input type="button" onclick="showTitleForm('3');" name="editTitle3" value="Edit Title">
<form id="titleForm3" method="POST" onsubmit="processTitle('titleForm3')" >
    <div id="SectionTitle3-group" class="form-group">
        <input type="text" name="SectionTitle" />
    </div>
    <div id="SectionID3-group" class="form-group">
        <input type="hidden" name="SectionID" value="3" />
    </div>
    <input type="submit" value="Save" />
</form>
</div>

Here is the JavaScript:

function hideAllForms() {
    var x = document.getElementsByTagName("form");
    //console.debug(x[0]);
    var i;

    for (i=0; i < x.length; i++) {
        //console.debug(x[i]);
        x[i].style.display="none";
    }
}

$(document).ready(hideAllForms);


function hideTitleForms(id) {
    var x = document.getElementsByTagName("form");
    //console.debug(x[0]);
    var i;

    for (i=0; i < x.length; i++) {
        console.debug(x[i].id);
        if (x[i].id == "titleForm"+id){
            continue;
        } else {
            x[i].style.display="none";
        }
    } 
}

function showTitleForm(id) {
    //console.debug(id);
    document.getElementById("titleForm"+id).style.display="block";
    hideTitleForms(id);
}

function processTitle(formID) {

    var form = '#' + formID;

    $('.form-group').removeClass('has-error');

    var formData = {
        'SectionTitle'  : $('input[name=SectionTitle]').val(),
        'SectionID'         : $('input[name=SectionID]').val()
    };

    console.log(formData['SectionTitle']);
    var id = formData['SectionID'];
    console.log(id);


    // process the form 
    $.ajax({
        type: 'POST',
        url: 'editTitle.php',
        data: formData,
        dataType: 'json',
        encode: true
    }).done(function(data) { // using the done promise callback
        // log data to the console
        console.log(data);

        // handle errors and validation messages
        if (data.success === false) {
            $('SectionTitle'+id+'-group').addClass('has-error'); // use CSS to make red input
            $(form).append('<div class="help-block">' 
                                                + data.errors.SectionTitle 
                                                + '</div>'
                                                );
            $('SectionID'+id+'-group').addClass('has-error');
            $(form).append('<div class="error-block">'
                                                + data.errors.SectionID
                                                + '</div>'
                                                );
        } else { 
            $(form).append('<div class="success">'
                                                + data.message
                                                + '</div>'
                                                );
            document.getElementById('SectionTitle'+id).innerHTML = formData['SectionTitle'];
            hideAllForms();
        }       
    });

    //formData = [];        
    //id = "";
    //eg = "";
    event.preventDefault();
    return false;

   }

Thank you!

Answer 1

In this section here

var formData = {
    'SectionTitle'  : $('input[name=SectionTitle]').val(),
    'SectionID'         : $('input[name=SectionID]').val()
};

The values of the form data will always be set to the FIRST input on the page with the name you specified. You want to fix your jquery selector so that you get the value from the input that's inside the form you are processing. Making this small change should fix your issue.

var formData = {
    'SectionTitle'  : $(form).find('input[name=SectionTitle]').val(),
    'SectionID'         : $(form).find('input[name=SectionID]').val()
};