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>
2 answers
solution1
1 2018-11-13 16:53:38
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.
solution2
0 2018-11-13 16:38:42
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.