CODEWITHSUNDEEP
javascriptjquery
user3548161
user3548161

Reputation: 119

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

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>

Upvotes: 1

Views: 6630

Answers (3)

user8233884
user8233884

Reputation:

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>

Upvotes: 1

zfrisch
zfrisch

Reputation: 8660

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/

Upvotes: 0

Jesus Carrasco
Jesus Carrasco

Reputation: 1354

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.

Upvotes: 0

Related Questions