CODEWITHSUNDEEP
javascriptjqueryhtml
kirankumar
kirankumar

Reputation: 49

Two text inputs, one submit button. When submitting the form, value of first input appears in the other input with jQuery or JS?

<form action="" id="form2">
  <div>
    <input type="text" id="third">
    <input type="submit" id="submit_form">
  </div>

</form>
<div>
  <input type="text" id="fourth">
</div>

Two text inputs, one submit button. When submitting the form, value of first input appears in the other input in jQuery or JS?

After submitting the form the input value displayed in another input field.

How can I make this work by using JavaScript or jQuery only?

Upvotes: 1

Views: 1765

Answers (3)

Jobelle
Jobelle

Reputation: 2834

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>
    $(document).ready(function () {

        $('#form2').submit(function (event) {
            event.preventDefault();
            $('#fourth').val($('#third').val());
             $('#form2').submit();

        });
    });
</script>
</head>
<body>
 <form id="form2">
  <div>
    <input type="text" id="third" value="ssss">
    <input type="submit" id="submit_form">
  </div>

</form>
<div>
  <input type="text" id="fourth">
</div>

</body>
</html>

Upvotes: 0

Shubham Dubey
Shubham Dubey

Reputation: 118

Above solution is correct but I want to provide a solution with only javascript. You can use button and give a onClick attribute to it. 

<form action=""  id="form2">
<div>
<input type="text" id="third">
<input type="button" id="submit_form" onclick="checkInput()" value="Submit">
 </div>
</form>
<div>
<input type="text" id="fourth" >
</div>

function checkInput() {  document.getElementById('fourth').value=document.getElementById('third').value;}

Upvotes: 0

Luthando Ntsekwa
Luthando Ntsekwa

Reputation: 4218

Use button instead of submit input type, Here you go: 

$('#submit_form').click(function(){
  
    $('#fourth').val($('#third').val());

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="form2">
        <div>
            <input type="text" id="third">
            <input type="button" id="submit_form" value="Submit">
        </div>

    </form>
    <div>
        <input type="text" id="fourth">
    </div>

Upvotes: 2

Related Questions