使用兩種形式的JavaScript函數

我有一個JavaScript函數用於檢查向PHP腳本發送AJAX請求的表單輸入。下面是HTML：使用兩種形式的JavaScript函數

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

我如何使用功能兩種形式？現在它採用第一種形式的值，而不會看第二種形式的值。我想我必須使用「這個」，但不知道在哪裏或如何。請不要暗示我使用jQuery，因爲我不能。

來源

2016-02-11 ERIK_SON

您正在使用具有相同值的ID屬性... ID應該是唯一的 –

是的，否則我將無法使用該功能。我認爲有一種方法可以指向具有唯一ID的表單。這是我正在尋找的。 –

您是否需要分別提交兩份表格？或者兩者都應該點擊任何一個按鈕提交？ – PHPExpert

我通過傳遞兩個隨機數的總和作爲參數validate_sendForm()解決我的問題。然後我將這個數字連接到表單中的所有元素id，從而使它們唯一。

我會將此標記爲「接受的答案」，不是因爲它是最優雅或最正確的答案，而僅僅是因爲這對我而言是有效的。

來源

2016-02-12 07:32:55

首先，我建議您將輸入的id更改爲class，因爲id必須是唯一的。

現在，你的情況很好的解決方案將通過爲PARAM形式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"); 
    // ... 
}

的另一種方式是通過（而不是形式的ID）this你的函數，它是你點擊的<input type="button"參考。

喜歡：onclick="validate_sendForm(this)"

，然後把你需要瀏覽元素的父母元素：

function validate_sendForm(_btn){ 

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

    // ... 
}

來源

2016-02-11 10:58:15 Saba

要選擇函數內部的表單，我可以這樣做：document.forms [「textform70」] [「text」]。value？ –

不，'document.forms'是一個數組，你必須用索引https：//developer.mozilla瀏覽它。org/it/docs/Web/API/Document/forms ，無論如何，如果你有'id'，你可以使用'getElementById'獲得它。 – Saba

我嘗試了你的第一個建議。在HTML中將所有「id」改爲「class」，然後複製你的代碼並添加一個簡單的'alert（inptEl_text）; '顯示結果。在控制檯中它說'TypeError：formEl.querySelector（...）是null'，無論我在textarea中輸入什麼內容。 –

$(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'。有了這個參數，你可以區分表格。

來源

2016-02-12 08:02:58 suyesh

使用兩種形式的JavaScript函數

回答

相關問題