JavaScript - Getting Check Boxes To Direct Where The Submit Button Goes
I have 3 check boxes and one submit button when the submit button is hit I need it to direct to one of 3 pages depending on which check box is checked.
can anyone help with this Thanks! Similar TutorialsHi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance Hello, I have the following DIV tag Code: <div id = "cbContainer"> </div> The div is initially hidden as the display is set to none. I have one text input in my form. Depending upon the changed text in that textbox, there is a javascript function which creates a list of checkboxes and by using the innerHTML, the above div is filled up with the check boxes like shown in the code below: Code: var chkboxes = ''; for(var r = 0; r < related.length; r++) { chkboxes = chkboxes + '<div class ="versionswidth">'+ '<input type="checkbox" name="version" value = related[r] />'+ related[r] + '</div>'; } var div = document.getElementById("cbContainer"); div.innerHTML = chkboxes; div display is then set as "block" which makes the div visible. The problem is that on form submission, the input of selected checkboxes is not submitting. I will be grateful for any help. Thank you. On my site's shopping cart, when clicking the "buy" button, it merely animates a little item that shows that something is now in the customer's cart. I'd like it to do this, and then redirect to "/cart", cutting down the work of what the user actually has to do (we only have one product). Here's what I'm working with: <!-- START ADD TO CART --> {% if featuredproduct.available %} <span class="featured-product price"><span>{{ featuredproduct.price | money }}</span>{% if featuredproduct.compare_at_price_max > featuredproduct.price %} <del>{{ featuredproduct.compare_at_price | money }}</del>{% endif %}</span> <input type="submit" value="{{ settings.text_addtocart }}" class=" add-to-cart addtocart button primary"> {% else %} <h3 class="featured-product price sold-out"><span>Sold Out</span></h3> <input type="submit" value="{{ settings.text_addtocart }}" class="featured-product add-to-cart button primary disabled" disabled="disabled "> {% endif %} <!-- END ADD TO CART --> Adding an "onclick="location.href='/cart';" after the input classes does not fire the actual act of adding the item to the cart, so it shows an empty cart on the redirect. JS newbie, sorry for the rough explanation. Any help greatly appreciated! On this webpage http://www.corkdiscos.com/testimonials.html i have a like button. when a user clicks like a comment box appears. when i unlike the button the comment box disappears this is ok but when a user has already liked the facebook page and comes to my webpage the comment box does not show. so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box. please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far. any help would be greatly appreciated 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? I have the following page www.crownvalleywinery.com/kiosk/default.html and I would like to add a button or checkbox to check/uncheck all. Note we are already using some javascript for custom checkboxes so it needs to integrate with that. Any help is appreciated. Here is the current javascript... Code: /* CUSTOM FORM ELEMENTS Created by Ryan Fait www.ryanfait.com The only thing you need to change in this file is the following variables: checkboxHeight, radioHeight and selectWidth. Replace the first two numbers with the height of the checkbox and radio button. The actual height of both the checkbox and radio images should be 4 times the height of these two variables. The selectWidth value should be the width of your select list image. You may need to adjust your images a bit if there is a slight vertical movement during the different stages of the button activation. Visit http://ryanfait.com/ for more information. */ var checkboxHeight = "47"; var radioHeight = "25"; var selectWidth = "190"; /* No need to change anything after this */ document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>'); var Custom = { init: function() { var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; for(a = 0; a < inputs.length; a++) { if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") { span[a] = document.createElement("span"); span[a].className = inputs[a].type; if(inputs[a].checked == true) { if(inputs[a].type == "checkbox") { position = "0 -" + (checkboxHeight*2) + "px"; span[a].style.backgroundPosition = position; } else { position = "0 -" + (radioHeight*2) + "px"; span[a].style.backgroundPosition = position; } } inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.clear; span[a].onmousedown = Custom.pushed; span[a].onmouseup = Custom.check; document.onmouseup = Custom.clear; } } inputs = document.getElementsByTagName("select"); for(a = 0; a < inputs.length; a++) { if(inputs[a].className == "styled") { option = inputs[a].getElementsByTagName("option"); active = option[0].childNodes[0].nodeValue; textnode = document.createTextNode(active); for(b = 0; b < option.length; b++) { if(option[b].selected == true) { textnode = document.createTextNode(option[b].childNodes[0].nodeValue); } } span[a] = document.createElement("span"); span[a].className = "select"; span[a].id = "select" + inputs[a].name; span[a].appendChild(textnode); inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.choose; } } }, pushed: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; } else if(element.checked == true && element.type == "radio") { this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; } else if(element.checked != true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight + "px"; } }, check: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 0"; element.checked = false; } else { if(element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; group = this.nextSibling.name; inputs = document.getElementsByTagName("input"); for(a = 0; a < inputs.length; a++) { if(inputs[a].name == group && inputs[a] != this.nextSibling) { inputs[a].previousSibling.style.backgroundPosition = "0 0"; } } } element.checked = true; } }, clear: function() { inputs = document.getElementsByTagName("input"); for(var b = 0; b < inputs.length; b++) { if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } } }, choose: function() { option = this.getElementsByTagName("option"); for(d = 0; d < option.length; d++) { if(option[d].selected == true) { document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; } } } } window.onload = Custom.init; function sendValues() { var str = $("#myForm").serialize(); $.ajax({ type: 'POST', url: "/trying.php?avoidcache=' + myTimestamp();", data: str, cache: false, return:false }); } $(":checkbox[name='brand[]']").click(function() { $("#myForm").submit(); }); ..Upon reload, the values are serialized.. But when the page is done loading..the chosen values (checkbox) is not checked, I need it stay checked so I can add other values via checkbox to the url. here is a live demo.. http://vbizmarketing.com/trying.php Please help. Hi Guys, This is my first post, apologies in advance. I'm new to javascript and working on a form, for some reason the checkboxes work fine in Google Chrome but ar enot working corectly when using IE. Can anyone put me out of my misery? I've attached the code below Thanks in advance Code: //The Javascript // Functional Code - NO NEED to Change function f40_Disable(f40_par,f40_obj,f40_state){ if (f40_par){f40_clds=f40_AllElements(document.getElementById(f40_par)); } else { f40_clds=f40_AllElements(f40_obj.parentNode); } if (!f40_obj.ary){ f40_obj.ary=new Array(); for (f40_0=0;f40_0<f40_clds.length;f40_0++){ if (f40_clds[f40_0].tagName=='INPUT'||f40_clds[f40_0].tagName=='SELECT'||f40_clds[f40_0].tagName=='TEXTAREA'){ f40_obj.ary[f40_obj.ary.length]=f40_clds[f40_0]; } } } for (f40_1=0;f40_1<f40_obj.ary.length;f40_1++){ f40_obj.ary[f40_1].removeAttribute('disabled'); } if (f40_obj.checked==f40_state){ for (f40_2=0;f40_2<f40_obj.ary.length;f40_2++){ f40_obj.ary[f40_2].setAttribute('disabled','disabled'); } } f40_obj.removeAttribute('disabled'); } function f40_AllElements(f40_){ if (f40_.all){ return f40_.all; } return f40_.getElementsByTagName('*'); } Code: <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[0]' value='BW' onclick="f40_Disable(null,this,false);">BW <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipFirst"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[1]' value='Advantage' onclick="f40_Disable(null,this,false);">Advantage <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipLast"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[2]' value='MS' onclick="f40_Disable(null,this,false);">MS <input type="text" size="15" disabled="disabled" name="ShipEmail"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[3]' value='MOC' onclick="f40_Disable(null,this,false);">MOC <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipCompany"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[4]' value='Lk' onclick="f40_Disable(null,this,false);">Lk <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipAddress1"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[5]' value='CM' onclick="f40_Disable(null,this,false);">CM <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipAddress2"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[6]' value='Ga' onclick="f40_Disable(null,this,false);">Ga <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipCity"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[7]' value='Ol' onclick="f40_Disable(null,this,false);">Ol <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[8]' value='Iy' onclick="f40_Disable(null,this,false);">Iy <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip1"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[9]' value='TPA' onclick="f40_Disable(null,this,false);">TA <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip2"> <p><LABEL ACCESSKEY=''><input type='checkbox' name='apps' id='apps[10]' value='CT' onclick="f40_Disable(null,this,false);">CT <input type="text" size="15" maxlength="30" disabled="disabled" name="ShipZip3"> I havent included the whole script as it's quite long, I'm assuming the problem is somewhere within this section. Thanks. 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 Edit: Please move me, I think it's the wrong forum! PHP Code: Adding this counts twice which proves that the page redirects twice, how to fix? <?php session_start(); if(isset($_SESSION['views'])) $_SESSION['views'] = $_SESSION['views']+ 1; else $_SESSION['views'] = 1; echo "views = ". $_SESSION['views']; ?> For some reason this form redirects twice to the same page Adding the form action to users.php doesn't help 'cause the checkboxes don't retrieve the updated data. PHP Code: <script type="text/javascript"> <!-- function un_check(){ for (var i = 0; i < document.frmactive.elements.length; i++) { var e = document.frmactive.elements[i]; if ((e.name != 'allbox') && (e.type == 'checkbox')) { e.checked = document.frmactive.allbox.checked; }}} //--> </script> </head> <body> <form action="" method="post" name="frmactive" id="frmactive"> <div align="right"> <input name="activate" type="submit" id="activate" value="Activate" class="adduser" /> <input name="deactivate" type="submit" id="deactivate" value="Deactivate" class="positive" /> </div> <?php // Check variable... if(isset($activate)){ for($i=0;$i<$count;$i++){ $user_id = $checkbox[$i]; // update accordingly... $sql = "UPDATE users SET status = 'Y' WHERE id = '$user_id'"; $result = mysql_query($sql) or die(mysql_error()); } /*** *** No clue why this is needed but if you don't refresh the page - you don't see the updated data? *** ***/ // if successful redirect if($result){ echo '<meta http-equiv="refresh" content="0;URL=users.php">'; } // *** } if(isset($deactivate)){ for($i=0;$i<$count;$i++){ $user_id = $checkbox[$i]; // update accordingly... $sql = "UPDATE users SET status = 'N' WHERE id = '$user_id'"; $result = mysql_query($sql) or die(mysql_error()); } /*** *** No clue why this is needed but if you don't refresh the page - you don't see the updated data? *** ***/ // if successful redirect if($result){ echo '<meta http-equiv="refresh" content="0;URL=users.php">'; } // *** } mysql_close(); ?> ... HTML data ... </form> Is there a better way to update MySQL via checkboxes? Hello to all and thank you for any help beforehand. I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct. I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script. Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js test.html Code: <!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> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> var ajax = new Array(); function getCityList(sel) { var countryCode = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box if(countryCode.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createCities(index) { var obj = document.getElementById('dhtmlgoodies_city'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } function getSubCategoryList(sel) { var category = sel.options[sel.selectedIndex].value; document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box if(category.length>0){ var index = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found ajax[index].runAJAX(); // Execute AJAX function } } function createSubCategories(index) { var obj = document.getElementById('dhtmlgoodies_subcategory'); eval(ajax[index].response); // Executing the response from Ajax as Javascript code } </script> </head> <body> <form action="" method="post"> <table> <tr> <td>Country: </td> <td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)"> <option value="">Select a country</option> <option value="dk">Denmark</option> <option value="no">Norway</option> <option value="us">US</option> </select> </td> </tr> <tr> <td>City: </td> <td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city"> </select> </td> </tr> </table> </form> </body> </html> Here's the content of getCities.php Code: <?php if(isset($_GET['countryCode'])){ switch($_GET['countryCode']){ case "no": echo "obj.options[obj.options.length] = new Option('Bergen','1');\n"; echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n"; echo "obj.options[obj.options.length] = new Option('Oslo','3');\n"; echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n"; break; case "dk": echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n"; echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n"; echo "obj.options[obj.options.length] = new Option('Odense','13');\n"; break; case "us": echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n"; echo "obj.options[obj.options.length] = new Option('Chicago','22');\n"; echo "obj.options[obj.options.length] = new Option('Denver','23');\n"; echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n"; echo "obj.options[obj.options.length] = new Option('New York','25');\n"; echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n"; echo "obj.options[obj.options.length] = new Option('Seattle','27');\n"; break; } } ?> So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag... Code: <body> <div id="content"> <h1>Convert temperature</h1> <input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;" />From Fahrenheit to Celcius<br /> <input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;" />From Celcius to Fahrenheit<br /> <br /> <label>Degrees Fahrenheit:</label> <input type="text" id="degrees_fahrenheit" class="disabled" /><br /> <label>Degrees Celcius:</label> <input type="text" id="degrees_celcius" class="disabled"/><br /> <br /> <input type="button" id="convert" value="Convert" /><br /> <br /> </div> </body> Hi I have a problem but im not sure if it could be solved by Javascript or PHP but either is good. I have a form with a text box where users can enter a 10 digit code. The 10 digit code can be just numbers/letters (eg. 0123456789 or abcdefghij) or it can be a mixture (eg. 0a1b2c3d4e). What I would like is if the user enters a code which is a mixture of numbers and letters then the submit url goes to mixed.php If the user enters a code which just has letters or numbers then the submit url goes to sole.php Anybody can help me? I know its possible to change the url from selecting radio buttons so I hope this can be achievable. I hope that makes sense...let me know if you need more info. Thanks guys! Hey, everyone! I was wondering if there was anyway to make a spell check button with JavaScript? I had an idea to disable spell check and then add a button so the user could click it to use spell check...or at least reveal the misspelled words. I'm sure that it's possible. In fact, I have a general idea of how it might be accomplished, but I'm not a JS coder so I don't know exactly how to make it work. Could anyone help, please? - Lono Hi all, This code works to place a mark in a radio button (check one) in a "restored" form: Code: for (var q=0;q<document.Simple.Colors.length;q++) { if (document.Simple.Colors[q].value == document.Restored.Colors.value) { document.Simple.Colors[q].checked = true ; break; } I'm curious why it won't work for a check box (check more than one): I figured it would be the same... no? Thanks, ~Wayne 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 --> <input type="image" src="uploads/button_in_cart.gif" border="0" alt="Add to Cart" title=" Add to Cart " onclick="addtocart(1);"> in addtocart function I do some checking how can i change that if after some checking my variable valid=0 that it does not allow the user to submit the form? |