Form Submission Goes To Javascript - And Stay On Same Page - javascript

Please consider the following non-working HTML document:
<html>
<body>
<form action="" method="GET" onsubmit="return f(this);">
<input type="text" name="bar" value="" />
<input type="button" name="foo" value="foo" />
</form>
</body>
<script type="text/javascript">
function f(x) {
alert(x.bar);
}
</script>
</html>
What I am trying to achieve is that when either (a) the foo button is pressed; or (b) enter is pressed while the text input has focus; then the function f is called with the content of the s text input - and the browser should otherwise stay on the same page after f returns.
How can I achieve this?

You should use a submit input rather than a button input, and to get the text from text input you use the value property and return false to prevent the form from submitting
<html>
<body>
<form action="" method="GET" onsubmit="return f(this);">
<input type="text" name="bar" value="" />
<input type="submit" name="foo" value="foo"/>
</form>
<script type="text/javascript">
function f(x)
{
alert(x.bar.value);
return false;
}
</script>
</body>
</html>
FIDDLE

Just call it with the value instead of the form element?
onsubmit="return f(this.bar.value);"
To prevent the sending of that page, you can return false from f.
But it would be much cleaner to use a proper event handler instead of that onsubmit-attribute. Read more on them here.
<html>
<body>
<form id="inputform" action="" method="GET">
<input type="text" name="bar" value="" />
<input type="button" name="foo" value="foo"/>
</form>
<script type="text/javascript">
function f(x) {
alert(x.bar);
}
var form = document.getElementById("inputform");
form.onsubmit = function(event) {
var x = f(form.bar.value);
if (!x)
event.preventDefault();
};
</script>
</body>
</html>

Related

Can a button change the name of an input text and the action of a form?

My code looks like this :
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
What I'm looking for this :
The input field's name should be "one" if the first button is clicked and "two" if the second button is clicked.
The form's action should be "first" if the first button is clicked and "second" if the second button is clicked.
So, if the user fills in "foo" in the text box and presses the first button, the browser should go to http://www.example.com/one?first=foo. If the user fills in "bar" and presses the second button, the browser should go to http://www.example.com/two?second=bar.
The easiest way to do it, is to use jQuery.
Full code :
<html>
<head>
</head>
<body>
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$('input[type=submit]').on('click', function (e) {
$('input[type=text]').attr('name', $(this).attr('value'));
$('form').attr('action', $(this).attr('formaction'));
});
</script>
</body>
</html>
Note 1 :
You need to make sure your jQuery code is at the bottom of your HTML page, so all of your HTML elements will be loaded when it is executed.
Alternatively, you could also use $( document ).ready() :
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$( document ).ready(function() {
$('input[type=submit]').on('click', function (e) {
$('input[type=text]').attr('name', $(this).attr('value'));
$('form').attr('action', $(this).attr('formaction'));
});
});
</script>
</head>
<body>
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
</body>
</html>
Note 2 :
If you don't like to use jQuery, here's how you do the same thing with "vanilla" JavaScript :
<html>
<head>
</head>
<body>
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
<script>
Array.prototype.slice.call(document.querySelectorAll("input[type=submit]")).forEach(function(btn) {
btn.addEventListener("click", function(e) {
document.querySelector("input[type=text]").setAttribute('name', e.target.value);
e.target.form.action = e.target.getAttribute('formaction');
});
});
</script>
</body>
</html>

Form is submitting even if javascript function return false

Javascript validation is not working! Form is submitting even if function returns false. Where i should make changes? Here is the part of the code i wrote.
<html>
<head>
<script>
function check()
{
temp=document.getElementById("name").value;
if(temp=="")
{
document.getElementById("err").innerHTML="error found";
document.getElementById("name").focus();
return false;
}
}
</script>
</head>
<body>
<form>
<input type="text" id="name">
<div id="err"></div>
<input type="submit" onClick="check()">
</form>
</body>
</html>
I would suggest you to use onSubmit event of form instead of onClick event of button.
You also need to use return with HTML onevent attributes
HTML
<form onSubmit="return check()">
<input type="text" id="name"/>
<div id="err"></div>
<input type="submit" />
</form>
DEMO

How to handle HTML <forms> with javascript

i'm studying javascript but i can't find some clear reference about how getting and treat data out of the HTML forms.
Here an example:
THE FORM:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script></HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" > </FORM>
</BODY>
<HTML>
//HERE JAVASCRIPT Javascript BASIC.js:
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
}
I would like to know what i'm doing wrong, because nothing happen when i click submit. And which is the better solution for handling forms with javascript?? Using "action"? or which of other attributes?
The value of form elements are contained in their value attribute. Try the modified code snippet below.
Note: ("idsearched") should be without quote because it is a variable and not a string.
var idsearched=document.getElementById("id").value;
document.write(idsearched);
You must add an id attribute to the form element.
<INPUT TYPE="TEXT" NAME="id" id="id">
Use this line to manually submit your form
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
do not use document.write use document.getElementById("myID").innerHTML
a full working example like you wanted is that:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script>
</HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" id="id" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" >
</FORM>
<script type="text/javascript">
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
return false;
}
</script>
</BODY>
<HTML>

