I have the following form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Choose</title>
<script type="javascript/text">
function ischecked(){
var check = document.getElementsByTagName( 'input' );
for( var i = 0; i < check.length; i++ ){
if( check[ i ].type == 'radio' && check[ i ].checked ){
return true;
}
}
return false;
}
</script>
</head>
<body>
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
<h1>Choose</h1>
<p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
<br>
<input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
<br>
<input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
<br>
<input type="submit" name="Submit" value="Go"></p>
</form>
</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>
I wanted to make sure one of the radio buttons have been checked before submitting the form. However, it does not work, and the form is submitted anyways. What am I doing wrong here?
You need to return the result of your function from the inline event handler.
You have to check against the value returned in your validation function directly in the attribute value. That is, in your HTML form declaration
<form method="post" enctype="application/x-www-form-urlencoded" onsubmit="ischecked();">
you should write:
onsubmit="return ischecked();"
instead of:
onsubmit="ischecked();"
Related
I am trying to POST text values to the different python program based on user selection (through radio button). Program works fine with single form action
<form action='/cgi-bin/prog1.py' method='POST'>
...text input1
...text input2
...submit
</form>
but when using radio button text values are not posted to the program.
Here is the code I tried
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="window.open(whichsite(this)); return false; method='POST' ">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Help me !
I think you should change the action attribute value of the form in onsubmit method instead of window.open method, you can try something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
// here change the action value instead of return the site
form.action = sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="whichsite(this); return false;" method="POST">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Or, you can try change the value of action in the change event of radio, hope this can help~~~
On a page with two forms I need a script that will validate only the one that is being submitted.
I have made a simple page that shows the problem
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function validateForm() {
var checks = document.getElementsByName("tjek");
var checksChecked = false;
var i = 0;
while (!checksChecked && i < checks.length) {
if (checks[i].checked) checksChecked = true;
i++;
}
if (!checksChecked) {
alert("Select something!")
return false;
}
}
</script>
</head>
<body>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
</body>
</html>
http://jsbin.com/duqotobi/1/edit
But it doesn't work. Why?
Here goes: live demo: http://jsbin.com/duqotobi/2/edit?html,output.
The code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Demo</title>
<script>
function validateForm(caller) {
var checks = caller.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<checks.length; i++) {
if (checks[i].checked == false) {
alert("Select something.");
return false;
}
else {
caller.submit();
}
}
}
</script>
</head>
<body>
<form name="firstForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
<form name="secondForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
</body>
</html>
If it's not fully self-explanatory, let me know. Do realize however, that it is tricky to give checkboxes the same names, even if it concerns different forms. Only radio inputs belonging to the same group should have the same name. This script is not critical in that aspect, but just so you know.
I rewrote it in my style of JS validation scripting; other styles are possible as well.
I have 3 text boxes (testbox, testbox2, testbox3) that get values from an input field, radio button selection and checkbox/tick. The correct values go into testbox, testbox2, testbox3.
However, I need the total of testbox, testbox2, testbox3 to go into text box 'total' - with the total to change if the users selects different radio buttons or tick/unticks etc..
One more thing I need the total to also be shown in the form, echo, (in addition to going into the text box - which will eventually be hidden).
Thank you.
<head>
<script type="text/javascript">
function checkboxClick() {
var textbox = document.forms[0].testbox3;
textbox.value = (textbox.value == 0) ? '1.00' : '0.00';
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<form action="" method="get">
<input name="form1" type="radio" onclick="document.forms[0].testbox2.value='0.00'; "/>
<input name="form1" type="radio" onclick="document.forms[0].testbox2.value='1.00'; "/>
<input name="" type="checkbox" value="" onclick='checkboxClick()'/>
<input name="testbox" type="text" value"2.00"/>
<input name="testbox2" type="text" value"0.00"/>
<input name="testbox3" type="text" value="0.00"/>
<input name="total" type="text" value=""/>
</form>
<body>
</body>
</html>
How about writing a function to update the total (and being careful to parse the textbox inputs as floats):
function updateTotal() {
var textbox1val = parseFloat(document.forms[0].testbox.value);
var textbox2val = parseFloat(document.forms[0].testbox2.value);
var textbox3val = parseFloat(document.forms[0].testbox3.value);
var total = textbox1val + textbox2val + textbox3val;
document.forms[0].total.value = total;
}
And then calling this function in an onchange attribute?
Hello again everyone
i am working on this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks
ok I have this one i am working on..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.contact_form.contact_first.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h2>**Form**</h2>
<form name="contact_form" method="post" action="javascript" onSubmit="return validate_form();">
<input type=text name="contact_first" size="20"> First Name<BR>
<input type=text name="contact_last" size="20"> Last Name<BR>
<input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
now Can i just copy the function for the other two or how do i do the one for the email?
I've added an example here of how to do it:
http://jsfiddle.net/tomgrohl/JMkAP/
I added an onsubmit handler to the form:
<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">
And added this at the top of the page, a simple validation function:
<script type="text/javascript">
function valForm( form ){
var firstVal, lastVal, emailVal, error = '';
firstVal= form.first.value;
lastVal= form.last.value;
emailVal= form.email.value;
//OR
//firstVal= document.getElementById('first').value;
//lastVal= document.getElementById('last').value;
//emailVal= document.getElementById('email').value;
if( firstVal.length == 0){
error += 'First name is required\n';
}
if( lastVal.length == 0){
error += 'Last name is required\n';
}
if( emailVal.length == 0){
error += 'Email is required\n';
}
if( error ){
alert( error );
return false;
}
return true;
}
</script>
OnSubmit is invoked once for the form.
You can validate all the form fields in one onSubmit function, during one call to that function.
function myOnSubmitHandler(theForm) {
if (theForm.data1.value == "") {
alert("This field is empty.");
return false; // suppress form submission
} else {
return true; // A-OK, form will be submitted
}
}
in HTML:
<form method="POST" ACTION="SomethingOnServer.php"
onSubmit="return myOnSubmitHandler(this);">
I need to have a onsubmit form handler
You said it; <form onsubmit="return myValidate(this);" .... >
myValidate is your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).
might I suggest you use jQuery and jQuery validate to validate your form no need to re-invent the wheel
be sure to check out validator's demo
I am trying to create a form with many groups containing many radio buttons. When the user selects a button, I would like to calculate the sum of each selected radio button value and show this sum to the user.
I have found a plugin for jQuery which will do the calculation, this plugin use the name attribute of the buttons to calculate. For example, it will sum the values of all buttons which have the name sum.
So far, I have tried two ways of setting this up: in the first method, I create a hidden field for each group to hold the sum of the selected values inside it, this hidden field gets the value but the problem is that the total value will not update when a user selects a button. My code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript">
</script>
<script src="calc.js" type="text/javascript">
</script>
<script src="calc_f.js" type="text/javascript">
</script>
<script type="text/javascript">
function DisplayPrice(price){
$('#spn_Price').val(price);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="hidden" id="spn_Price" name="sum" value="">
<br>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">
<br>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">
<br>
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
</form>
</body>
</html>
In this code, the input tag with the name totalSum is where the value will update, but it won't update when changing the buttons.
As I said before, the reason why I use a hidden field is to hold each group's subtotal. It has the name sum, which indicates to the plugin that it should be added to others.
I dont know if this is the right way to do this, i have tried to change the name attribute of the buttons when user click them to sum but that didn`t work either!
Here is plugin address : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
How can I do this ?
Plugin schmugin. Get rid of your onclick and try this:
$("input[type=radio]").click(function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$("#totalSum").val(total);
});
Untitled Document
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var sum=parseInt(val1) + parseInt(val2);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
Choose a number:<br>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159
<br>
<input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259
<br>
</form>
Choose another number:<br>
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345
<br>
<input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87
<br>
</form>
<input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
</body>
The code above will dinamically sum the checked values from both groups.
parseInt will convert to integers. Use parseFloat otherwise.