Question

我有一个用于检查表单输入的JavaScript函数，它将一个AJAX请求发送到PHP脚本。这是HTML：

<form method="post" id="textform35" action="insert_text.php">
    <textarea id="text" cols="80" rows="3" placeholder="forecast text"></textarea>
    <input type=hidden id="text_old" value="">
    <input type=hidden id="sin_type" value="short">
    <input type=hidden id="den" value="0">
    <input type=hidden id="grad" value="България-в">
    <input type=hidden id="span" value="1">
    <input type="button" name="Submit" value="Submit" onclick="validate_sendForm()">
</form>

<form method="post" id="textform70" action="insert_text.php">
    <textarea id="text" cols="80" rows="12" placeholder=" >> "></textarea>
    <input type=hidden id="text_old" value="">
    <input type=hidden id="sin_type" value="short">
    <input type=hidden id="den" value="0">
    <input type=hidden id="grad" value="България-в">
    <input type=hidden id="span" value="1">
    <input type="button" name="Submit" value="Запази" onclick="validate_sendForm()">
</form>

如您所见，有两种形式具有相同的元素但具有不同的id s。

函数validate_sendForm()如下：

function validate_sendForm() {
    var text=document.getElementById("text").value;
    var y=document.getElementById("text_old").value;

    if (text==y) {
        if (y=='') {
            alert("some text ");
            return false;
        } else {
            alert("another text ");
            return false;
        }
    } else {
        var city_id   = document.getElementById("grad").value;
        var fore_code = document.getElementById("sin_type").value;
        var date_for  = document.getElementById("den").value;
        var date_span = document.getElementById("span").value;

        var xhttp = new XMLHttpRequest();
        var params="grad="+city_id+"&den="+date_for+"&span="+date_span+"&sin_file="+fore_code+"&tekst="+text;
        xhttp.open("POST", "insert_text.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.setRequestHeader("Content-length", params.length);
        xhttp.setRequestHeader("Connection", "close");

        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                alert(xhttp.responseText);
            }
        }

        xhttp.send(params);
    }
};

如何在两种形式下使用该功能？现在它采用第一种形式的值，而不是第二种形式。我想我必须使用“这个”，但不知道在哪里或如何。请不要建议我使用jQuery，因为我不能。

Answer 1

首先，我建议您将输入的id更改为class，因为id必须是唯一的。

现在，在你的情况下，一个好的解决方案是将表单id作为参数传递给函数：

onclick="validate_sendForm('textform35')"， onclick="validate_sendForm('textform70')"

然后，在函数内选择它，获取表单输入。

function validate_sendForm(_id){

    var formEl = document.getElementById(_id);

    // if you changed the input's id to class..:
    var inptEl_textOld = formEl.querySelector("input.text_old");
    var inptEl_sinType = formEl.querySelector("input.sin_type");
    var inptEl_den     = formEl.querySelector("input.den");
    // ...
}

另一种方法是将this（而不是表单ID）传递给您单击的<input type="button"引用的函数。

喜欢：onclick="validate_sendForm(this)"

然后选择你需要浏览元素父母的元素：

function validate_sendForm(_btn){

    var formEl = _btn.parentElement.parentElement.querySelector("form");

    // ...
}

Answer 2

我通过将两个随机数的总和作为参数传递给validate_sendForm()来解决我的问题。然后我将数字连接到表单中的所有元素id，从而使它们成为唯一的。

我会将此标记为＆＃34;接受回答＆＃34;不是因为它是最优雅或最正确的，而仅仅因为这对我有用。

Answer 3

$(document).ready(function(){
        $('input[name=Submit]').click(function(){
            var id = $(this).parents('form').attr('id');
        // submit form as per the id
    });
});

您可以使用jquery获取表单的id。根据该ID，您可以获得特定形式的字段。如果您不想使用jquery，可以从方法中传递参数'this'，如其中一个注释中所建议的那样。使用此参数，您可以区分表单。

使用一个具有两种形式的JavaScript函数

3 个答案: