|
JavaScript - Form Clear Button
Hey,
I've created a form whereby there are four bars of different chocolates. Each time the user clicks the button with the name of the chocolate on it, a running total is shown. I would like to make a clear button for this and have wrapped the buttons in <formarea> tags and defined a name, however this is still not what I would like. The code for the buttons are as follows (without showing my attempt of the clear button, as this was a total mess): Code: </script> </head> <body onload="chocPrice()"> <h1>Prices of Chocolate</h1> <br /><br /> <input type="button" id="btnMars" value="Mars" onclick="chocPrice(0)"> <br/> <input type="button" id="btnSnickers" value="Snickers" onclick="chocPrice(1)"> <br/> <input type="button" id="btnBounty" value="Bounty" onclick="chocPrice(2)"> <br/> <input type="button" id="btnYorkie" value="Yorkie" onclick= "chocPrice(3)"> <br/> <input type="text" id="Val" value=""> <br/> <p>Total: </p><p id="Total">0</p> </body> </html> Many Thanks Similar TutorialsI have a search form and added the "Clear All" Button functionality...but it clears the last part of the search form display preferences....how do I only clear the checkboxes at the top of the form only and not at the bottom of the form between the <DIV> tags? I have attached a copy of the JSP page. Hey guys Not sure how to get this done, but i have a webpage that opens up and on that page i have 2 frames (TOP frame, and BOTTOM frame). On the top frame, i have a webpage that loads with a users information and multiple check-boxes checked. On the bottom frame, i want to have a form that contains ONE button (lets say CLEAR) that clears all the information from the form on the TOP frame. Note: I do not have ability to edit the webpage in the TOP frame. The web page is a company website and I am one of the IT people here but not dealing with websites. I was just put in charge of going to over 350 peoples pages and clearing everything on that page manually, so I want to create a script/page that loads the page that i needs, but EITHER clears the form and un-checks all the check-boxes, or a button that i press to do so. Help please Hi there, I was searching for a way to clear the text from my form boxes upon clicking. Well, I was able to find a script for that. However, I also want these boxes to input the original text if a user clicks in and then clicks out without putting any of his own text in. For example, it says: Email Address (onclick = nothing), but if you don't input any data and click out of the box, I want it to say Email Address again. You can see the site at http://officiallymanaged.com/mayhem and if you would like for me to paste the code here, I can. I am no javascript expert, very much a beginner. I am trying to incorporate some into a web-based form. The problem is the button I created to add extra fields does not work, and I can't find exactly where the problem is. I'm in need of some help from a javascript guru. Help me enjoy my Friday afternoon by solving this! The javascript is mostly borrowed and slightly altered, the "additem" I wrote myself so that is probably where the problem lies! Here is the html: Code: <!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></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function showAsset(id,str)
{
if (str=="")
{
document.getElementById("assetinfo"+id).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("assetinfo"+id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getasset.php?q="+str,true);
xmlhttp.send();
}
var noFields = "5";
function additem()
{
var fieldrow = document.createElement('tr');
var fieldcolumn1 = document.createElement('td');
var fieldinput = document.createElement('input');
fieldinput.name = "asset";
fieldinput.onChange = "showAsset("+noFields+",this.value)";
var fieldcolumn2 = document.createElement('td');
fieldcolumn2.id = "assetinfo"+noFields;
fieldcolumn1.appendChild(fieldinput);
var fieldcolumns = fieldcolumn1 + fieldcolumn2;
fieldrow.appendChild(fieldcolumns);
var addbefore = document.getElementById('fieldend');
document.body.insertBefore(fieldrow, addbefore);
noFields = noFields++;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input name="asset" onChange="showAsset(1,this.value)"></td>
<td id="assetinfo1"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(2,this.value)"></td>
<td id="assetinfo2"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(3,this.value)"></td>
<td id="assetinfo3"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(4,this.value)"></td>
<td id="assetinfo4"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(5,this.value)"></td>
<td id="assetinfo5"></td>
</tr>
<tr id="fieldend">
<td><input id="addfield" type="button" value="add item" onClick="addfield()"></td>
</tr>
</table>
</form>
</body>
</html>
Here is the associated getasset.php: Code: <?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', 'root');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("assettracking", $con);
$sql="SELECT * FROM assets WHERE assetID = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<b>".$row['make'] ." ".$row['model'] ." - ".$row['serialnumber']."</b> | Status: ".$row['statusID']." | Comments: ".$row['comments'];
}
mysql_close($con);
?>
I have a button that works fine in every browser EXCEPT IE8, and I can't seem to figure out why, I would assume its a Jvascript issue, here's the code, any help would be great thanks guys... THE button that doesn't work in IE is the one with the value "Proceed to your order" at the bottom, the other two, delete and recalculate work fine.??? Code: <form action="/cart" method="post" id="form">
<table width="100%" cellspacing="0" cellpadding="0" style="margin-top:30px">
<thead class="tableTitle"><tr>
<td width="20"><!--<input type="checkbox" value="" checked="" onclick="checkAll(this)" />--></td>
<td>Title</td>
<td>Quantity</td>
<td>Price</td>
</tr></thead><tbody class="tableBody">
<?foreach ($goods as $k => $v){$randId = randId();?>
<tr>
<td><input type="checkbox" name="deleteCheckbox[]" class="checkboxes" value="<?=$v['id']?>" /></td>
<td width="400"><strong><?=$v['title']?></strong><br />
Color: <select onchange="updateExtras('color', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify color</option>
<?if (count($v['colors'])) foreach ($v['colors'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['colorId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
Size:<select onchange="updateExtras('size', <?=$k?>, this.value)" class="checkMe">
<option value="0">Specify size</option>
<?if (count($v['sizes'])) foreach ($v['sizes'] as $colorK => $colorV){?>
<option value="<?=$colorV['id']?>" <?if ($colorV['id'] == $v['sizeId']){?>selected="selected"<?}?>><?=$colorV['item']?></option>
<?}?>
</select>
<?if ($_SESSION['cartDetails'][$v['id']]['size']){?>
<div style="font-size:0.9em; margin-top:5px"><strong>Size</strong>: <?=$_SESSION['cartDetails'][$v['id']]['size']?></div>
<?}?>
<?if ($_SESSION['cartDetails'][$v['id']]['color']){?>
<strong>Color</strong>: <?=$_SESSION['cartDetails'][$v['id']]['color']?><?}?>
</td>
<td width="100"><input type="text" value="<?=$v['q']?>" size="5" name="ammounts[]" /></td>
<td>$<span id="<?=$randId?>"><?=$v['totalPrice']?></span> CAD<br /><span style="color:#ccc">($<?=$v['price']?> per each)</span></td>
</tr>
<?}?>
<tr class="totalPrice">
<td></td>
<td width="400" style="font-size:1em; font-style:italic">Total price</td>
<td width="100"></td>
<td style="font-size:1em; font-style:italic">$<span id="totalPriceHere"><?=$totalPrice?></span> CAD</td>
</tr>
</tbody>
<tfoot class="tableFoot"><tr><td colspan="4"></td></tr></tfoot>
</table>
<div style="margin-top:10px;">
<input type="submit" value="Delete selected" id="deleteButton" class="button left" />
<a href="/cart/proceed" onclick="
var stop = false;
$('.checkMe').each(function(){
if ($(this).attr('value') == 0) {stop = true}
return
})
if (stop) {
$('#alert').html('Choose colors and sizes for each item to proceed!');
return false
}
return true
"><input type="button" value="Proceed to your order" class="button right" /></a>
<a href="#" onclick="$('#form').attr('action', '/cart/recalc'); $('#form').submit()"><input type="button" value="Recalculate" style="margin-right:10px" class="button right" /></a>
Hello All, I am fairly new to javascript. I need to access a button on a form and perform task using onclick. When I view the source of the page, the id of the button seems to be dynamic with a 'Link' suffix. (ex. xtydLink). How can I access this button if I cannot use getelementbyid because the ID changes? Thanks in advance Good afternoon. I'm trying to make it so a 'radio button' in a 'form' will 'collapse' a Div that I have hidden. I'm using the JavaScript to control the collapse, and google's Jquery for the rest of it. here's the code. Code: <head>
<script type="text/javascript" src="SpryAssets/collapse.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('test', 'fade=1, group=test, speed=400')
animatedcollapse.ontoggle=function($, divobj, state) { //fires each time a DIV is expanded/contracted
//$: Access to Jquery
//divobj: DOM reference to DIV being expanded/collapsed. Use "divobj.id" to get the ID.
//state: "block" or "none", depending on the state.
}
animatedcollapse.init()
</script>
</head>
and the body code... Code: <form action="myform.php" method="post">
<a id="collapsable" href="javascript:animatedcollapse.toggle('test')"> [+]
Testing the Collapsability of this Scripting.</a>
<div id="test" style="display:none;">
<h1> You can see that if you toggle the 'Image Display' Button. This will display Properly.</h1>
</div>
</form>
You can find a completely working version (When not using Radio buttons and forms) located at My Toggle Works Here. Alternatively, you can find the NON working version, which is what I'm attempting to get to work, located at My Toggle Doesn't Work. you can see that in the version that doesn't work, if you hit the 'Radio button', it will collapse, and immediately uncollapse the Div, I don't get why it does this. Any help is greatly appreciated. Hi there, I guess my question is very novice but I have to ask it. I can find lots of "form applications" on internet. But anytime I check them I cannot see any "send" button help. I mean I know that when I click it, it wont send the informations to my e-mail page. Because they don't show where to insert my email address there, in the example. So how can we make a form work for us, how can we arrange it to send the informations to our e-mail address? Do we need to use a php file for it? if yes, how? Regards and Thanks in advance I am writing a script to add an item to card in Applescript. Usually some variant of this works with most shopping sites: do JavaScript "document.getElementById('addToCart').onclick()" in document 1 However, I am lost here. How would I "click" this one? a href="javascript:fnAddItemToCartWithAccessories('1218308267319','2074657')" onclick="s_objectID="javascript:fnAddItemToCartWithAccessories('1218308267319','2074657')_1";return this.s_oc?this.s_oc(e):true"> <img id="addtocart" border="0" alt="Add to Cart" src="http://images.bestbuy.com/BestBuy_US/en_US/images/global/buttons/btn_addtocart_pdp.gif"> http://www.bestbuy.com/site/LG+-+21....&skuId=2074657 Hi I have a form setup so that when you enter something in a text field and click a button it checks to see if the value entered in the text field is the "correct" letter and if its right it changes the CSS property of a div container to be shown which then has a link to a the next question. So I don't really have a submit button because my form isn't setup to work with one. This is fine by me but the only problem is when you enter a letter and click enter it acts as a submit and the submit does nothing, which is what it's suppose to do. So what I'm asking is how can I get that button to respond to an enter instead of the default submit taking over the enter key? 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> I am trying to build a page that has a form on it with three questions, each having two answers via radio button. When the user hits submit, depending on their answers to the three questions, it redirects them to a different page. This is all I have so far and am stuck, I dont know much JS. <script type="text/javascript"> function whereTo () { if ((Goods==true) && (Direct==true) && (SoleSource==true)) { window.location = "http://www.somesite/page1"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (Competed==true)) { window.location = "http://www.somesite/page2"; } if ((Goods==true) && (Indirect==true) && (CostCenter==true) && (SoleSource==true)) { window.location = "http://www.somesite/page3"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (SoleSource==true)) { window.location = "http://www.somesite/page4"; } if ((Goods==true) && (Indirect==true) && (CostCenter==true) && (Competed==true)) { window.location = "http://www.somesite/page5"; } if ((Goods==true) && (Direct==true) && (NetworkID==true) && (Competed==true)) { window.location = "http://www.somesite/page6"; } } </script> The form (it only has the inputs not the questions, i know its not setup properly, just wanted to show the inputs): <form> <input type="radio" id="Goods" name="good" /> Goods<br /><input type="radio" id="Services" name="Services" /> Services <input type="radio" id="Direct" name="good" /> Direct<br /><input type="radio" id="Indirect" name="Indirect" /> Indirect <input type="radio" id="CostCenter" name="CostCenter" /> Cost Center<br /><br /><input type="radio" id="NetworkID" name="NetworkID" /> Network ID <input type="radio" id="SoleSource" name="order" /> Sole Source<br /><input type="radio" id="Competed" name="order" /> Can Be Competed</td> <input alt="Submit" onclick=" return whereTo()" /> </form> 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>
Good morning! Hopefully somebody can help me with this javascript question. (No knowledge of Google Anayltics needed for this.) I'm adding Google Analytics 'Event Tracking' javascript to a typical 'Add to Cart' button. The customer enters desired quantity in the text box and clicks the 'Add to Cart' button to order. I would like to use the Event Tracking javascript to record the button click - plus the Value entered in the text box - as one event. Here's the code for the form (the text box and 'Add to Cart' button code lines are bold): Code: <form method="post" action="http://www.yoursite.com/mm5/merchant.mvc?"> <input type="hidden" name="Screen" value="BASK" /> <input type="hidden" name="Product_Code" value="yourproductcode" /> <input type="hidden" name="Action" value="ADPR" /> <label for="quantity">Quantity:</label> <input type="text" name="quantity" value="0" /> <input type="submit" value="Add To Cart" /> </form> I came up with this javascript for the Event Tracking (to be inserted somewhere above): Code: onClick="_gaq.push(['_trackEvent', 'OrderForms', 'AddToCart', 'yourproductcode', document.getElementByName('quantity').value]);"
I'm wondering where I would enter this javacript code inside the form code to pick up both the button click - plus the quantity? You'll notice that I'm using 'getElementByName' to extract 'quantity' from the text box and record its 'value'. If I enter this javascript on the 'Add to Cart' line - right after "Add to Cart", would 'quantity' still get picked up upon button-click - since it's all on the same form? Or would it be a problem because 'quantity' is contained in a different <input> container? Thanks! Any help is greatly appreciated. IB 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? Hope someone can help. i have this script I found that i think does what i am looking for but i cant seem to get it to work.I think I am just overlooking something. I have a group of radio buttons in a form on a page and i am trying to get the value and image attached to the chosen radio button to pass to another form on another page.here is what i have so far. form 1 page named - giftcards.html Code: <form action="GIFTCERTIFICATES.html" name="giftcardstyle"> <input name="giftcardstocknumber" type="radio" value="BBA - 006"/> <img src="GIFTCARDS/004 BASIC4.jpg" alt="bba-006" style="width: 150px; height: 100px"> form 2 new page named - giftcertificates.html Code: <SCRIPT LANGUAGE="JavaScript" type="text/javascript"><!--
function getParm(string,parm) {
// returns value of parm from string
var startPos = string.indexOf(parm + "=");
if (startPos > -1) {
startPos = startPos + parm.length + 1;
var endPos = string.indexOf("&",startPos);
if (endPos == -1)
endPos = string.length;
return unescape(string.substring(startPos,endPos));
}
return '';
}
var passed = location.search.substring(1);
document.f1.giftcardstocknumber.value = getParm(passed,'giftcardstocknumber');
document.formname.otherfield.value = getParm(passed,'otherfield');
//--></SCRIPT>
<input type="text" name="giftcardstocknumber"/>
<img src="" style="width: 150px; height: 100px"/>
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?? I am a complete JS noob. I have been googling for hours trying to find a way to implement what I think is a simple thing - but alas my deadline is here, and I need to solve this and seek guidance from courteous experts! In a nutshell I have a simple form that has radio buttons: Code: <p><input id="amount" name="amount" type="radio" value="125" />$125</p> <p><input id="amount" name="amount" type="radio" value="75" />$75</p> <p><input id="amount" name="amount" type="radio" value="50" />$50</p> <p><input id="amount" name="amount" type="radio" value="25" />$25</p> <p><input id="amount" name="amount" type="radio" value="other" /><input id="other_amount" name="other_amount" type="text" maxlength="7" style="width:100px;" /> Other ($10 minimum donation)</p> The point of the form is to assign the value to "amount" for sending on to a paypal form. The problem is, I need the value of "amount" to change (be assigned) if they chose "other". To take the value from the text input box "other_amount" and assign it to "amount" but only if they chose the 5th radio button. I have some JS that I hacked together that checks to see if they chose the 5th radio button. attempts to assign the "other amount" to "amount" and then pops up an alert (only so I know the script is pushing the right value - wont be needed when complete.) However, Even though the alert pops up with the proper "other_amount" as if it has been assigned properly, the data is not sent on properly I presume, as it is the only aspect of the paypal donation amount form that is not working or providing the next page with the right "amount" pre-determined. Code: <script type="text/javascript">
<!--
function get_radio_value()
{
if (document.donation.amount[4].checked)
{
document.getElementById('amount').value = document.donation.other_amount.value;
alert(document.getElementById('amount').value);
}
}
//-->
</script>
Help please! Many thanks in advance! Deadline agh! 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 |
|||||||