javascript - 使用一个 JavaScript 函数和两种形式

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。

函数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);
    }
};

如何在两种形式下使用该函数？现在它采用第一种形式的值，并且从不查看第二种形式。我想我必须使用“this”，但不知道在哪里或如何使用。请不要建议我使用 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");

    // ...
}