CODEWITHSUNDEEP
phpforms
hexedecimal
hexedecimal

Reputation: 299

2 inputfields same value dynamicly in 1 form

I've 2 input fields which I want to have the same value. When input field id="name_1" is filled in, I want to have it copied into input field id="name_2".

How, or is this possible?

<form action="" method="post">
    <input type="text" name="name_1" id="name_1" value="">
    <input type="text" name="name_2" id="name_2" value="">
</form>

Upvotes: 0

Views: 62

Answers (4)

Aravindan Venkatesan
Aravindan Venkatesan

Reputation: 628

Without using Angular JS

It is better to use class selector to update bind to two input text box elements.

HTML

<input id="name1" class="name" type="text" />

JS 

$(".name").keyup(function(){
$(".name").val($(this).val()); });

JS FIDDLE

Two way binding without Angular

With Angular JS

Angular providing very simple and efficient two way binding options. Please check the below sample.

HTML

<div ng-app>
<input id="name1" ng-model="name" type="text" />
<input id="name2" ng-model="name" type="text" />

JS FIDDLE

Two way binding with Angular

Upvotes: 1

AkshayP
AkshayP

Reputation: 2159

You can do expected functionality using Jquery or Javascript. To make below operation work properly, you have to include latest jQuery in your html page

Try this 

<form action="" method="post">
    <input type="text" name="name_1" id="name_1" value="">
    <input type="text" name="name_2" id="name_2" value="">
</form>

<script>
    $("#name_1").keyup(function () {
      var value = $(this).val();
      $("#name_2").val(value);
    }).keyup();
</script>

JS-FIDDLE

Upvotes: 2

L Ja
L Ja

Reputation: 1506

HTML:

<input id="name1" class="name" type="text" /><input id="name2" class="name" type="text" />

jQuery:

$(document).ready(function(){
    $(".name").keyup(function(){
        var val = $(this).val();
        $(".name").each(function(){
            $(this).val(val);
        });
    });
});

JSFIDDLE: https://jsfiddle.net/yzmdu308/

This way, if the 1st one gets changed, it changes the value of name2, and if name2 gets changed, it changes the value of name1.

Upvotes: 1

SheppardDigital
SheppardDigital

Reputation: 3255

<script type="text/javascript">
$(document).ready(function(){
    $('#field1').blur(function(){
    $('#field2').val($(this).val());
});
});
</script>

<input type="text" name="field1" id="field1">
<input type="text" name="field2" id="field2">

Upvotes: 1

Related Questions