|
JavaScript - Help With Validation And Button States
I have a form that has 2 radio button groups. I want the submit button to be disabled unless a selection is made for both groups. I have been trying and have it so the button will enable once a selection is made from either group but not both.
Here's the code: Code: <form method="post" action="cart.php" enctype="multipart/form-data" name="orderCushionForm" id="orderCushionForm" onsubmit="return allRadiosChecked(this)">
<div id="imagesContain">
<b>French Style Chaise Lounge Cushion - 23x73x4 (29/44) </b> <img src="image.php?sku=JFSL2373" id="placeholder" alt="French Style Chaise Lounge Cushion - 23x73x4 (29/4" width="200" height="120" />
<div id="thumbImages">
<a onclick="document.getElementById('placeholder').src='image.php?sku=JFSL2373'" rel="nofollow" target="_blank"><img src="image.php?sku=JFSL2373" alt="French Style Chaise Lounge Cushion - 23x73x4 (29/4" width="200" height="120" /></a>
</div>
<div id="Content">
<div id="cushionInfo" style="border:solid; background-color:#FF9; border-color:#000; width:750px;">
<ul>
<li>Price: $89.61</li>
<li>
<label for="quant">Quantity:</label>
<input name="quant" type="text" value="1" size="5" maxlength="5" onclick="codenamer()" />
</li>
<li>Fill: Polyfiber </li>
<br />
<table width="350" border="3" >
<tr>
<td>Ties:</td>
<td>Yes</td>
<td>Buttons:</td>
<td>Yes</td>
</tr>
<tr>
<td>Zipper:</td>
<td>No</td>
<td>Welt:</td>
<td>No</td>
</tr>
<tr>
<td>Hinged:</td>
<td>Yes</td>
<td>Hector:</td>
<td>No</td>
</tr>
<tr>
<td>Stitch:</td>
<td>No</td>
<td>Top Stitch:</td>
<td>No</td>
</tr>
<tr>
<td>Straps:</td>
<td>No</td>
<td>Cap:</td>
<td>No</td>
</tr>
</table>
</ul>
<ul>
<li>Measurements:</li>
<li>Back ( Width: 23" Height: 29" Thickness: 4" )</li>
<li>Seat ( Width: 23" Depth: 44" Thickness: 4" )</li>
<input type="hidden" name="measurements" value="3"/>
</ul>
</div>
<br />
<br />
<ul id="MinorOptions" class="shadetabs">
<li><a href="#" rel="button" class="selected">Buttons</a></li>
</ul>
<div id="button" class="tabcontent">
<ul id="ButtonTabs" class="shadetabs">
<li><a href="#" rel="allButtons" class="selected">All</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<table border="0"> <tr></tr><tr><td><center><img src='image.php?sku=7' alt='beige button' width="50px" height="50px"; />
<br />
Beige<br />
<input type="radio" name="buttonSelect" value='7' id="RadioGroup2_0" onclick=javascript:fCheck() />
<br /></td>
<td><center><img src='image.php?sku=6' alt='Black plastic Button' width="50px" height="50px"; />
<br />
Black<br />
<input type="radio" name="buttonSelect" value='6' id="RadioGroup2_1" onclick=javascript:fCheck() />
<br /></td>
<td><center><img src='image.php?sku=19' alt='Brown Plastic Button' width="50px" height="50px"; />
<br />
Brown<br />
<input type="radio" name="buttonSelect" value='19' id="RadioGroup2_2" onclick=javascript:fCheck() />
<br /></td>
</tr></table>
</div>
<script type="text/javascript">
var Minor=new ddtabcontent("MinorOptions")
Minor.setpersist(true)
Minor.setselectedClassTarget("link") //"link" or "linkparent"
Minor.init()
</script>
<script type="text/javascript">
var buttons=new ddtabcontent("ButtonTabs")
buttons.setpersist(true)
buttons.setselectedClassTarget("link") //"link" or "linkparent"
fabricsbuttons.init()
</script>
</div>
<ul id="MajorOptions" class="shadetabs">
<li><a href="#" rel="fabric" class="selected">Fabric</a></li>
</ul>
<div id="fabric" class="tabcontent">
<ul id="FabricTabs" class="shadetabs">
<li><a href="#" rel="allFabric" class="selected">All</a></li>
<li><a href="#" rel="solidFabric">Solid</a></li>
<li><a href="#" rel="stripedFabric">Striped</a></li>
<li><a href="#" rel="patternFabric">Pattern</a></li>
<li><a href="#" rel="designerFabric">Designer +$10.00</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="allFabric" class="tabcontent">
<table border="0"> <tr></tr><tr><td style="border:0px;"><center><img src ='image.php?sku=dshdhshd' width="120px" height="120px" alt='sdfasasasd'>
<br />
<a href="fabpopup.php?sku=dshdhshd" onclick="return popup(this, 'fabric')" \>fddhsdh</a><br />
SKU: dshdhshd<br />
<input type="radio" name="fabricSelect" value='dshdhshd' id="RadioGroup1_0" onclick=javascript:fCheck(); />
<br /></td>
</table></div>
<div id="solidFabric" class="tabcontent">
<table border="0"> <tr></tr><tr><td style="border:0px;"><center><img src ='image.php?sku=dshdhshd' width="120px" height="120px" alt='sdfasasasd'>
<br />
<a href="fabpopup.php?sku=dshdhshd" onclick="return popup(this, 'fabric')" \>fddhsdh</a><br />
SKU: <br />
<input type="radio" name="fabricSelect" value='dshdhshd' id="RadioGroup1_0" onclick=javascript:fCheck(); />
<br /></td>
</table></div>
<div id="stripedFabric" class="tabcontent">
<table border="0"> <tr></table></div>
<div id="patternFabric" class="tabcontent">
<table border="0"> <tr></table></div>
<div id="designerFabric" class="tabcontent">
<table border="0"> <tr></tr></table></div>
</div>
<script type="text/javascript">
var Major=new ddtabcontent("MajorOptions")
Major.setpersist(true)
Major.setselectedClassTarget("link") //"link" or "linkparent"
Major.init()
</script>
<script type="text/javascript">
var fabrics=new ddtabcontent("FabricTabs")
fabrics.setpersist(true)
fabrics.setselectedClassTarget("link") //"link" or "linkparent"
fabrics.init()
</script>
</div>
<input name="cushionName" type="hidden" value="French Style Chaise Lounge Cushion - 23x73x4 (29/44) " />
<input name="sku" type="hidden" value="JFSL2373" />
<input name="price" type="hidden" value="89.61" />
<input name="hinged" type="hidden" value="Y" />
<input name="hector" type="hidden" value="N" />
<input name="stitch" type="hidden" value="N" />
<input name="topstitch" type="hidden" value="N" />
<input name="ties" type="hidden" value="Y" />
<input name="type" type="hidden" value="" />
<input name="edge" type="hidden" value="Boxed" />
<input name="zipper" type="hidden" value="N" />
<input name="cap" type="hidden" value="N" />
<input name="welt" type="hidden" value="N" />
<input name="contwelt" type="hidden" value="N" />
<input name="button" type="hidden" value="Y" />
<input name="straps" type="hidden" value="N" />
<input name="url" type="hidden" value="" />
<input name="fill" type="hidden" value="Polyfiber" />
<input name="product" id="product" type="hidden" value="cushion" />
<input name="addToCart" type="submit" id="addToCart" value="Add to Cart" disabled onclick="this.disabled = true;" />
</form>
<script>
function fCheck() {
document.orderCushionForm.addToCart.disabled
=(document.orderCushionForm.fabricSelect.checked && document.orderCushionForm.buttonSelect.checked);
}
</script>
Similar TutorialsHey everyone I'm new here and I have a question about the best way to execute this task. I am trying to create a page with a dropdown list where the user selects the state. A drop down list below that can have the specific schools to that state to choose from. Now I need a way for the user to click on a school and then be taken to a page that has website URL's from all the fraternities in that school. Do I need php and mysql? I don't want to create a million pages unless I have to. What is the easiest way to do this. Maybe some kind of central form things where it outputs the fraternity you want at a particular school and state. Also I am using tumblr but can just link it to a normal html or php page just throwing that out there. Thanks guys! Thomas how would i check to see if my radio button is not checked. I know in javascript the term "checked" works. Is there a way to us unchecked? here is what i am trying to figure out. Code: with (thisform)
{
if(document.getElementById('m21').unchecked)
{
window.alert('Please Verify Your Age')
m21.focus();
return false;}
}
Hi hope someone here can help me with a problem i'm stuck on. Basically I have 3 radio buttons and one of them has to be selected otherwise display a error message but I cant figure it out. Here is my failed attempt: Code: <html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["name"].value;
var y=document.form1.difficulty.value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
if (y==false)
{
alert(y);
return false;
}
}
</script>
</head>
<body>
<div id="horizon">
<div id="content">
<img src="images/logo.jpg" width="649" height="410"></div>
<div id="content2"><form name ="form1" method ="post" action ="game.php" onSubmit="return validateForm()" >
Name: <input type ='text' name='name' />
<br />
<Input type = 'Radio' Name ='difficulty' value= '1' />Easy
<Input type = 'Radio' Name ='difficulty' value= '2' />Medium
<Input type = 'Radio' Name ='difficulty' value= '3' />Hard
<br /><Input type = "Submit" Name = "Submit" VALUE = "Submit">
</form></div></div>
</body>
</html>
Thanks in advance Wondering how come this doesn't work any ideas? its validating that the radio buttons have been selected. Code: if ( ( form.q1[0].checked == false ) && ( form.q2[1].checked == false) && ( form.q3[2].checked == false )) { alert ( "Please Choose a " ); return false; }
Hi everyone. I'm getting into javascript coding and i'm stumped with some problem about radio buttons. What I would like is to have a general function where I can pass in any group of radio buttons and have it return the textual value of the radio button selected. First, here is my code so far. Code: function Get_Radio_Selection(options)
{
var choice = "";
for (var index = 0; index <= options.length; index++)
if (options[index].checked == true)
choice = options[index].value;
return choice;
}
Now here's a sample form: Code: <form name="form1">
<input type="radio" name="food" value="Banana">Banana
<input type="radio" name="food" value="Mango">Mango
<input type="radio" name="food" value="Orange">Orange
<input type="radio" name="food" value="Oatmeal">Oatmeal
<input type="button" name="blah" value="Get Selection"
onclick="Get_Radio_Selection(document.form1.food);">
</form>
My question is, when i run this function and pass it in the group of radio buttons by means of the onclick event handler, firefox 3.6.22 reports in the error console on line 22 that "options[index] is undefined". It seems that if i use the variable "index" more than one time it reports this error but if I take out the assignment to variable "choice" that it works just fine. I rewrote the function using a separate variable and this time it works perfectly: Code: function Get_Radio_Selection(options)
{
var choice = "";
var index;
for (var i = 0; i < options.length; i++)
{
if (options[i].checked == true)
{
index = i;
choice = options[index].value;
}
}
return choice;
}
Notice the indexing variables in the "if" statement and the assignment to "choice" are different. Does anyone have any suggestions on why this happens? Thanks. I wanted to make it so that a button on the webpage validates a word that a user types into a prompt box that pops up when they open the webpage. For example, user goes on website, prompt box opens, user types in word then presses OK. On the webpage he clicks the button, which calls a while function to check if the word has a P at the start, a J somewhere in it, and is longer than 8 characters. Code: <script type="text/javascript">
var strWord;
function validateWord()
{
while(strWord == document.formname.validateWord.value.length > 8 && var iChars =
"JP";)
{
"alert(Correct)"
value="Word Alert">
}
}
</SCRIPT>
I've been trying this script but with no luck and cant tell whats wrong with it. Any ideas? Hi, i'm new here and I need help. I need a script that can alert in 2 ways for multiple radio button groups of "yes" and "no." I got the first question to alert the way I need (with alert #1 for yes and alert#2 for no.) However, starting from the 2nd question it alerts #1 for both yes and no. This is the script I'm working with: Code: <script type="text/javascript">
function valbutton(form) {
myOption = -1;
for (i=form.buttonset1.length-1; i > 0; i--) {
if (form.buttonset1[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Yes or No");
return false;
}
if (myOption == 1) {
alert("Yes, it works!");
return false;
}
if (myOption == 2) {
alert("No, it won't work.");
return false;
}
}
</script>
The following are the 1st two sets of radio buttons: Code: <form name="myform" action="formstest.html"> <tr> <td> <input type="reset" value="Click to Reset"> <br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td> </tr> <tr><td class="question">Question #1</td> <td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br /> <input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br /> </td> </tr> <tr rel="flat"> <td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td> <td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br /> <input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br /> </td> </tr> Is it possible to switch out the alerts for yes and no for next 4 questions? And finally, the following is the lengthy, thorough version of my question if it clarifies what I'm trying to do. I would really appreciate someone to point me the right direction. I've tried all kinds of variation to the script and I just can't seem to make it work. Thanks in advance! (Lengthy Version) I also need questions to appear (or not show) below as select radio buttons are clicked. I have 6 groups of yes and no radio buttons. I would like the first two groups to have "alert 1" when yes is clicked (and "alert 2" for no.) I would like the rest to show "alert 2" when yes is clicked (and "alert 1" for no.) (I also have all the questions hidden below question 1. Each subsequent questions appear upon clicking yes for questions 1&2, and no for the rest. I would like to keep this intact - I put that js code I downloaded at the end of this post.) Here's what I have so far... I got most of it working except after the first question, "alert 1" appears for all the clicks submitted. I've been at it for a few weeks and I can't seem to figure it out. Thanks in advance! Code: <html>
<head>
<title>Form Test</title>
<script type="text/javascript">
function valbutton(form) {
myOption = -1;
for (i=form.buttonset1.length-1; i > 0; i--) {
if (form.buttonset1[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("Please select Yes or No");
return false;
}
if (myOption == 1) {
alert("Yes, it works!");
return false;
}
if (myOption == 2) {
alert("No, it won't work.");
return false;
}
}
</script>
</head>
<body>
<form name="myform" action="formstest.html">
<tr>
<td> <input type="reset" value="Click to Reset">
<br><input type="radio" name="buttonset1" value="1" rel="none" id="r1" /><label for="r1">Click to Start Over</label><br /></td>
</tr>
<tr><td class="question">Question #1</td>
<td><input type="radio" name="buttonset1" value="2" rel="flat" id="r2" /> <label for="r2">Yes</label><br />
<input type="radio" name="buttonset1" value="3" rel="none" id="r3" /> <label for="r3">No</label><br />
</td>
</tr>
<tr rel="flat">
<td class="question"><label for="flat"><span class="accessibility">If metal:</span>Question #2</label></td>
<td><input type="radio" name="buttonset2" value="4" rel="uneven" id="r4" /> <label for="r4">Yes</label><br />
<input type="radio" name="buttonset2" value="5" rel="none" id="r5" /> <label for="r5">No</label><br />
</td>
</tr>
<tr rel="uneven">
<td class="question"><label for="uneven"><span class="accessibility">If flat:</span> Question #3</label></td>
<td><input type="radio" name="buttonset3" value="6" rel="none" id="r6" /> <label for="r6">Yes</label><br />
<input type="radio" name="buttonset3" value="7" rel="ridges" id="r7" /> <label for="r7">No</label><br />
</td>
</tr>
<tr rel="ridges">
<td class="question"><label for="ridges"><span class="accessibility">If uneven:</span> Question #4</label></td>
<td><input type="radio" name="buttonset4" value="8" rel="none" id="r8" /> <label for="r8">Yes</label><br />
<input type="radio" name="buttonset4" value="9" rel="holes" id="r9" /> <label for="r9">No</label><br />
</td>
</tr>
<tr rel="holes">
<td class="question"><label for="holes"><span class="accessibility">If ridges:</span> Question #5</label></td>
<td><input type="radio" name="buttonset5" value="10" rel="none" id="r10" /> <label for="r10">Yes</label><br />
<input type="radio" name="buttonset5" value="11" rel="curved" id="r11" /> <label for="r11">No</label><br />
</td>
</tr>
<tr rel="curved">
<td class="question"><label for="curved"><span class="accessibility">If holes:</span>Question #6 </label></td>
<td><input type="radio" name="buttonset6" value="12" rel="none" id="r12" /> <label for="r12">Yes</label><br />
<input type="radio" name="buttonset6" value="13" rel="answer" id="r13" /> <label for="r13">No</label><br />
</td>
</tr>
<tr rel="answer">
<td></td>
<td class="question"><label for="answer"><span class="accessibility">If not curved:</span><strong> Yes, correct answer!</strong></label></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
The following is the JS found to make corresponding questions appear as each relevant radio button answer is clicked: Code: /*****************************************/
/** Usable Forms 2.0, November 2005 **/
/** Written by ppk, www.quirksmode.org **/
/** Instructions for use on my site **/
/** **/
/** You may use or change this script **/
/** only when this copyright notice **/
/** is intact. **/
/** **/
/** If you extend the script, please **/
/** add a short description and your **/
/** name below. **/
/*****************************************/
var containerTag = 'TR';
var compatible = (
document.getElementById && document.getElementsByTagName && document.createElement
&&
!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
);
if (compatible)
{
document.write('<style>.accessibility{display: none}</style>');
var waitingRoom = document.createElement('div');
}
var hiddenFormFieldsPointers = new Object();
function prepareForm()
{
if (!compatible) return;
var marker = document.createElement(containerTag);
marker.style.display = 'none';
var x = document.getElementsByTagName('select');
for (var i=0;i<x.length;i++)
addEvent(x[i],'change',showHideFields)
var x = document.getElementsByTagName(containerTag);
var hiddenFields = new Array;
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('rel'))
{
var y = getAllFormFields(x[i]);
x[i].nestedRels = new Array();
for (var j=0;j<y.length;j++)
{
var rel = y[j].getAttribute('rel');
if (!rel || rel == 'none') continue;
x[i].nestedRels.push(rel);
}
if (!x[i].nestedRels.length) x[i].nestedRels = null;
hiddenFields.push(x[i]);
}
}
while (hiddenFields.length)
{
var rel = hiddenFields[0].getAttribute('rel');
if (!hiddenFormFieldsPointers[rel])
hiddenFormFieldsPointers[rel] = new Array();
var relIndex = hiddenFormFieldsPointers[rel].length;
hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
var newMarker = marker.cloneNode(true);
newMarker.id = rel + relIndex;
hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
waitingRoom.appendChild(hiddenFields.shift());
}
setDefaults();
addEvent(document,'click',showHideFields);
}
function setDefaults()
{
var y = document.getElementsByTagName('input');
for (var i=0;i<y.length;i++)
{
if (y[i].checked && y[i].getAttribute('rel'))
intoMainForm(y[i].getAttribute('rel'))
}
var z = document.getElementsByTagName('select');
for (var i=0;i<z.length;i++)
{
if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
}
}
function showHideFields(e)
{
if (!e) var e = window.event;
var tg = e.target || e.srcElement;
if (tg.nodeName == 'LABEL')
{
var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
tg = document.getElementById(relatedFieldName);
}
if (
!(tg.nodeName == 'SELECT' && e.type == 'change')
&&
!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
) return;
var fieldsToBeInserted = tg.getAttribute('rel');
if (tg.type == 'radio')
{
removeOthers(tg.form[tg.name],fieldsToBeInserted)
intoMainForm(fieldsToBeInserted);
}
}
function removeOthers(others,fieldsToBeInserted)
{
for (var i=0;i<others.length;i++)
{
var show = others[i].getAttribute('rel');
if (show == fieldsToBeInserted) continue;
intoWaitingRoom(show);
}
}
function intoWaitingRoom(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
waitingRoom.appendChild(Elements[i]);
if (Elements[i].nestedRels)
for (var j=0;j<Elements[i].nestedRels.length;j++)
intoWaitingRoom(Elements[i].nestedRels[j]);
}
}
function intoMainForm(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
var insertPoint = document.getElementById(relation+i);
insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
if (Elements[i].nestedRels)
{
var fields = getAllFormFields(Elements[i]);
for (var j=0;j<fields.length;j++)
{
if (!fields[j].getAttribute('rel')) continue;
if (fields[j].checked || fields[j].selected)
intoMainForm(fields[j].getAttribute('rel'));
}
}
}
}
function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
allFormFields.push(y[i]);
return allFormFields;
}
/** ULTRA-SIMPLE EVENT ADDING **/
function addEvent(obj,type,fn)
{
if (obj.addEventListener)
obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
obj.attachEvent("on"+type,fn);
}
addEvent(window,"load",prepareForm);
/** PUSH AND SHIFT FOR IE5 **/
function Array_push() {
var A_p = 0
for (A_p = 0; A_p < arguments.length; A_p++) {
this[this.length] = arguments[A_p]
}
return this.length
}
if (typeof Array.prototype.push == "undefined") {
Array.prototype.push = Array_push
}
function Array_shift() {
var A_s = 0
var response = this[0]
for (A_s = 0; A_s < this.length-1; A_s++) {
this[A_s] = this[A_s + 1]
}
this.length--
return response
}
if (typeof Array.prototype.shift == "undefined") {
Array.prototype.shift = Array_shift
}
Hi everyone, I currently use javascript in an anchor tag to submit a form using Code: <a href="#" onClick="document.myformname.submit(); return false;">Submit</a> The only problem is, JQuery doesn't acknowledge that my form has been submitted. Has anyone come up against this problem before? If so, can you please share your work around? Thank you! B Hello All. What my script does is if you do not select a radio button and you hit submit an error will pop up saying please select game1. this is taken from the name of the radio button.. How can i make it so it prints out the VALUES of the 2 radio buttons. end result should print please select Baltimore Ravens vs. Cincinnati Bengals rather than please select game1. Code: function isChecked(radgrp)
{
var i = radgrp.length;
do
if (radgrp[--i].checked)
return true;
while (i);
return false;
}
function validateTest(els)
{
var focus_me = null, msg = "";
if (!isChecked(els.game1))
{
msg += " Game #1\n";
focus_me = focus_me || els.game1[0];
}
if (!isChecked(els.game2))
{
msg += " Game #2\n";
focus_me = focus_me || els.game2[0];
}
if (!isChecked(els.game16))
{
msg += " Game #16\n";
focus_me = focus_me || els.game16[0];
}
if (msg != "")
{
var prefix = "\n WARNING: The following Games(s) were not selected:\n\n";
var suffix = "\nClick OK to submit your picks anyway.\n\n";
var suffix = suffix + "\n Click CANCEL to correct your picks."
var ask = confirm(prefix + msg + suffix);
if (ask) {
if (focus_me)
focus_me.focus();
return true;
}
else{
return false;
}
}
}
Here is the radio button. If you dont select the radio button i want the javascript validation pop but to say "please select Baltimore Ravens vs. Cincinnati Bengals rather than game1 like it does now. Code: <INPUT TYPE=RADIO NAME="game1" VALUE="Baltimore Ravens">Baltimore Ravens<BR> <INPUT TYPE=RADIO NAME="game1" VALUE="Cincinnati Bengals">Cincinnati Bengals<BR> Thanks I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons. Code: <script>
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd;
}
function checkForm() {
var chosen = getRBtnName('Consent');
if (chosen < 0) {
alert( "Please choose one answer when you are asked to select a number." );
return false;
} else { return true; }
}
</script>
<form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()">
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="3">I consent to providing my electronic signature.</p></td>
</tr>
<tr>
<td colspan="3" valign="top">
<input type="radio" name="Consent" value="Y" />
Yes
<input type="radio" name="Consent" value="N" />
No
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td>I consent to electronic receipt of my information reporting documentation.</td>
</tr>
<tr>
<td valign="top">
<input type="radio" name="Consent1099YesNo" value="Y" />
Yes
<input type="radio" name="Consent1099YesNo" value="N" />
No</td>
</tr>
<tr>
<td valign="top">
For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
<input type="radio" name="USPersonYesNo" value="Y" />
Yes
<input type="radio" name="USPersonYesNo" value="N" />
No</tr>
</table>
<input type="submit" value="submit" value="Submit" />
</form>
Any help would be greatly appreciated. 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. Hi, I am having a problem with my script used to disable my submit button. I want the button to disable upon correct submission of the form, and the button to be kept enabled if the required fields are not filled in. I have the following code at the moment (which only does the first if statement). Code: SCRIPT CODE:
<script type="text/javascript" >
function validateForm()
{
var amount=document.forms["expenserecord"]["amount"].value;
var picker=document.forms["expenserecord"]["picker"].value;
var desc=document.forms["expenserecord"]["description"].value;
if (amount==null || amount=="" || picker==null || picker=="" || desc==null || desc=="") {
alert("All required fields must be filled out.");
document.getElementById("sub").disabled = false;
return false;
}
else {
document.getElementByID("sub").disabled = true;
}
}
</script>
BUTTON CODE:
<p><input type="submit" value="Submit" onClick="return validateForm()" id="sub"></p>
I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed. I want to be able to do this without having to do a postback. I already have the logic on the code behind and the enquiry object. also I am fairly new to javascript so I have been using mostly jQuery as easier to implement here is the html code that i have PHP Code: <td valign="middle" valign="middle"> <input type="radio" name="gender" id="genderM" value="Male" /> Male <input type="radio" name="gender" id="genderFM" value="Female" /> Female </td> and here is the js funtion PHP Code: var $j = jQuery.noConflict(); function isValidEmail(str) { return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); } function validateForm(){ var firstName; var lastName; var email; var mobile; var comment; var error; firstName = $j('#firstName').val(); lastName = $j('#lastName').val(); email = $j('#email').val(); mobile = $j('#mobile').val(); comment = $j('#comment').val(); if(firstName=='' || firstName.length < 3){ error = 'Please Enter Your First Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(lastName=='' || lastName.length < 3){ error = 'Please Enter Your Second Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } //mob //$jmob_pattern = '^\d{10}$j'; if(mobile.length != 10 || isNaN(mobile)){ error = 'Please Enter Your Mobile Number'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(email=='' || !isValidEmail(email)){ error = 'Please Enter Your Email Address'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(comment.length < 5){ error = 'Please Enter A Comment'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } return true; } Does anybody know how i check to see if the radio button is select and also can anybody tell me how i can check for an email in the correct format the function isValidEmail in the above alows emails to pass through if they are in this format aaa@aaa. i only want them to go through if they are aaa@aaa.com Thanks for your help if you give it Hey all. I have a simple validation I need to do. I need to just make sure that a Checkbox is checked, and that a Text field has content. Sounds simple but I cannot find any thing that has a check and a text field. Here what I have. Can I modify this script to do this? A Checkbox MUST be checked and Text field MUST be filled out. This currently does the text field fine, but no Checkbox obviously. How can I add a checkbox validation to this? Thats it. Any help is appreciated. Code: <script type="text/javascript">
var textFields = ["digsig"];
function validateForm( )
{
var oops = ""; // must initialize this!
var form = document.sig;
for ( var t = 0; t < textFields.length; ++t )
{
var field = form[textFields[t]];
var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input
if ( value.length < 1 )
{
oops += "You MUST enter your Digital Signature";
}
}
if ( oops != "" )
{
alert("ERROR:" + oops);
return false;
}
}
}
</script>
Hello all, new here Seems like a very nice place to be apart of. I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it. The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem. I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs. <problem> I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location. <problem> I would like to keep the JS close to how it is now as I have a library to use this JS over and over again. Any pointers in the right direction or solutions to my problem would be greatly appreciated. Thanks! Hopefully it is not to hard huh If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again! Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. |
|||||||