Jquery handle two input fields with same id, same name and same value

Question

I have a form where inputs are dynamically generated two input fields with the same id, same name and same value.

User can then change any value in one of these two similar inputs (ie for example firstname). How can i check if the values in the two input fields are the same, if they are same then just submit the first input and if not the same then submit the changed value.

so final submit will have only firstname:test and lastname:testtwo

how ever if a value is changed for firstname to david than final submit will be firstname:david and 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>

You CANNOT have 2 elements in your markup with identical IDs — Rstew
– Rstew, Commented Aug 8, 2017 at 22:25
You use classes for groups of similar elements. IDs are specific to only one element. — zfrisch
– zfrisch, Commented Aug 8, 2017 at 22:26
Yo need to asign class to group your elements and ID is only for unique elements. — Jesus Carrasco
– Jesus Carrasco, Commented Aug 8, 2017 at 22:27

score 1 · Accepted Answer · 2017-08-09 00:10:35Z

1

Try this:

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

In addition:

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

edited Aug 9, 2017 at 0:10

answered Aug 8, 2017 at 23:40

user8233884

Sign up to request clarification or add additional context in comments.

2 Comments

user3548161 Over a year ago

nice what if i have 50 fields and need to do comparison on them is there a dynamic way using for each

user8233884 Over a year ago

Let me know if you have any concern

Jesus Carrasco · Accepted Answer · 2017-08-08 22:33:55Z

0

Change your 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.

answered Aug 8, 2017 at 22:33

Jesus Carrasco

1,3541 gold badge11 silver badges16 bronze badges

Comments

zfrisch · Accepted Answer · 2017-08-08 22:37:35Z

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

I stated in the initial comments with many others, don't ever use an id for more than one element. In this case, since it is a form we don't need a name for the second box. It's just verifying an element we are already submitting. For an ID I decided to call it, aptly, "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();

 }

});

Please see demo here: https://jsfiddle.net/es9ff4c4/2/

Collectives™ on Stack Overflow

Jquery handle two input fields with same id, same name and same value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related