Assign value to hidden textarea onSubmit
Question
I have two textarea fields, the first one is hidden and the second is visible, My question is how can I assign the content of the visible one to the hidden when the submit button is clicked?
Any suggestion? don't matter ( Javascript or Jquery ) the both will help.
5 answers
solution1
2 ACCPTED 2016-01-12 21:49:19
If you are using jquery you can set the value of the hidden field upon the submit event being fired.
$('form').submit(function() {
$('#txt1_hidden').val($('#txt1_visible').val());
})
If you want you can bind the items together so that anytime the visible textarea changes it will automatically update the hidden item.
$('#txt1_visible').on('input propertychange paste change', function(e) {
$('#txt1_hidden').val(this.value);
});
Demo:
solution2
1 2016-01-12 21:49:47
You can use the val() method :
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style id="jsbin-css">
textarea[name=hidden]{
display:none;
}
</style>
</head>
<body>
<form action="" id="myForm">
<textarea name="visible" id="" cols="30" rows="10"></textarea>
<textarea name="hidden" id="" cols="30" rows="10"></textarea>
<input type="submit">
</form>
<script id="jsbin-javascript">
$("#myForm").on("submit",function(e){
//Prevent the submission of the form
//(if you want to submit it, you need to submit it after the duplication of your text are
e.preventDefault();
$("textarea[name=hidden]").val($("textarea[name=visible]").val());
});
</script>
</body>
</html>
this way, you can do the duplication on any event! For instance :
$("textarea[name=visible]").on("change",function(){
...
});
solution3
0 2016-01-12 21:48:10
Javascript solution
You could use onsubmit event and assign the content to the hidden field inside it :
document.form[0].onsubmit=function()
{
//Get visible input value
var visible_input_value = document.getElementById('visible-input').value;
//Assign the previous value to the hidden input
document.getElementById('hidden-input').value = visible_input_value;
};
JQuery solution
Same thing in jquery using submit event and val() function to get/set the value to the field :
$('body').on('submit', 'form', function() {
//Get visible input value
var visible_input_value = $('#visible-input').val();
//Assign the previous value to the hidden input
$('#hidden-input').val( visible_input_value );
})
Hope this helps.
solution4
0 2016-01-12 21:54:27
My proposal:
$(function () { var content = "This is a sample text!" $('<textarea id="myFirsttxtarea">' + content + '</textarea><br/>').insertBefore('#myForm input[type="submit"]'); $('#myForm').on('submit', function(e) { // on submit do: now nothing e.preventDefault(); // clone the element and hide $('#myFirsttxtarea').clone().attr('id', 'mySecondtxtarea').hide().insertBefore('#myForm input[type="submit"]'); }); });
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> <form id="myForm"> <input type="submit" value="Submit"> </form>
solution5
0 2016-01-12 22:06:38
Try this: Simple and straight:
$('form').submit(function(e) {
$('textarea#txt1_hidden').val($('textarea#txt1').val());
e.preventDefault();
});
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.