|
JavaScript - Replace Form Submit Button Onsubmit
I am wondering if it is possible for me to replace my form submit button with an animated gif (fake progress bar), after the button has been pressed.
Having so far disabled the button onclick, I would instead be happy if I could simply change the button text from 'Click here to submit' to 'Processing...' I have done some searches here but I'm finding references to innerHTML, etc., and I'm getting lost now. Is this an easy thing to do? TIA Similar TutorialsHow exactly would you validate a form with JavaScript if instead of using the regular input type="submit" to allow submission you used input type="image"?
Is there a way so that I can move the submit button outside of the form tags? and if this is possible, can you make it with multiple text boxes, each with their corresponding submit button? heres the coding Code: <html>
<head>
<script type="text/javascript">
<!--
function gotoURL() {
var newURL = document.url2go.go.value
document.location.href=newURL
}
//-->
</script>
</head>
<body>
<form action="javaScript:gotoURL()" method="get" name="url2go">
<input type="text" name="go" value="http://" size="50">
<INPUT TYPE="image" SRC="" id="go" HEIGHT="150" WIDTH="150" BORDER="0" ALT="Submit Form">
</form>
</body>
</html>
Hi, i'm sabrina from Asia. i'm new here and a new student in javascript. My english language is not fluent.i'm really sorry about that. i really need help in my assignment. i've already create a form that will pop up an alert message if there is an empty input. it went great. but after i edit <form onSubmit="return formValidator()"> to <form onSubmit="return formValidator()" action="html_form_submit.asp" method="get"> i don't know why my submit button cannot send this form to html_form_action.asp. Please help me.. below is the code that i've done so far..thank you. <html><head> <title>Kelab ICT OUM</title> </head> <body> <script type="text/javascript"> function formValidator(){ var nama=document.getElementById("nama"); var umur=document.getElementById("umur"); var tarikh=document.getElementById("tarikh"); var poskod=document.getElementById("poskod"); var email=document.getElementById("email"); var alamat=document.getElementById("alamat"); var negeri=document.getElementById("negeri"); if(isAlphanumeric(nama,"Sila isi nama anda")){ if(isNumeric(tarikh,"Sila isi tarikh lahir")){ if(isNumeric(umur,"Sila isi umur")){ if(isNumeric(poskod,"Sila isi poskod")){ if(emailValidator(email,"Sila isi email anda")){ if(lengthRestriction(alamat,"Sila masukkan alamat anda")){ if(madeSelection(negeri,"Sila pilih Negeri")){ return true; } } } } } } } return false; } function notEmpty(elem, helperMsg){ if(elem.value.length=0) { alert(helperMsg); alem.focus(); return false; } return true; } function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)) { return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphanumeric(elem, helperMsg){ var alphaExp=/^[0-9a-zA-Z]+$/; if(elem.value.match(alphaExp)) { return true; }else{ alert(helperMsg); elem.focus(); return false; } } function emailValidator(elem, helperMsg){ var emailExp=/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zAz0-9]{2,4}$/; if(elem.value.match(emailExp)) { return true; }else{ alert(helperMsg); elem.focus(); return false; } } function lengthRestriction(elem,helperMsg){ var uInput=elem.value; if(uInput.length>15) { return true; } else{ alert(helperMsg); elem.focus(); return false; } } function madeSelection(elem, helperMsg){ if(elem.value == "Pilih") { alert(helperMsg); elem.focus(); return false; } else{ return true; } } </script> <form onSubmit="return formValidator()" action="html_form_submit.asp" method="get"> <table border="1" cellpadding="10" width="300"> <tr> <td colspan="3"><h1>Kelab iCT OUM</h1></td> </tr> <tr> <td>Nama</td> <td colspan="3"><input type="text" size="80" id="nama"</td> </tr> <tr> <td>Jantina</td> <td><input type= "radio" Name="Jantina" id="Jantina" value="p">Perempuan <br><input type= "radio" Name="Jantina" id="Jantina" value="l">Lelaki</td> <td>Umur <input type="text" size="10" id="umur"> Tahun <br><br> Tarikh Lahir <input type="text" size="10" id="tarikh"> </tr> <tr> <td>Alamat</td> <td><textarea name= "comments" rows="6" cols="20" wrap="virtual" id="alamat"> </textarea></td> <td>Poskod <input type="text" size="10" id="poskod"> <br><br>Negeri <select name= "negeri" id = "negeri"> <option value="Pilih" selected="select">Pilih</option> <option value="Perlis">Perlis</option> <option value="Kedah">Kedah</option> <option value="Perak">Perak</option> <option value="Selangor">Selangor</option> <option value="Negeri Sembilan">Negeri Sembilan</option> <option value="Melaka">Melaka</option> <option value="Kelantan">Kelantan</option> <option value="Pahang">Pahang</option> <option value="Terengganu">Terengganu</option> <option value="Johor">Johor</option> <option value="Wilayah Persekutuan">Wilayah Persekutuan</option> <option value="Sabah">Sabah</option> <option value="Sarawak">Sarawak</option> </select> <br><br>Email <input type="text" size="10" id="email"></td> </tr> </table><br> <input type="submit" value="Submit"> <input type= reset value ="Reset"> </form> </body> </html> Friends, I want a simple contact form of 3 fields on my website which emails data on my email address or write a file on my server or just other any way inform me that data. But I dont want that "submit" button redirects to other 'thankyou' page where code is located. Plzzzzzzzz suggest or tell me what I have to do?? Hello, I have two frames, one to the left, one to the right. The left one contains a form, which I'm using to take in user input, and at the same time to refresh the frame on the right. The left frame's code is: Code: <html>
<head>
<script type="text/javascript">
function reload_right_frame()
{
parent.right_frame.location.reload();
}
</script>
</head>
<form method="post">
<input type="submit" value="Enter" onClick="reload_right_frame();">
<input type='text' name='userinput'>
</form>
<?php
echo "You entered: " . $_POST['userinput'];
?>
</html>
This succeeds in spewing out what the user entered, and simultaneously refreshing the right-hand frame. However, I want there to be a delay in refreshing the right-hand frame, so I changed the left-frame coding as follows: Code:
<html>
<head>
<script type="text/javascript">
function delayed_reload()
{
var t=setTimeout("reloadframe()",3000);
}
function reload_right_frame()
{
parent.right_frame.location.reload();
}
</script>
</head>
<form method="post">
<input type="submit" value="Enter" onClick="delayed_reload();">
<input type='text' name='userinput'>
</form>
<?php
echo "You entered: " . $_POST['userinput'];
?>
</html>
This is where it stops working. The right-hand frame is not reloaded at all. I want it to reload after 3 seconds. The user input text is spewed out, though. If I change the input type from "submit" to "button", however, the delayed reload of the right-hand frame works fine, but then the user input text fails to show. How can I make both form and delayed reload both work? I'm probably missing something obvious. Thanks in advance for any help! Here is the code for test.html: Code: <html>
<head><title></title></head>
<body>
<script type="text/javascript">
function OnSubmitForm(){
document.myform.action ="insert.html";
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm()" method="get">
<input type='radio' name='Search' value='test'>test</input>
</form>
<a href='javascript:document.myform.submit()'><img src='images/buttonnext.jpg'></a>
</body>
</html>
The way I want it to work: when the img (buttonnext.jpg) is clicked, the form is submitted. When the form is submitted it runs the javascript, which sets the action to be that insert.html is loaded. i.e. the end result should be to redirect to insert.html?Search=test The way that it is working now: the page is redirected to test.html?Search=test Note: If I use a submit button that is part of the form (i.e. input field with type "submit") the page is redirected correctly. What do I need to change to accomplish my goal? Hello all, I have 2 radio buttons update bsc value update mnr value when user selects update mnr value, two more radio buttons should appear. I have mnr value I do not have mnr value. On selecing I do not have mnr value im submitting the form and enabling the user to select values from dropdown. ( not shown in the code as it is a coldfusion code.). On submit I am not able to still keep the 'but2', and 'my_select3' elements disabled. Please advice. I have been working on this since quite sometime. <script language="JavaScript"> function makeChoice() { var obj1 = document.getElementById('box1') var obj2 = document.getElementById('box2') if (document.getElementById('but1').checked) { obj2.setAttribute('readOnly','readonly'); obj1.removeAttribute('readOnly'); document.getElementById('but1').disabled=true; document.getElementById('but2').disabled=true; } else if (document.getElementById('but2').checked) { obj1.setAttribute('readOnly','readonly'); obj2.removeAttribute('readOnly'); document.getElementById('but2').disabled=true; document.getElementById('but1').disabled=true; } } </script> <script type="text/javascript"> function showSelect() { if (document.getElementById('but2').checked) { document.getElementById('but2').disabled=true; } } </script> <script type="text/javascript"> function showSelect1() { if (document.getElementById('but2').checked) { document.myform.submit(); document.getElementById('but2').disabled=true document.getElementById('my_select3').disabled=true } } </script> <td><input type="radio" id="but1" name="vals" onclick="makeChoice()"></td> <td>Update BSC Value </td> <tr> <td><input type="radio" id="but2" name="vals" onclick="makeChoice();showSelect();" ></td> <td>Update MNR Value </td> <td> <input id="my_select1" class="show" type="radio" name="my_select1" onclick="this.myform['my_select1'].disabled=true"></td> <td> I have a Position Number </td> <td><input id="my_select3" class="show" type="radio" name="my_select3" onclick="showSelect1();"></td> <td> I do not have a Position Number </td> Hello all I created a form which has a lot of textboxes, checkboxes and select-lists which are getting filled up by the records from a database table. I am basically creating an edit screen for a record. No I want to check all these input elements using javascript validation. I want this to performed when a button "Archive" is pressed. My problem is this "Archive button" needs to be a submit button. This does run the javascript validation but after completing the validation it submits the form. I want that submission should be stopped when the validation is violated. how can I do this? What I want is a button which acts as a default button (triggers the onclick event when I press enter) but submits only if the form is valid. I'm a newbie to scripting who needs help. The situation is as follows: I'm running Joomla 1.5.23 and I've been trying to get validation on a component's form fields. In the header section, I'm properly loading the validator.js file, which contains the following: Code: //function to check empty fields
function isEmpty(strfield1, strfield2) {
strfield1 = document.forms[0].firstname.value
strfield2 = document.forms[0].lastname.value
//firstname field
if (strfield1 == "" || strfield1 == null || !isNaN(strfield1) || strfield1.charAt(0) == ' ')
{
alert("\"firstname\" is a mandatory field.\nPlease amend and retry.")
return false;
}
//lastname field
if (strfield2 == "" || strfield2 == null || strfield2.charAt(0) == ' ')
{
alert("\"lastname" is a mandatory field.\nPlease amend and retry.")
return false;
}
}
return true;
}
//function to check valid email address
function isValidEmail(strEmail){
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = document.forms[0].email.value;
// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease amend and retry');
return false;
}
return true;
}
//function that performs all functions, defined in the onsubmit event handler
function check(form)){
if (isEmpty(form.firstname)){
if (isEmpty(form.lastname)){
if (isValidEmail(form.email)){
return true;
}
}
}
return false;
}
I'm invoking this in this way: Code: <form action="index.php?option=com_pbbooking&task=save" method="POST" onsubmit="return check(this);"> My problem is that even if all fields are empty it will go to the next step. Thanks in advance, twdk01. I am trying to create a form that writes text to an HTML canvas when submitted. Eventually, the function that writes the text will be more complex. The problem is the text only appears briefly, because the function is only called once when the form is submitted. I want the function to be called continuously after the form is submitted. How do I do this? I have had very little experience with JS. A lame (failed) attempt... Code: <html>
<head>
</head>
<body>
<canvas id="canvas" width="790" height="605">
Sorry, your browser doesn't support HTML5
</canvas>
<form name="frm1" action=" " onsubmit="greeting()">
<input type="text" name="fname" />
</form>
</body>
<script type="text/javascript">
function init() {
//use canvas "canvas" and assign to variable canvas
canvas=document.getElementById("canvas");
c=canvas.getContext("2d");
}
function greeting()
{
c.fillText("var!!!", 100, 460);
var test = 1;
}
if (test == 1)
{
greeting();
}
init();
</script>
</html>
Thanks I want have an alert pop up if the email is invalid and have the form not post. I have tried countless ways but cannot figure it out. No matter what I do, it always posts. Thanks in advance for the help. Code: <html>
<head>
<script language = "Javascript">
function echeck(str) {
var at = "@"
var dot = "."
var lat = str.indexOf(at)
var lstr = str.length
var ldot = str.indexOf(dot)
if(str.indexOf(at) == -1) {
alert("Invalid E-mail ID")
return false
}
if(str.indexOf(at) == -1 || str.indexOf(at) == 0 || str.indexOf(at) == lstr) {
alert("Invalid E-mail ID")
return false
}
if(str.indexOf(dot) == -1 || str.indexOf(dot) == 0 || str.indexOf(dot) == lstr) {
alert("Invalid E-mail ID")
return false
}
if(str.indexOf(at, (lat + 1)) != -1) {
alert("Invalid E-mail ID")
return false
}
if(str.substring(lat - 1, lat) == dot || str.substring(lat + 1, lat + 2) == dot) {
alert("Invalid E-mail ID")
return false
}
if(str.indexOf(dot, (lat + 2)) == -1) {
alert("Invalid E-mail ID")
return false
}
if(str.indexOf(" ") != -1) {
alert("Invalid E-mail ID")
return false
}
return true
}
function ValidateForm() {
Var emailID = document.frmSample.txtEmail
if((emailID.value == null) || (emailID.value == "")) {
alert("Please Enter your Email ID")
emailID.focus()
return false
}
if(echeck(emailID.value) == false) {
emailID.value = ""
emailID.focus()
return false
}
return true
}
</script>
<form name = "frmSample" action = "https://www.pipelinedeals.com/web_lead" onsubmit = "return validateForm();" method = "post">
<input type = "hidden" name = "w2lid" value = "removed for privacy" />
<input type = "hidden" name = "thank_you_page" value = "http://www.fatsfixedassettracking.com/thanks.html"/>
<p>Enter email address:
<input type = "text" name = "txtEmail">
</p>
<p><input type = "submit" name = "Submit" value = "Submit"></p>
</form>
</head>
</html>
If my php variable, (which is retrieved from a mysql table in the php code, not shown) is equal to "1", that means the member is not eligible to submit the form, so I want an alert() to say "member not eligible!". Else, I want it to continue to submit the form. Here is my code (which I can't seem to get to work): <head> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function ismaxlength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" if (obj.getAttribute && obj.value.length>mlength) obj.value=obj.value.substring(0,mlength) } //this first script is for something else, to check the max length of characters in a text area </script> //here is the script in question <script type="text/javascript"> <!-- var mem_eligible = "<?= $is_mem_eligible ?>"; if (mem_eligible == "1") { function MoveOn() { alert('You are not yet eligible, please try again tomorrow!'); } } --> </script> </head> <form name="myform" action="postform.php" method="post" enctype="multipart/form-data"> <div> <input type="submit" name="Submit2" value="Submit Entries" onclick="MoveOn()"/> </div> </form> Please help, thanks! June I have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? Hi guys im trying to give users a warning message with javascript when the submit my login form without inserting any new data. But I can't seem to find out how to stop the form from going to the login.php here is my code. Code: <form name="te" onsubmit='login();' action='login.php' method='post'>
<input name='username' maxlength='14' value='Username' type='text' />
<input name='password' maxlength='20' value='Password' type='password' />
<input type="submit" name="login" value="Login" />
</form>
javascript: Code: <script type="text/javascript">
function login() {
var username = document.te.username.value;
var password = document.te.password.value;
if (username == 'Username' || username == '') {
alert('empty username!');
return false;
}
else {
if (password == 'Password' || password == '') {
alert('empty pass');
return false;
}
}
return true;
}
</script>
Hi all, Please keep in mind: this is the first code I have ever written -- much of it with help from this forum and the skeleton from other corners of the JS community. Thanks! But now for the problem... I'm developing am income tax calculator, and everything is going swell. Currently the user can type in their adjusted gross income (AGI), hit submit, and learn the amount of income tax they would pay, their tax rate, and their income after tax. I've played around with the events to get the submit button to work in FF, IE, Chrome and Safari -- and I've gotten the enter button to work before with some stock code, but here's the catch: when the user presses enter, i want the focus to leave the input box. I don't care where it goes (submit button, I suppose?) but i need it to leave the input field so the onfocus="clearText(this);" event can fire when they return to type in a new income. Any ideas? Thanks in advance. Code: <script language="javascript" type="text/javascript">
function TotalGrossPerYear() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
if ((Calc.AGI.value > 500000)) {
Bracket3();
}
if ((Calc.AGI.value > 200000 ) && (Calc.AGI.value <= 500000)) {
Bracket1();
}
if ((Calc.AGI.value <= 200000)) {
Bracket2();
}
}
else
if (Calc.InputRad[1].checked) {
if ((Calc.AGI.value > 1000000)) {
Bracket3();
}
if ((Calc.AGI.value > 400000 ) && (Calc.AGI.value <= 1000000)) {
Bracket1();
}
if ((Calc.AGI.value <= 400000)) {
Bracket2();
}
}
}
function Bracket1() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * .05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Bracket2() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = 0 ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = 0 ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Bracket3() {
var Calc = document.NetIncome;
if (Calc.InputRad[0].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 300000) * 0.09) + (300000 * 0.05) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
else {
if (Calc.InputRad[1].checked) {
Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 600000) * .09) + (600000 * 0.05) ;
Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
}
}
}
function Couple() {
var Calc = document.NetIncome;
Calc.AGI.value = "";
Calc.TaxableIncome.value = "--------";
Calc.AmtDue.value = "--------";
Calc.AmtLeft.value = "--------";
Calc.TaxRate.value = "--------";
}
function Individual() {
var Calc = document.NetIncome;
Calc.AGI.value = "";
Calc.TaxableIncome.value = "--------";
Calc.AmtDue.value = "--------";
Calc.AmtLeft.value = "--------";
Calc.TaxRate.value = "--------";
}
function clearText(thefield){
if (thefield.value==thefield.value)
thefield.value = ""
}
</script>
</head>
and the html... Code: <body> <form name=NetIncome> <table border=5> <th align=left> <ol> <li>Select Individual or Joint filing status. <li>Enter your Adjusted Gross Income. <li>Submit to calculate. <li>Please reset after each calculation. </ol> </th> <tr> <td><font size=5><input type=radio name=InputRad value=PerHour onclick="Individual()"><u>Individual</u> <input type=radio name=InputRad value=PerYear onclick="Couple()"><u>Joint</u></font></td> </tr> <tr><td><input type=text name=AGI size=30 id="txtExamplethree" onfocus="clearText(this);" onsubmit="TotalGrossPerYear();" onblur="this.value=this.value.replace(/[^\d\.]/g, '');" value="Select filing status" maxlength="20" />Adjusted Gross Income </td></tr> <tr><td><input type=text name=TaxableIncome id="txtExampletwo" readonly="readonly" size=30 value="">Taxable Income</td></tr> <tr><td><input type=text name=AmtDue id="txtExampleone" size=30 readonly="readonly" value="">Amount Due in Taxes</font></td></tr> <tr><td><input type=text name=AmtLeft id="txtExample" size=30 readoanly="readonly" value="">Income after Tax</font></td></tr> <tr><td><input type=text name=TaxRate size=10 readonly="readonly">Tax Rate</td></tr> <tr><td align=center><input type="button" value="Submit" onfocus="TotalGrossPerYear(); formatNumber(); formatNumberone(); formatNumbertwo(); formatNumberthree();" /><input type=reset value="Reset Form"></td></tr> </table> </form> I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input. I would welcome any help. I just can not seem to get it to work. Code: <script language="javascript" type="text/javascript">
function checkQuantity(frm) {
var succesful = false;
var numQuantity;
numQuantity = parseInt(frm.Quantity.value);
var numTotalPrice;
if (numQuantity != 0) {
numTotalPrice = numQuantity * 4;
frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
successful = true;
}
else {
alert("Sorry must order more than 0");
successful = false;
}
return succesful;
}
</script>
Code: <form action="" onsubmit="return checkQuantity(this)" style="width: 193px">
<table cellpadding="4" style="width:111%">
<tr>
<td class="style1">
Quanity:</td>
<td class="formInputCell">
<input name="Quantity" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style1">
Total Price $
</td>
<td class="formInputCell">
<input name="TotalPrice" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style2"></td>
<td><input id="Submit1" type="submit"
value="Buy Now" class="buttonstyle" /></td>
</tr>
</table>
</form>
Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks Whenever I click the Submit button, which should create a new window showing all the details entered in the form, it doesn't work ideas? javascript.html Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<!-- The external style sheets -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/javascript" src="myjavascript.js"></script>
<meta name="keywords" content="CO332">
<meta name="description" content="CO332 Exercise Website">
<meta name="author" content="Bradley Berwick">
</head>
<body>
<div id="container">
<div id="maincontent">
<div id="header">
<h1>
Exercise Website
</h1>
</div>
<div id="leftnav">
<ul>
<li><a href="index.html" >Home</a>
<li><a href="myjavascript.html" ><span class="currentpage">Services</span></a>
<li><a href="#" >TBA</a>
<li><a href="#" >TBA</a>
</ul>
</div>
<div id="content">
<h2>About Yourself</h2>
<form name="exampleform">
<h3>Name: <input name="yourname" type="text"></h3>
<h3>Age: <input name="age" type="text" size="3"
Onchange = '
if ( !( this.value > 0 && this.value < 150 ) ) {
alert( this.value + " is not a valid age.");
this.value=""; // clear age text box
}' > </h3>
<h3>Gender:
<input name="gender" type="radio" value="male"> Male
<input name="gender" type="radio" value="female"> Female
</h3>
<h3>Your favourite colour:
<select name="colours">
<option value="None">
<option value="red">Red
<option value="green">Green
<option value="blue">Blue
<option value="pink">Pink
<option value="orange">Orange
<option value="purple">Purple
</select>
</h3>
<h3>Your hobbies a <br>
<input name="running" type="checkbox"> Running <br>
<input name="football" type="checkbox"> Football <br>
<input name="golf" type="checkbox"> Golf <br>
<input name="cycling" type="checkbox"> Cycling
</h3>
<textarea rows="10" cols="30">
Add comments.
</textarea>
<p>
<input type="reset" value="Clear">
<input name="submit" type="button" value="Submit"
onclick='submitForm()';>
</p>
</form>
</div>
</div>
<div id="footer">
<div id="mailto"> Last updated on 28th Oct 2011<br>
Maintained by Bradley Berwick
</div>
</div>
</div>
</body>
</html>
myjavascript.js Code: function displayMessage(msg) {
// Open a new window
var msgWindow = window.open('', 'Message');
// Write message in the new Window
msgWindow.document.write(msg);
msgWindow.document.close();
// Raise this window, in case it's not visible
msgWindow.focus();
}
var hobstring="";
function submitForm() {
var nam=document.exampleform.elements["yourname"].value;
var age=document.exampleform.elements["age"].value;
var gend = document.getElementsByName('gender');
for (var i = 0; i < gend.length; i++) {
if (gend[i].checked==true) {
var sex=gend[i].value;
}
}
var sel=document.getElementById('color');
var color=sel.options[sel.selectedIndex].value;
var hobbs = document.getElementsByName('hobby');
for (var a = 0; a < hobbs.length; a++) {
if (hobbs[a].checked==true) {
hobstring+=hobbs[a].id+", ";
}
}
var msg="Name: "+nam+"<br>Age: "+age+"<br>Gender: "+sex+"<br>Favorite color: "+color+"<br>Hobbies: "+hobstring;
displayMessage(msg);
}
I am looking for some help similar to this old post: http://www.codingforums.com/showthread.php?t=19588 I want my radio buttons to become submit buttons as well. So when a user clicks on a radio button it submits the action and refreshes the page accordingly. As of now using only using onclick="this.form.submit()" the page only refreshes with no change. Here is a copy of the entire form. It is a custom shipping options form (I did not create it). Any help would be appreciated. Code: <!-- Custom shipping form -->
<form action="" method="post" name="update_shipping">
<table width="300">
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"1"))) {echo "checked=\"checked\"";} ?> name="grpshipping" type="radio" id="grpshipping_0" value="1" checked="checked" onclick="this.form.submit()"/>
Ground Shipping</label></td>
<td class="style261"><?php echo date("m/d/Y",$grounddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Ground'] + ($row_rsshippingpricesover21['Ground'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Ground'],2);
} ?></td>
</tr>
<?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") == 0) {//show other shipping options ONLY if a ground shipping only item is not in the cart ?>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="2" id="grpshipping_1" onclick="this.form.submit()" />
Fedex 3 Day</label></td>
<td class="style261"><?php echo date("m/d/Y",$fedex3delivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Fedex3'] + ($row_rsshippingpricesover21['Fedex3'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Fedex3'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="3" id="grpshipping_2" onclick="this.form.submit()"/>
Fedex 2 Day</label></td>
<td class="style261"><?php echo date("m/d/Y",$fedex2delivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Fedex2'] + ($row_rsshippingpricesover21['Fedex2'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Fedex2'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"4"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="4" id="grpshipping_3" onclick="this.form.submit()"/>
Next Day PM</label></td>
<td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['ONPM'] + ($row_rsshippingpricesover21['ONPM'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['ONPM'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"5"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="5" id="grpshipping_4" onclick="this.form.submit()"/>
Next Day AM</label></td>
<td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['ONAM'] + ($row_rsshippingpricesover21['ONAM'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['ONAM'],2);
} ?></td>
</tr>
</table>
<table class="eC_ButtonWrapper" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><center>Choose an option above and click update to change your shipping preference.<br /><b>PLEASE BE SURE AND PRESS UPDATE IF YOU CHANGE YOUR SHIPPING OPTION<br /><br /><input type="image" name="Update_shipping" id="Update_shipping" value="Update_shipping" alt="Update_shipping" src="WA_eCart/Images/Nautica/Btn4_EN_update.gif" class="eC_ImageButton" /></center></td>
</tr>
</table>
<?php } //end of show if ground ship item is not in the cart?>
<?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") <> 0) { ?>
<font color="red">The cart contains a Ground Shipping only item, this order can only be shipped ground</font><br /><br />
<?php } ?>
</form>
<!-- End of Custom shipping form -->
|
|||||||