Jquery get input value from another text input value and set into hidden input value

Question

I am new at Jquery. My User Story: I have two input form tag. One is hidden and One is Text. I need to take value from input text and set that value into hidden input and then submit the form with both value. Is it possible to do in Jquery. Here is my example code:

if ($_POST) {
  $email = $_REQUEST['email'];
  $username = $_REQUEST['username'];

  echo "Email Value: " . $email ." And Username Value :" .$username;
}

var lap = $("emailId").val();
var test = $("userId");
test.val(test);

<form>
  <input id="emailId" name="email" type="text" value="">
  <input id="userId" name="username" type="hidden" value="">
  <input type="submit" value="Submit" />
</form>

Your jQuery id selectors are missing # prefix... var test = $("#userId"); Should work fine with those fixed and test.val(lap) — charlietfl
– charlietfl, Commented Nov 13, 2018 at 16:34
As well as the # prefixes you need to use test.val(lap). Also note that this logic will only execute when the page loads. If you want to update the value once one is entered you'll need to use an event handler. I'd suggest input. — Rory McCrossan
– Rory McCrossan, Commented Nov 13, 2018 at 16:37
Do you have an example event handler. I am still learning.Please help. — mike1225
– mike1225, Commented Nov 13, 2018 at 16:42
@mike1225 $('input[type=submit]').on('click', yourFunction) This is event listener on input for click event — Smollet777
– Smollet777, Commented Nov 13, 2018 at 16:47

Trevor · Accepted Answer · 2018-11-13 17:12:20Z

You don't need jQuery for this. I've provide a solution using jQuery as well as vanilla JavaScript.

jQuery Version

$(document).ready(function(){
  $email = $('#email')
  // Note that we are updating the hidden input value each time the
  // text input value changes. We could do this less frequently by
  // using the `input` or `change` event instead of the `keyup` event.
  $email.on('keyup', function(e){
    $('#userId').val($email.val())
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" name="email" id="email" />
  <input type="hidden" name="userId" id="userId" />
  <button type="submit" id="submit">Submit</button>
</form>

Vanilla JavaScript Version

document.addEventListener('DOMContentLoaded', function(e) {
  var txtEmail = document.querySelector('#email')
  var txtUserId = document.querySelector('#userId')
  // Note that we are updating the hidden input value each time the
  // text input value changes. We could do this less frequently by
  // using the `input` or `change` event instead of the `keyup` event.
  txtEmail.addEventListener('keyup', function(e) {
    txtUserId.value = txtEmail.value
  })
})

<form>
  <input type="text" name="email" id="email" />
  <input type="hidden" name="userId" id="userId" />
  <button type="submit" id="submit">Submit</button>
</form>

A brief explanation of my method

Waiting for the HTML to load

Whether you're using jQuery or not, depending on how your JavaScript and HTML code is stitched together, sometimes you're HTML elements are not available when your JavaScript code runs (for example, if your JavaScript code is included in the <head> tag, which I think has become pretty uncommon these days). For this reason, I've gotten into the habit of making sure the document is ready before I reference any HTML elements. Using jQuery, this is done with the following code:

$(document).ready(function(){
  // The code here (inside this function) will be executed after the HTML finishes loading.
})

With vanilla JavaScript, the code looks like this:

document.addEventListener('DOMContentLoaded', function(){
  // The code here (inside this function) will be executed after the HTML finishes loading.
})

Making Updates As Soon As Possible

In addition, my code updates the hidden input value after the text input value has changed, rather than waiting for the form to be submitted. Either option may be perfectly acceptable for a given situation. I am in the habit of updating things like these as soon as possible; if in the future, I write some JavaScript code that is expecting the value of these to input controls to be equivalent, and that code runs before the form is submitted, I'll probably have a bug in my code. Hence, I find it safer to just update as soon as the change occurs.

Trevor · Accepted Answer · 2018-11-13 17:00:56Z

0

As per jquery documentation You forgot to use # in your both selectors. You should use:

var lap = $("#emailId").val();
var test = $("#userId");
test.val(lap);

edited Nov 13, 2018 at 17:00

Trevor

13.5k13 gold badges82 silver badges105 bronze badges

answered Nov 13, 2018 at 16:38

dganenco

1,6161 gold badge8 silver badges18 bronze badges

4 Comments

charlietfl Over a year ago

test.val(test) is incorrect and would make the value "[object Object"]"

Trevor Over a year ago

Nice job referencing the documentation!

mike1225 Over a year ago

@Trevor Thank you Sir. I seen the value when I type in the input box in the console, how do I put this value in hidden input and submit the both value

Trevor Over a year ago

@mike1225 Look at my answer above (stackoverflow.com/a/53285919/269061). It sets the value of the hidden input automatically, so when you submit the form, the value will already be there.

Collectives™ on Stack Overflow

Jquery get input value from another text input value and set into hidden input value

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related