CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Jesse Lin
Jesse Lin

Reputation: 77

How to transfer values from between input

Before anyone marks this as a duplicate, I have looked at many sites and am currently using this one - jQuery - passing value from one input to another for guidance, yet no result... I am trying to pass a value from one input in one form to another input in a 'table'. I have put it in a table because of a very weird reason - it does not display a Sparql value when in a form only displays in a table so the input was placed in a table. My code is below:

Form

<form  onclick="txtFullName.value = txtFirstName.value +'_'+ txtLastName.value">
    First name : <input type="text" name="txtFirstName" value="@ViewBag.FirstName"/> <br><br>
    Last name : <input type="text" name="txtLastName" value="@ViewBag.LastName" /> <br><br>
    Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
    <input id="submit12" type="button" value="Submit">
</form>

Table

 <table id="results">
       <Full name: 
        <br>
        <input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="@ViewBag.DisplayName">
        <br>
        <input id="submit" type="submit" value="Submit">
    </table>

JQUERY

  $('#submit12').on('click', function (e) { //Form submit 
        $('#userInput').change(function () {
            $('txtFullName').val($(this).val());
        });
    });

I am trying to display the txtFullName into userInput input when pressing submit but right now only the `txtFullName' is displayed when pressing submit. Also the submit is the submit button in the FORM.

Anymore info needed let me know:)

Upvotes: 0

Views: 638

Answers (4)

ThinhLe
ThinhLe

Reputation: 409

Edit your JQuery like this:

$('#submit12').on('click', function (e) { //Form submit 
    $('#userInput').change(function () {
        $('#txtFullName').val($(this).val());
    });
});
$('#submit').on('click', function () { //Form submit         
    $('#userInput').val($('#txtFullName').val());
});

I don't clearly understand why you do it but It can fix your code.

Upvotes: 1

Manohar Khadka
Manohar Khadka

Reputation: 2195

If you want to display txtFullName into userInput, simply do something like this:

$('#submit12').on('click', function (e) { //Form submit 
        $('#userInput').val($('#txtFullName').val());
});

And why do you need change function there , if yo need changes when click submit.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

It is not entirely clear what the two buttons do, but the operation itself is really very simple. See comments inline for explanations:

// Wait until the DOM is loaded and all elements are avaialble
window.addEventListener("DOMContentLoaded", function(){

  // Get references to the DOM elements you'll need
  var theForm = document.getElementById("frmTest");
  var txtFirstName = document.getElementById("txtFirstName");
  var txtLasttName = document.getElementById("txtLastName");
  var txtFulltName = document.getElementById("txtFullName"); 
  var txtUserInput = document.getElementById("txtUserInput");   
  
  var btn1 = document.getElementById("btnSubmit1");
  var btn2 = document.getElementById("btnSubmit2");  
  
  // Function to join names together
  function combine(){
    txtFullName.value = txtFirstName.value + '_' + txtLastName.value;
  }
  
  // Set event handlers
  
  frmTest.addEventListener("click", combine);  
  btn1.addEventListener("click", combine);
     
});
<!-- Keep you JavaScript out of your HTML -->
<form  id="frmTest">
    First name : <input type="text" id="txtFirstName" name="txtFirstName" value="@ViewBag.FirstName"> 
    <br><br>
    Last name : <input type="text" id="txtLastName" name="txtLastName" value="@ViewBag.LastName" > 
    <br><br>
    Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
    <input id="btnSubmit1" type="button" value="Combine Names">



 <table id="results">
       <Full name: 
        <br>
        <input id="txtUserInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="@ViewBag.DisplayName">
        <br>
        <input id="btnSubmit2" type="submit" value="Submit">
    </table>
  
</form>

Upvotes: 0

Yaser
Yaser

Reputation: 5719

You need to change the onclick to action on the form if you are trying to use submit button. The other way is to use input type button instead of submit:

So:

$(document).ready(function() {

     $('#submit12').on('click', function (e) { 
       console.log('test');
        $("#txtFullName").val($("#txtFirstName").val() + '_' + $("#txtLastName").val());        
    });
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    First name : <input type="text" id="txtFirstName" value="First"/> <br><br>
    Last name : <input type="text" id="txtLastName" value="Last" /> <br><br>
    Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
    <input id="submit12" type="button" value="Submit">
</form>

Upvotes: 1

Related Questions