1 form with 1 input field and 2 buttons; need input name changed depending on which button is used

I need to have a form with a single input field, and two buttons.
The tricky part is I need the input field name changed depending on which button is pressed.
<FORM name="Form1" id="num_colis" method="post">
<INPUT TYPE="text" name="abc OR xyz" value="">
<INPUT type="button" value="Colissimo" onclick="return OnButton1();">
<INPUT type="button" value="CSUIVI" onclick="return OnButton2();">
</FORM>
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "http://www.site1.fr/suivi"
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "http://www.site2.fr/suivi"
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
For this to work, I would need : "INPUT TYPE="text" name="abc" to be used when button1 is pressed, and similarly "INPUT TYPE="text" name="xyz" to be used when button2 is pressed.
I looked everywhere for a solution to no avail, is there a javascript solution or trick to achieve this?
using Pure JavaScript
set id attribute to input
<INPUT TYPE="text" id="textField" value="">
function OnButton1()
{
document.getElementById('textField').name = 'abc';
document.Form1.action = "http://www.site1.fr/suivi"
document.Form1.submit(); // Submit the page
}
function OnButton2()
{
document.getElementById('textField').name = 'xyz';
document.Form1.action = "http://www.site2.fr/suivi"
document.Form1.submit(); // Submit the page
}
You just need to assign an id to the text field and change the name of the id when the function is being run.
Here I have assigned an id to the input which is "myInput" and when you click on the button, the function is changing the name of the field where the id of the field is "myInput".
<FORM name="Form1" id="num_colis" method="post">
<INPUT TYPE="text" id="myInput" name="abc OR xyz" value="">
<INPUT type="button" value="Colissimo" onclick="return OnButton1();">
<INPUT type="button" value="CSUIVI" onclick="return OnButton2();">
</FORM>
<script language="Javascript">
<!--
function OnButton1()
{
document.getElementById('myInput').name='abc';
document.Form1.action = "http://www.site1.fr/suivi"
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.getElementById('myInput').name='xyz';
document.Form1.action = "http://www.site2.fr/suivi"
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
Why don't you use a hidden input field?
<INPUT TYPE="hidden" name="abc_or_xyz" value="">
<INPUT TYPE="text" name="text" value="">
...
function OnButton1()
{
document.Form1.action = "http://www.site1.fr/suivi";
document.Form1.abc_or_xyz.value = "abc";
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "http://www.site2.fr/suivi";
document.Form1.abc_or_xyz.value = "xyz";
document.Form1.submit(); // Submit the page
return true;
}
Server side you check the request attribute abc_or_xyz, which makes it possible to interpret request attribute text differently.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap</title>
<script type="text/javascript">
function abc(){
document.getElementById("name").setAttribute("name", "abc");
}
function xyv(){
document.getElementById("name").setAttribute("name", "xyv");
}
</script>
</head>
<body>
<form name="Form1" id="num_colis" method="post">
<INPUT TYPE="text" id="name" name="abc OR xyz" value="">
<INPUT type="button" id="button1" value="Colissimo" onclick="abc()">
<INPUT type="button" id="button2" value="CSUIVI" onclick="xyv()">
</form>
</body>
</html>
using jquery
<FORM name="Form1" id="num_colis" method="post">
<INPUT TYPE="text" id="name" name="abc OR xyz" value="">
<INPUT type="button" id="button1" value="Colissimo">
<INPUT type="button" id="button2" value="CSUIVI">
</FORM>
<script language="Javascript">
$('#button1').click(function() {
$('#name').attr('name', 'abc');
});
$('#button2').click(function() {
$('#name').attr('name', 'xyz');
});
</script>

HTML form with dynamic action (using JavaScript?)

I want to create a form like this:
Type in your ID number into the form's input and submit.
The form's action becomes something like /account/{id}/.
I was told JavaScript was the only way to achieve this (see here), but how?
Using jQuery it might look something like this:
$('#inputAccount').change(function () {
$('#myForm').attr('action', 'http://www.example.com/account/' + $('#inputAccount').val());
});
This should change the action of the form any time the text in the input element changes. You could also use .blur() instead of .change() to perform the action whenever focus leaves the input element, so it doesn't keep changing all the time, etc. Then, when the form is submitted, it should submit to whatever was last placed in its action attribute.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(frm.txt).keyup(function(){
$(frm).get(0).setAttribute('action', '/account/'+$(frm.txt).val());
});
});
</script>
</head>
<body>
<form id="frm" action="foo">
<input type="text" id="txt" />
<input type="submit" id="sub" value="do eet" />
</form>
You can do something like this in JavaScript. Depending on the checked radio button (in this case,but it could be another form element) it will be chosen an action or the other:
<script type="text/javascript">
function OnSubmitForm()
{
if(document.myform.operation[0].checked == true)
{
document.myform.action ="insert.html";
}
else
if(document.myform.operation[1].checked == true)
{
document.myform.action ="update.html";
}
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm();">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
<input type="radio" name="operation" value="1" checked>insert
<input type="radio" name="operation" value="2">update
<p>
<input type="submit" name="submit" value="save">
</p>
</form>

Categories

Resources