I have a textfield in HTML, where the value is predefined, e.g. "hello".
Now I change the value manually on my website from "hello" to "bye".
When I click on a button, that calls the same site again, my value of the input type should be "bye" now and not "hello". Here you can see my code :
<form method="POST" id="ReloadPage" name="ReloadPage" action="MyWebsite" onsubmit="getValue();">
<strong>word: </strong>
<input id="word" type="text" size="30" value="hello" name="WORD" />
<script type="text/javascript">
function getValue() {
document.getElementById("word").value="bye";
}
</script>
But somehow, the value will always be hello and doesn't change to bye.
Thanks a lot for help.
You can't use function as name of function.Change name of your function
<form method="POST" id="ReloadPage" name="ReloadPage" action="MyWebsite" onsubmit="return GetValue();">
<strong>word: </strong>
<input id="word" type="text" size="30" value="hello" name="WORD" />
function GetValue() {
document.getElementById("word").value="bye";
return false;
}
Also when you submit the form page will reload so it will show initial value again.
Related
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>
I'm having to dip my toe back in the EE and javascript world after many years. What am I doing wrong here... a simple form being submitted, with a JS block to validate during the onsubmit event of the submit button. The alert("Here") message box does not appear when I submit the form, and the form gets submitted successfully, i.e. HelloForm gets displayed, with blank values, so I'm led to believe that validate() is not being called. I've tried this in both the Eclipse internal web browser as well as Chrome and see the same thing both times. I'm assuming that I don't need to explicitly activate javascript in either browser, as it would be on by default.
<html>
<head>
<script>
function validate()
{
alert("Here");
var x = document.forms["inputForm"].["first_name"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="inputForm" action="HelloForm" method="GET" onsubmit="return validate()">
First Name: <input type="text" name="first_name">
<br />
Last Name: <input type="text" name="last_name" />
<input type="submit" value="Submit The Form" />
</form>
</body>
</html>
In this line will throw a syntax error:
document.forms["inputForm"].["first_name"].value
^^^
The statement is wrong, should be without dot between braces:
document.forms["inputForm"]["first_name"].value
//or
document.forms.inputForm.first_name.value
Working with Objects
You can use Html5 Validations.
<form name="inputForm" action="HelloForm" method="GET" >
First Name: <input type="text" name="first_name" required />
<br />
Last Name: <input type="text" name="last_name" required />
<input type="submit" value="Submit The Form" />
</form>
Working Demo
<script>
function valid() {
document.getElementById("name").style.borderColor = "#ef0000";
}
</script>
<form method="post" action="">
<input type="text" name="name" id="name">
<input type="submit" onclick="valid()" value="click">
</form>
why on earth this code doesn't work? I se eonly blick of red and the border is in its initial state again. I beg your pardon guys, really.I know it's a duplicate (I have even found at least one working solution here: http://jsfiddle.net/bcxLz4wh/ ) I jsut wanna know what's wrong with my code and why it returns to its initial state.
It returns to it initial state because you are clicking on a submit button. It's default behaviour is to submit the form which refreshed the page. If you want to only change the border-color you need to override that default behaviour.
Something like:
function valid(e) {
document.getElementById("name").style.borderColor = "#ef0000";
e.preventDefault();
}
<form method="post" action="">
<input type="text" name="name" id="name">
<input type="submit" onclick="valid(event)" value="click">
</form>
Here is my problem, when i click the submit button, the textbox doesn't show any value
Is there any mistakes, i am just a newbie
Thank you very much
<form id="form1" name="form1" method="post" >
<p>
<input type="submit" name="setValue" id="setValue" value="submit" onclick="setValue()"/>
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue()
{
document.getElementById('bbb').value="new value here";
}
</script>
The first issue is that you're using the same name for the element as the function, so window.setValue is not the function, but the submit button, and that's an error.
The second issue is that when you hit the submit button, the form is submitted and the page reloads, that's why you wont see a value, you have to prevent the form from submitting.
You could do it with javascript, but the easiest would be to just use a regular button instead of the submit button.
<form id="form1" name="form1" method="post">
<p>
<input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('bbb').value = "new value here";
}
</script>
FIDDLE
I was typing the same answer what Adeneo just given, thank you Adeneo.
And user3635102, your <form> was good, you can keep it as it was. Only you need to change <input type="submit"> to <input type="button"> . if you need to submit the form in future you can update your Javascript as follows which will submit form1:
<script>
function setValue() {
document.getElementById('bbb').value = "new value here";
document.getElementById("form1").submit();
}
</script>
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;