I have this input:
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
and I want to get this input value in a hidden input, so I used this:
<input type="hidden" name="tag" value="tags" />
Instead of getting the true value of the first input, I only get the string "tags"! Can you please tell me how to obtain the true value of the first input in my hidden input? Thanks!
EDIT: Actually it's a submit page, the user enters tags in the #tag1 and when he clicks on submit I want to send these tags to my controller, that's why I'm using the hidden input...
My full code:
<form>
<p>
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue()"; /></p>
<script>
$('#tag1').tagsInput({
// my parameters here
});
</script>
<style>
#wrapper {
margin: 20px;
}
</style>
<p>
<input type="submit" value="Create" />
<input type="hidden" name="taggg" id="tag2" />
<script type="text/javascript">
function setValue() {
document.getElementById("tag2").value = document.getElementById("tag1").value;
}
window.onload = setValue;
</script>
</p>
</form>
I don't understand why you would want to copy the value of one input field to another (albeit, hidden). But if that is what you want to do, try using the below code.
The function attached to the onblur event of the input field would set the value of the input field to the hidden field whenever it loses focus.
The window.onload = setValue will do the same on page load.
HTML
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" onblur="setValue();" />
<input type="hidden" name="tag" value="tags" id="tag1_hidden" /> <!-- Note the addition of an id attribute -->
JavaScript
function setValue() {
document.getElementById("tag1_hidden").value = document.getElementById("tag1").value;
}
window.onload = setValue;
Try this
<input id="tag1" type="text" name="tags" class="tags" value="#Model.list" />
<input type="hidden" name="tag" value="tags" id="tag2" />
Jquery:
$("#tag2").val($("#tag1").val());
or
$("#tag1").blur(function() {
$("#tag2").val($(this).val());
});
You can do like this (and you will need javascript for this).
Give a id to your hidden input also like:
<input type="hidden" id="hidden_input" name="tag" value="tags" />
and then use/paste this code when you need it:
var input_value = document.getElementById('tag1').value;
document.getElementById('hidden_input').value = input_value;
Related
I have a simple html form i.e.
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value=""/>
</form>
in <script> tag I am doing validation and changing the value of return:
<script>
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname");
});
</script>
Validation is working successfully while submitting the form but I am getting empty value in return input type. How can I make it work?
Looks like you are missing an id on the return input, you just have a name. So it should look like this:
<input type="hidden" name="return" id="return" value=""/>
That way when you call the input in js with $('#return') it will get it by it's proper id.
<input type="hidden" name="return" value=""/>
$("#return").val("http://localhost:9000/app/fname");//PROBLEM RESIDE Here
See what are you doing you are trying to assign the value to a selector that have id = return . But you don't have any element with this id however , you have an element with the same name.You can resolve this in two ways:
First selecting the element by its name:
$("input[name='return']").val("http://localhost:9000/app/fname");
or you can assign the id attribute to your input element as
<input type="hidden" id="return" name="return" value=""/>
You are assigning the value of input with id="return" which doesn't exist.
$("#return").val("http://localhost:9000/app/fname");
You should either give an id to input tag as
<input type="hidden" name="return" id="return" value=""/>
Or change script to
$("input[name='return']").val("http://localhost:9000/app/fname");
You call node using id in jquery , your return input doesnt have the Id called return
$('#registration-form').submit(function () {
var fname = $.trim($('#form-reg-fullname').val());
$("#return").val("http://localhost:9000/app/fname"); //setting the value
console.log($("#return").val()); //getting the value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top" id="registration-form">
<input type="text" class="form-control" name="form-reg-fullname" data-form-field="Name" id="form-reg-fullname">
<input type="hidden" name="return" value="" id="return"/>
</form>
How to add arguments in a form action using input type="hidden".
My HTML snippet...
<form id="form1">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
My JavaScript snippet...
function add()
{
document.getElementsByName('usID').value=789;
document.getElementsByName('usname').value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
After entering "text" in the textbox and pressing ADD, the link looks like this...
http://localhost:3000/page?txt=text&usID=123&usname=name1
Why hasn't the usID and usname changed to 789 and "name2" respectively?
Any other alternative if not this?
getElementsByName is going to return a collection of html elements (NodeList), not a single html element. meaning the return value doesnt have a value attribute that will change the input. you need to either give them an id and find them with getElementById and then change the value, or grab the first element of your collection
document.getElementsByName('usname')[0].value="name2";
or (preferred way)
<input type="hidden" name="usname" value="name1" id="usname"/>
function add(){
document.getElementById('usname').value="name2";
...
}
though i have to ask, is there a reason you're changing the hidden field element like this?
this help you :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function add()
{
var usID = document.forms["frm"]["usID"];
var usname = document.forms["frm"]["usname"];
usID.value=789;
usname.value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
</script>
<h3>Please select the <span>first letter</span> of your <span>last name</span>: </h3>
<form id="form1" name="frm">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
</body>
</html>
This question seem to be very silly! but I am looking for the best answer,
I have a input field and a hidden field. How to set the value of the input field as value of the hidden field?
<input class="class1" id="id1" name="name1" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
Please try this
$(document).ready(function(){
$("#id1").change(function(){
$("#id1").val($("#hidden").val());
});
});
DEMO
You can use a change event handler to update the value of hidden field
//set the initial value
hidden.value = id1.value;
<input class="class1" id="id1" name="name1" value="06/30/2015" onchange="window.hidden.value=this.value" />
<input type=hidden name="hidden" id="hidden" value="I want the value of above field">
You can this by below why, i used onblur for set values from input to hidden. same why you can use different method for this.
Or if you strictly want to use javascript then add one onblur function and do code as i do with callthis() function.
$("#id1").blur(function(){
$("#hidden").val($(this).val())
console.log($("#hidden").val());
});
function callthis(inputobj)
{
document.getElementById("hidden").value = inputobj.value;
console.log(document.getElementById("hidden").value)
}
<input class="class1" id="id1" name="name1" onblur="callthis(this)" value="06/30/2015" />
<input type="hidden" name="hidden" id="hidden" value="I want the value of above field">
I use jQuery and ajax.
In the first. it is my html.
<form id="frm" name='frm' action="." method="post">
<div style="position: absolute; top:270px;">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</div>
</form>
And, I create submit function like below in JS.
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
console.log(serialized_date);
However, the "console.log" logged "set" paramater.
but, btn1 or btn2 can't show the log.
I guess it is child of the mybuttons div tag.
I don't want to remove the tag. because, I create dynamically the html by javascript.
$('#mybuttons').innerHTML = "<input type="\submit\" class="\buttonbig3\" name=\"btn1\" value=\"1\" /><br />";
Could you tell me how to serialize child tag.
I hope will be helpful , just find the button that does submit and added to the serialized
$('#frm').submit(function() {
var serialized_date = $('form#frm').serialize();
var btn = $(document.activeElement);
serialized_date += "&" + btn.attr("name") + "=" + btn.val();
console.log(serialized_date);
});
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm" name='frm' action="." method="post">
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
</div>
<input id="hidden-qid" type="hidden" name="set" value="hoge" />
</form>
Serialize don't add submit button values to the data as submit buttons should be used only to submit the form, not to send specific data. You have to change the type="submit" to something else if there is specific data you want to get out of it.
serialize() docs
The .serialize() method creates a text string in standard URL-encoded
notation. It can act on a jQuery object that has selected individual
form controls, such as , , and : $( "input,
textarea, select" ).serialize();
Buttons can't be serialized. Only the elements with user inputs can be serialized like textbox, radio button, etc
If you place an input box inside the div, you will find it in your console.log.
<div id='mybuttons'>
<input type="submit" class="buttonbig3" name="btn1" value="1" /><br />
<input type="submit" class="buttonbig3" name="btn2" value="2" /><br />
<input id="hidden-qid" type="hidden" name="rias" value="hoge" />
</div>
Now if you try submitting the form, you will get that input text inside the div element. So it's not about child elements here.
This is my demo cord.
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" onclick="doMath();" />
<script type="text/javascript">
function doMath()
{
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
// Add them together and display
var sum = parseFloat(my_input1) + parseFloat(my_input2);
document.getElementById('total').value=sum;
}
I want to work this function when my_input2 is enter it's value. Just like onclick method for button is there any event to set value to total tetxfeild after key release event?
<script type="text/javascript">
$(document).ready(function () {
$("#my_input2").blur(function () {
var sum = parseInt($("#my_input1").val()) + parseInt($("#my_input2").val());
$("#total").val(sum);
});
});
</script>
<div>
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" />
</div>
And also u should frame ur question correctly bcz u have added code in button click and asking us it should work after leaving textbox
Put onkeyup() on second input field this will fire your function.
Something like that:
<input type="text" id="my_input2" onkeyup="doMath();" />
try this
<input type="text" id="my_input2" onchange="doMath();" />