I need to send a variable returned from a javascript function with a form.
<form name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
</form>
function send()
{
var number = 5;
return number;
}
In the validate_accountinfo.php I want to return the value of the function. How to do this?
Place a hidden field in your form, and set its value in your javascript function.
Hidden field:
<input type="hidden" id="hdnNumber">
JavaScript:
function send(){
var number = 5;
document.getElementById("hdnNumber").value = number;
}
Add an <input hidden id="thevalue" name="thevalue" /> to the form, set its value using javascript and then submit the form.
<form id="RegForm" name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
<input hidden id="thevalue" name="thevalue" />
</form>
<script type="text/javascript">
function send()
{
var number = 5;
return number;
}
document.getElementById('thevalue').value = send();
document.getElementById('RegForm').submit();
</script>
Make a <input type="hidden" id="field" /> and update it's value with jQuery.
$("#field").attr({value: YourValue });
Add a hidden input and populate it before sending. Make sure you specify a name= attribute.
<form name="RegForm" method="post" action="/validate_accountinfo.php" onsubmit="send()">
<input type="hidden" name="myvalue"/>
</form>
function send()
{
var number = 5;
// jQuery
$('input[name=myvalue]').val( number )
return true;
}
Related
Friends,
Plz check out my code and tell me why am not getting the result if I use form tag.
When I remove the form tag, I get the result. why can't I get the expected result if I use form tag ? Your suggestions can help me understand this better !! thank u ..
CODE :
<html>
<head>
<title>ADDITION OF 2 NOS</title>
<script type="text/javascript">
function add() {
var x=document.getElementById("value1").value;
var y=document.getElementById("value2").value;
var z=x+y;
document.getElementById("result").innerHTML=z;
}
</script>
</head>
<body>
<center>
<form name="form1" id="form1_id">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
</center>
</body>
</html>
You need numerical values. document.getElementById("value1").value returns a string.
var x = +document.getElementById("value1").value;
// ^ cast to number
To prevent submitting, you need to include
<form onsubmit="return false;">
as well.
function add() {
var x = +document.getElementById("value1").value;
var y = +document.getElementById("value2").value;
var z = x + y;
document.getElementById("result").innerHTML = z;
}
<form name="form1" id="form1_id" onsubmit="return false;">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
First of all, your submit element is causing the form to submit. It does the add() then submits the form. To prevent that, use onsubmit="return false;" like so:
<script type="text/javascript">
function add()
{
var x=document.getElementById("value1").value;
var y=document.getElementById("value2").value;
var z=x+y;
document.getElementById("result").innerHTML=z;
}
</script>
<body>
<center>
<form name="form1" id="form1_id" onsubmit="return false;">
ENTER NO 1 : <input type="text" name="value1" id="value1"><br>
ENTER NO 2 : <input type="text" name="value2" id="value2"><br>
<input type="submit" value="SUBMIT" onclick="add()">
<p id="result"></p>
</form>
Second of all, you're doing concatenation in your add() function. If you want to really add the numbers, use
var z = parseInt(x) + parseInt(y);
in your add() function. If you expect decimals use parseFloat() instead.
Okay, when that submit button is clicked and it's present in one (or more) form(s) a redirect happens. This redirect happens because the form will be submitted after that click.
So, to stop this redirect you need to prevent the default action of the browser to this form at its submit event, e.g., give it a callback, then return exact false at this function, or call [Event]#preventDefault.
form1 = document.form1
var form1
form1.addEventListener('submit', function (event) {
event.preventDefault()
}, false)
Done. Note: your sum actually concatenates strings. I'd also note that the HTMLFormElement#submit method wouldn't trigger this submit event, and that's good.
I have a form in which there is one text field is provided with a submit button.On clicking submit button,it redirects to second php page from first php page.
index.php
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert()" />
</form
<script type="text/javascript">
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search").value;
document.writeln(str.toLowerCase());
}
</script>
On submitting the form,i want the url to become like submit.php?search=text
I want this text to be in lower case,although if text entered is uppercase.
Please guide me how to make this text lower case,I am using the above script for converting it to lower case.But its not converting the text in lower case in URL.
Please guide me on this..
There was a few errors, you were missing the right angle bracket on </form> and you were trying to write the value rather than setting the field value, try this...
<form action="submit.php" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form>
<script type="text/javascript">
function convert() {
alert("hi");
var str;
var srch=document.getElementById("search");
str = srch.value;
srch.value=str.toLowerCase();
}
</script>
You can do this only using javascript with a few extra stuff:
1) Give your <form> an id
<form action="submit.php" method="get" id="form1">
2) Make your <input> type as button. The reason for this is because we want to make sure the convert() function is executed first, and after that we will submit the form.
<input type="button" value="submit" onclick="convert()" />
3) Finally javascript to:
function convert()
{
alert("hi");
var str ;
str = document.getElementById("search");
str.value = (str.value.toLowerCase());
//get the form id and submit it
var form = document.getElementById("form1");
form.submit();
}
Fiddle
You are use form element so you can get any elements inside form element access by name, Here Our form name is form1 and inside this form inputbox name="search" and access this value by this way, document.form1.search.value.toLowerCase();
Check this Demo jsFiddle
JavaScript
function convert() {
alert("hi");
var str = document.form1.search.value.toLowerCase();
document.writeln(str);
//console.log(str);
}
HTML
<form name="form1" method="get">
<input type="text" name="search" id="search" />
<input type="submit" value="submit" onclick="convert();" />
</form >
try like this:
alert("hi");
document.getElementById("search").value = document.getElementById("search").value.toLowerCase();
return true;
Fiddle Live
Why my simple javascript validation not working. I want to check if the default text is same as default value (Keyword(s)), then submit the form with empty parameter.
<form method="get" id="search_form" action="http://somesampleurl.com" onsubmit="return validation();">
<input name="s_rawwords" value="Keyword(s)" id="search_field" class="search_field" type="text">
<input name="s_freeloc" value="City, State or Zip" id="search_field2" class="search_field" type="text">
<input value="" id="search_button" type="submit">
</form>
<script type="text/javascript">
function validation(){
var search_key = document.getElementById("search_field").value
alert(search_key);
if(search_key =="Keyword(s)"){
alert("step2");
search_key = "";
}
}
</script>
Your function never returns true or false, so it doesn't validate anything. Return false when the inputs are invalid and you don't want the form to be submitted.
See here MSDN documentation
Try this code:
function validation(){
var search_key = document.getElementById("search_field").value;
alert(search_key);
if(search_key =="Keyword(s)"){
alert("step2");
document.getElementById("search_field").value = "";
}
return true;
}
I have an HTML code:
<form action="?" id="form1" method="POST" onsubmit="return g.submitForm();">
<input type="text" name="posX" id="formPosX" />
<input type="text" name="posY" id="formPosY" />
<input type="submit" value="Send" />
</form>
and JS code:
var g = {
submitForm: function () {
var form = document.forms.form1;
if ( form.posX.value > 100 )
{
form.posX.value = 100;
}
return false;
}
}
and this form is always sending after updating values. My goal is to update wrong values and stop submitting form (I'd like to do it via AJAX). When I remove the IF statement then code works fine, but I need to update some values (and also show an error, if is).
Hope you'll understand my very bad English :)
You're assuming the value in the form input is an integer, when in reality it will be treated as a string data type. Try converting the value to a number before applying the comparison.
if ( parseInt(form.posX.value) > 100 )
{
form.posX.value = "100";
}
I've adapted your code see below (You will need to include the Jquery library):
JS Fiddle
http://jsfiddle.net/boggey79/kN49d/
Form request stopped, because onSubmit return false. You need return true.
Check input value on keypress event:
<script>
function checkPosX(this) {
if ( parseInt(this.value) > 100 ) {
this.value = "100";
}
}
</script>
<form action="?" id="form1" method="POST">
<input type="text" name="posX" id="formPosX" onkeypress="checkPosX(this)" />
<input type="text" name="posY" id="formPosY" />
<input type="submit" value="Send" />
</form>
Then work fine.
I've got this onclick call:
onClick="mySubmit();
which calls this function:
function mySubmit(){
document.getElementById("myForm").submit();
}
which then submits this form:
<form id="myForm" action="action.php" method="post">
My question is: how do I send a variable to the form from the onClick to get something like <form id="myForm" action="action.php?id=**(the variable sent from the onclick goes here)**" method="post">
Thanks!
Easiest way: append a hidden field to the form.
<form id="myForm" action="action.php" method="post">
<input type='hidden' id= 'hiddenField' name='id' value='' />
<script>
function mySubmit() {
document.getElementById('hiddenField').value = "Whatever I want here";
document.getElementById("myForm").submit();
}
</script>
Or use a function like
function addHiddenField(form, props) {
Object.keys(props).forEach(fieldName => {
var field = form[fieldName];
if (!field) {
field = document.createElement('input');
field.type = 'hidden';
field.name = fieldName;
form.appendChild(field);
}
field.value = props[fieldName];
});
}
document.querySelector('form').addEventListener('submit', () => {
addHiddenField(this, {
someQueryName: 'someQueryValue',
otherQueryName: 'otherVal'
});
});
<form>
Name
<input name=name />
<input type=submit />
</form>
Note that you can use DevTools to modify the iframe's sandbox to allow it to submit forms and you can verify the posted URL. sandbox="... allow-forms"
place a input type hidden inside the form then submit the form
<input id="id" name="id" type="hidden" />
set the value of the hidden field in your javascript submit()
document.getElementById('id').value = **;
but by setting form method="post" the id will not be the part of query string, i.e. the url will remain action.php
instead
if you really want the id in query string i.e. url action.php?id=** then you need to change the form method="get", by this the hidden field id will automatically be the part of the url i.e action.php?id=**
read about difference between get and post
here is how you access posted value on next page if you really need to use method="post" action="action.php"
Your HTML :
<form id="myForm" action="#" method="post">
<input type='hidden' id="id" name='id' value='123' />
<input type='submit' name='submit' value='Click me !' onclick='addParam()' />
</form>
Your Script :
function addParam() {
var url = "action.php?id=" + document.getElementById('id').value;
document.getElementById("myForm").setAttribute('action', url);
}
Thank You.