I am trying to validate this form before it is submitted to the order form page using 'onsubmit' event, but it's not working. Not sure what I'm doing wrong. Also, how do I submit the product(s) selected with price and product ID on to an order form page? I need to use form controls to allow the user to put in personal and billing info (name, address, etc.) Any help with this would be appreciated.
Here's my code I'm trying to validate with 'onsubmit':
<!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>Javascript - Shopping Cart</title>
<script type="text/javascript" charset="utf-8">
function checkCheckBoxes( ) {
if (document.frmTest.product1.checked == false &&
document.frmTest.product2.checked == false &&
document.frmTest.product3.checked == false &&
document.frmTest.product4.checked == false)
{
alert ('You must select a product to continue.');
return false;
}
else
{
return true;
}
}
</script>
</head>
<body>
<h1>Shopping Cart - Product Page</h1>
<form name="product" method="post" action="" onsubmit="return checkCheckBoxes( );" >
<div id="product1">
<p id="title1"><b>Desktop Computer</b></p>
<img src="images/desktop.jpg" alt="desktop" width="100"/>
<p>The latest in desktop computing.</p>
<p><input type="checkbox" name="product1" id="001">Price $599.99</p>
</div>
<div id="product2">
<p id="title2"><b>Monitor</b></p>
<img src="images/monitor.jpg" alt="monitor" width="100"/>
<p>21 inch monitor</p>
<p><input type=checkbox name="product2" id="002">Price $159.99</p>
</div>
<div id="product3">
<p id="title3"><b>Keyboard</b></p>
<img src="images/keyboard.jpg" alt="keyboard" width="100"/>
<p>USB Keyboard</p>
<p><input type=checkbox name="product3" id="003">Price $39.99</p>
</div>
<div id="product4">
<p id="title4"><b>Mouse</b></p>
<img src="images/mouse.jpg" alt="mouse" width="100" />
<p>USB Keyboard</p>
<p><input type=checkbox name="product4" id="004">Price $25.99</p>
</p>
</div>
<br />
<input type="submit" value="Submit" name="submit" onClick="cart()";/><input , type="reset" value="Reset" name="reset">
</form>
</body>
</html>
Try changing your if statement to use getElementById. I ran your code, but instead used the if statement:
if ( (document.getElementById("001").checked == false) &&
(document.getElementById("002").checked == false) &&
(document.getElementById("003").checked == false) &&
(document.getElementById("004").checked == false))
and it worked.
Change
<form name="product"
to
<form name="frmTest"
If you install a debugger like Firebug, you can call
checkCheckBoxes( );
manually in the console (without submitting the form), so that you can see the error messages generated by the function, which in this case is
TypeError: document.frmTest is undefined
Since the name of the form is "product", "document.frmTest..." should probably be called "document.product..." instead.
Related
i'm testing a HTML using a to check what a servlet returned,
to choose which message i'll show. The app runs ok, the servlet returns correctly. The get what the servlet returned and chooses the message. But, the tag shows the message only for a second (like a flash) and erase shortly thereafter. Below you can see my code:
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<title> loginServlet2 </title>
<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
<link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>
<script>
function oMsg()
{
var wMsg1 = document.getElementById('wMsg').innerHTML;
if (wMsg1 == "Test OK!")
{
document.getElementById('wMsga').innerHTML="Test is OK";
}
else
{
document.getElementById('wMsga').innerHTML="Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="text" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<p id="wMsg"> Msg1 : <%=request.getAttribute("wMsg")%></p>
<p id="wMsga"> Msg2 : </p>
</body>
</html>
Could you help me, please? Thanks.
I'm not sure if I'm answering what you are looking for, but adding return false to onclick will keep you on the same page:
<input type="submit" value="Submit" name="B1" onclick="oMsg(); return false;">
My first post here #stackoverflow. Please bear with me.
Look at the code below. I want the javascript to post to an PHP (applybeta.php) document IF there is a '#' in the field with the name & id 'epost'. If there isn't a '#' in the field, a messagebox will pop up telling the user they entered an invalid e-mail address.
If you don't enter a '#' the message box shows up. But if you do enter a valid email it doesn't post to "applybeta.php", nothing happens at all. Anybody got an idea why? Sorry if the description is vague, hopefully you'll figure out what I mean :)
The e-post field got both an id and a name because I tried with both, none of them works.
<!DOCTYPE html>
<html>
<head>
<title>Binärklocka</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
<link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
<!-- table font --> <link href='http://fonts.googleapis.com/css?family=Lato:900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
}
else {
document.getElementById("minForm");
//z.submit();
//alert("hej");
}
}
</script>
<div id="wrap">
<div id="main">
<br>
<br>
<table id="nav">
<tr>
<td>Store</td>
<td>Our Products</td>
<td><img src="home.png" alt="hem" width="60" height="60"/></td>
<td>About Us</td>
<td>Contact</td>
</tr>
</table>
<hr id="linje1" />
</div>
</div>
<p id="binaryclock" onclick="showLink()">
We are looking for beta testers for our newly created clock!<br />
To participate, fill in the forms below with your real name</br />
and a valid e-mail address and a download link will appear.
</p>
<!-- Form that I want to post -->
<div id="applybeta">
<form action="apply.php" method="post" id="minForm" name="minForm">
<input type="text" placeholder="Full name" name="name" /><br />
<!-- checking this field for '#' -->
<input type="text" placeholder="E-mail" id="email" /><br /><br />
<!-- end of field -->
<input onclick="kollaepost()" type="button" name="submit" value="Send" /><br />
</form>
</div>
<!-- End of the form -->
<div id="dlink">
shdgfghClick here to download
</div>
<div id="bottomtext">
<p># 2015 ClockMasters Elite</p>
</div>
</body>
</html>
Instead of having an input of type button, try submit. Your onclick-function can then serve as a validation function by returning true or false, and thus influence whether the form will be submitted. Something like this:
<input onclick="return kollaepost()" type="submit" name="submit" value="Send" />
and:
<script>
function kollaepost() {
var x = document.getElementById("email");
if(x.value.indexOf('#') === -1) {
alert("You didn't enter a valid E-mail address!");
return false;
}
return true;
}
</script>
Also see this question for a more detailed explanation on this method, in general.
You can submit your form using the .submit() method.
var fromElement = document.getElementById("minForm");
formElement.submit();
For further reference, see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
I am trying to validate a simple form with JavaScript but cannot get the script to validate. When the Submit button is pressed there is no validation being run. If one of the boxes is left blank, the error message does not pop up to notify the user. However I am not seeing anything out of place. I am wondering if it isthe submit button is not working? Can anyone lend a hand?
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert.("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange(); {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="theName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="theAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick></p>
</form>
<span id="results"></span>
</body>
</html>
Your code had SO many typo's. This works.
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LASTNAME: Warner Form Validation</title>
<script type="text/javascript">
function btnSubmit_onclick() {
var myForm = document.formContact;
if(myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("Please complete all of the fields.");
if(myForm.txtName.vale == ""){
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
}
} else{
alert("Thank you for completing the form"+myForm.txtName.value);
}
}
function txtAge_onblur() {
var txtAge = document.formContact.txtAge;
if(isNaN(txtAge.value) == true) {
alert("Please Enter a Valid Age");
txtAge.select();
}
function txtName_onchange() {
window.status = "Hi" + document.form1.txtName.value;
docment.getElementById('greeting').innerHTML = "Hi" + document.frm1.txtName.value;
}
}
</script>
</head>
<body>
<form action="" id="formContact" method="post" onsubmit="return validate();" name="formContact">
<p>Name:<br />
<input type="text" name="txtName"><span class="err" id="nameErr"></span>
</p>
<p>Age:<br />
<input type="text" name="txtAge"><span class="err" id="ageErr"></span>
</p>
<p>
<p>How may we contact you?<br>
<input type="radio" name="contact" value="email">Email<br>
<input type="radio" name="contact" value="no contact">No Contact<br>
</p>
<p><input type="button" value="Submit" name="btnSubmit" onclick="btnSubmit_onclick()"></p>
</form>
<span id="results"></span>
</body>
</html>
However be noted that you haven't used txtAge_onBlur or txtName_onChange functions anywhere. Also I suggest to add a numerical check to age field.
onclick="btnSubmit_onclick></p>
to
onclick="btnSubmit_onclick();"></p>
and
function btnSubmit_onclck() {
to
function btnSubmit_onclick() {
You have onsubmit="return validate();" yet I don't see validate() anywhere in your script.
Then in your script you have btnSubmit_onclck(), yet in your HTML you have onclick="btnSubmit_onclick.
So it's missing an i and in the HTML you are missing the closing ".
You also need to check the missing closing } on txtAge_onblur and btnSubmit_onclick
i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.
Can anyone please help me through this....
I have two input fields in my form . One of which is hidden and I want to show it using a button. Now when i tried to show it using onClick() function its not responding...
can anyone give me code snippet to do so....
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
<input type="button" onClick="show()" name="show" value="show" />
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
plz help
This is because of your <input> declaration:
<input type="button" onClick="show()" name="show" value="show" />
When you call show() JavaScript will attempt to resolve the symbol show first; because you're calling show() from inlined code, the resolution takes place in document, which attempts to resolve the symbol based on the name or id attribute of your input box.
Solutions
Rename the button:
<input type="button" onClick="show()" name="showbutton" value="show" />
Rename the function:
function showPasswordInputBox()
{
// your code here
}
<input type="button" onClick="showPasswordInputBox()" name="show" value="show" />
Don't use in-line code:
function show()
{
// whatever
}
var showButton = document.getElementsByName('show')[0];
showButton.addEventListener('click', show, false);
See also
Don't give event handler the same name as a field!
Javascript Function and Form Name conflict
There is a problem with naming convention of show() function in javascript. Because just change the name to show1(). it'll work
function show1()
{
alert("ok");
}
<input type="button" name="show" value="show" onclick="show1()" />
you can use jquery and write following code: $("#passwd").show()
or you can use addClass('here_css_class') and css code .here_css_class{
display: block
}
try 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
**<button onClick="show()" >Show</button>**
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
You need to use this:
onClick="javascript:show();"
or simply
onClick="show();"
Basically, just add the semi-colon :)