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

Question

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

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

所以最终提交将只有 名字：测试 和 姓氏：测试二

如果将名字的值更改为大卫，则最终提交将是 名字：大卫 和 姓氏：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

试试这个：

$(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
}
})
})

<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>

另外：

$(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")
}


});
})
})

<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>

Answer 2

更改您的 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>

脚本

var elements = document.getElementByClass('person');
console.log(elements[0].value) // print test. 

Answer 3

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

我在与许多其他人的最初评论中说过，永远不要对多个元素使用 id。在这种情况下，由于它是一个表单，我们不需要第二个框的名称。它只是验证我们已经提交的元素。对于ID，我决定恰当地称它为"firstname_verification"

.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/