Question

我有一个表单，其中输入动态生成两个具有相同id，相同名称和相同值的输入字段。

然后，用户可以更改这两个相似输入之一中的任何值（例如firstname）。如何检查两个输入字段中的值是否相同，如果它们相同则只提交第一个输入，如果不相同则提交更改后的值。

所以最终提交只有 firstname：test和lastname：testtwo

如果将firstname更改为david的值将比最终提交更新 firstname：david和lastname：testtwo

<form id="myform" name="myform">
    <input type="text" name="firstname" id="firstname" value="test" />
    <input type="text" name="firstname" id="firstname" value="test"/>
    <input type="text" name="lastname" id="lastname" value="testtwo" />

</form>

Answer 1

试试这个：

＆＃13;

$(document).ready(function(){
  $("#submit").click(function(){
    var first_name = $("#firstname").val()
    var last_name = $("#firstname_verification").val()
    
    if(first_name!=last_name){
       console.log("please varify your name")
       // do something here

    } else{
       console.log("name varified")
      // do something here
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">
    <input type="text" name="firstname" id="firstname" value="test" />
    <input type="text" id="firstname_verification" value="test"/>
    <input type="text" name="lastname" id="lastname" value="testtwo" />

</form>

<button id="submit">Submit</button>

＆＃13;

另外：

＆＃13;

$(document).ready(function(){

    $("#submit").click(function(){
    $("form").each(function(){
    var $arr = $(this).find(':input') 
    //get  key/value  pair
    var values = {};
    $arr.each(function() {
        values[this.name] = $(this).val();
    });
      console.log(values)
    //get only values  in a single array
    var val_arr = []
    $arr.each(function() {
        val_arr.push($(this).val());
    });
    console.log(val_arr)
    //
    if(val_arr[0] === val_arr[1]){
      console.log("name varified")
    } else {
     console.log("please varify your name")
    }
    
     
});
})

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">
        <input type="text" name="firstname" id="firstname" value="test" />
        <input type="text" id="firstname_verification" value="test"/>
        <input type="text" name="lastname" id="lastname" value="testtwo" />

    </form>

    <button id="submit">Submit</button>

＆＃13;

Answer 2

https://jsfiddle.net/es9ff4c4/2/

我在与其他许多人的初步评论中说过，不要将id用于多个元素。在这种情况下，因为它是一种形式，我们不需要第二个盒子的名称。它只是验证我们已经提交的元素。对于ID，我决定称之为＆＃34; firstname_verification＆＃34;

HTML

<form id="myform" name="myform">
    <input type="text" name="firstname" id="firstname" value="test" />
    <input type="text" id="firstname_verification" value="test"/>
    <input type="text" name="lastname" id="lastname" value="testtwo" />

</form>

的JavaScript / JQuery的

$("#myform").on("submit", function(e) { 
let $box1val = $("#firstname").val();
let $box2val = $("#firstname_verification").val();

if($box1val != $box2val) {
alert('Please Verify First Name');
e.preventDefault();

 }

});

请在此处查看演示： https://jsfiddle.net/es9ff4c4/2/

Answer 3

更改您的HTML

HTML

<form id="myform" name="myform">
    <input class="person" type="text" name="firstname" id="firstname" value="test" />
    <input class="person" type="text" name="firstname" id="secondname" value="test"/>
    <input class="person" type="text" name="lastname" id="lastname" value="testtwo" />

</form>

<强> SCRIPT

var elements = document.getElementByClass('person');

console.log(elements[0].value) // print test.

Jquery处理两个具有相同id，相同名称和相同值的输入字段

3 个答案: