Question

我正在尝试创建一个包含多个表单的页面。当一个表单打开时，其他表单将关闭，您将一次提交一个表单。目前，titleForm2正在提交。 Console.log显示正确的输入，SectionTitle为“input”，SectionID为“2”。但是，在提交titleForm3或titleForm4时，它们不起作用。 Console.log显示SectionTitle的“”（空白）和SectionID的“2”。如果我先更改了titleForm2，那么尝试更改另外两个将在console.log中显示“2之前的输入”和“2”，但不会对实际的表单项进行任何更改。不知道如何让其他两种形式发挥作用。

这是我的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>

这是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;

   }

谢谢！

Answer 1

在本节这里

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

表单数据的值将始终设置为页面上的FIRST输入，并带有您指定的名称。您想修复jquery选择器，以便从正在处理的表单内的输入中获取值。进行这一小改动应该可以解决您的问题。

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

多个表单Ajax，一次提交一个

1 个答案: