Learn VBA & Macros in 1 Week!

JavaScript - Script For Prompt Box Validation Using A Button

Full Excel VBA Course - Beginner to Expert

Script For Prompt Box Validation Using A Button	View Content

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?

Full Excel VBA Course - Beginner to Expert

Radio Button Prompt Using Js

Similar Tutorials

View Content

I am ignorant in java scripting. I want to use the following java script to create the radiobutton in obiee reporting. This java script will change the regular prompt to radio button,however I do not know how to debug if it is working.

Waiting for kind reply.

Anil
PHP Code:
<script type="text/javascript">

function getElementsByClass(searchClass,node,tag) {

    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

var tables = getElementsByClass('DashboardPromptViewTable',null, 'table');

for (var table = 0; table < tables.length; table++){

    var stringFunc = '';
    var selects = tables[table].getElementsByTagName('select');

    if ( selects.length == undefined || selects.length == 0 || selects[0].name === 'Match'){
        if (debug === 1) { document.write("No selects found.  Continue to next record."+"<BR>");}
        continue;  // This DB Prompt doesn't have any select statements
    }

    var spans = getElementsByClass('minibuttonOn',tables[table],'span');

    spans[0].style.display="none";
    stringFunc = String(spans[0].getElementsByTagName('a')[0].onclick);
    stringFunc = stringFunc.substr(stringFunc.indexOf('{')+1, stringFunc.length - 2 - stringFunc.indexOf('{'));

    for (var s =0; s < selects.length; s++){
        var new_form = document.createElement('form');
        var options  = selects[s].getElementsByTagName('option');
        new_form.name = selects[s].name+"_radio";
        new_form.id   = selects[s].id+"_radio";
        for (var o=0; o<options.length; o++) {
            var new_input       = document.createElement('input');
            new_input.type      = 'radio';
            new_input.value     = options[o].value;
            new_input.name      = selects[s].name+"_radio";
            if(selects[s].selectedIndex == o){
                new_input.checked = true;
            }
            var onClickStringFunc = "var sel = document.getElementById(this.name.substr(0,this.name.length-6));" +
                                    "if ( sel == null){"+
                                        "return;"+
                                    "}"+
                                    "var opts = sel.getElementsByTagName('option');"+
                                    "for( var opt = 0; opt < opts.length; opt++){"+
                                        "if( opts[opt].value == this.value){"+
                                            "sel.selectedIndex = opt;"+
                                        "}"+
                                    "}";
            new_input.onclick = new Function(onClickStringFunc + stringFunc);
            var new_text        = document.createTextNode(options[o].innerHTML);
            new_form.appendChild(new_input);
            new_form.appendChild(new_text);
        } // end options for loop
        selects[s].parentNode.insertBefore(new_form,selects[s]);
        selects[s].style.display="none";
    } // end selects for loop
} // end table foor loop
</script>

Java Script Input Prompt Only Works In Ie

Similar Tutorials

View Content

this is the code for input prompt, only works in IE:

any ideas why?

$('input[type=text][title],input[type=password][title],textarea[title]').each(function(i){
$(this).addClass('input-prompt-' + i);
var promptSpan = $('<span class="input-prompt"/>');
$(promptSpan).attr('id', 'input-prompt-' + i);
$(promptSpan).append($(this).attr('title'));
$(promptSpan).click(function(){
$(this).hide();
$('.' + $(this).attr('id')).focus();
});
if($(this).val() != ''){
$(promptSpan).hide();
}
$(this).before(promptSpan);
$(this).focus(function(){
$('#input-prompt-' + i).hide();
});
$(this).blur(function(){
if($(this).val() == ''){
$('#input-prompt-' + i).show();
}
});
});

Radio Button Validation

Similar Tutorials

View Content

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;}
  }

Radio Button Validation

Similar Tutorials

View Content

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; }

Help With Validation And Button States

Similar Tutorials

View Content

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>

Help With Radio Button Validation

Similar Tutorials

View Content

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.

Radio Button Validation

Similar Tutorials

View Content

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

Multiple Radio Button Validation

Similar Tutorials

View Content

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
}

How To Print The Value Of A Radio Button In A Javascript Validation

Similar Tutorials

View Content

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

Jquery Validation Using A Link Instead Of Submit Button

Similar Tutorials

View Content

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

Submit Button Disable And Enable Upon Correct Validation

Similar Tutorials

View Content

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>

Javascript Form Validation When Submit Button Is Pressed?

Similar Tutorials

View Content

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.

Multiple Radio Button Field Form Validation

Similar Tutorials

View Content

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.

Javascript Radio Button That Toggles The Validation Between To Textbox Values

Similar Tutorials

View Content

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

How To Add A Validation Script

Similar Tutorials

View Content

I have a website that uses a php contact form with recaptcha, I would like to add a javascript for the validation of the form. How would I refer to the form? I have this in my form code. Is that enough? or do I have to add an event handler or something else, also do I need to specify a path or will it just go to validate.js? New to Javascript

Code:

<form id="form" action="process.php" enctype="multipart/form-data" method="post" name="form_to_email" onsubmit="return Validate();">

How Do I Use This Validation Script?

Similar Tutorials

View Content

Form Validation Code Needed To Make Sure A Radio Button Is Selected

Similar Tutorials

View Content

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

Help With Form Validation Script

Similar Tutorials

View Content

Hi Guys,

Im new to JS and need some help..

I have a contact form on my webpage and i want to put in an alert box if people done enter a field. Below is the html i have for the form

PHP Code:
<form id="form" method="post" action="consultation.php" onsubmit="return validate(this)">
           <p>
             <label>Name:</label>
             <input type="text" name="name" id="name" />
           </p>
           <p>
             <label>Company:</label>
             <input type="text" name="company" id="company" />
           </p>
           <p>
             <label>Email:</label>
             <input type="text" name="email" id="email" />
           </p>
           <p>
             <label>Phone:</label>
             <input type="text" name="phone" id="phone"/>
           </p>

           <p style="margin-bottom:0px">
             <input class="submit_btn" type="image" src="images/submit_btn.gif" name="submit" value="Submit"  />
           </p>
         </form>

and here is the external Java Script file that iv made so far

PHP Code:

      var nName = nForm['name'];
        var nCompany = nForm['company'];
        var nEmail = nForm['email'];
        var nPhone = nForm['phone'];

    if (nName.value.replace(/s/g, "").length < 1)
            {
             alert('Please enter your full name');
             return false;
            }

        if (nCompany.value.replace(/s/g, "").length < 1)
                {
             alert('Please enter your company name');
             return false;
            }

            if (!/^w+[w|.|-]{0,1}w*[w|.|-]{0,1}w*@w+[w|-]{0,1}w*[w|-]{0,1}w*.{1,1}[a-z]{2,4}$/.test(nEmail.value))
            {
             alert('Please enter your correct email address');
             return false;
            }

    if (!/[ds-]+$/.test(nPhone.value) || !/d{10}/.test(nMobile.value.replace(/[s-]/g, ""))) // must contain 10 digits;
            {
             alert('Please enter your correct phone number');
             return false;
            }

iv referenced this Java script file in the head of the html document..

Can anyone help me make this script please...

THanks

Ie Compatible Script Validation

Similar Tutorials

View Content

I am trying to design a webpage but no matter how i design it, IE seems to show totally different design then firefox/chrome/safari.

Is there any website i can goto which will take my CSS/Script input and give me the IE version of it so it can work on all browsers without any issue?

Thanx

Problem With Simple Validation Script

Similar Tutorials

View Content

Having an unusual problem with the simple validation script below. In my script, I want to validate the username text field so that if the value of the text field (i.e. the amount of characters in the field) is less than 5, it would show a message in the page using innerHTML. The script works, but in a roundabout sort of way, or at least that's what it seems to me. Instead of making sure that the amount of characters in the text field is less than 5, it seems to disregard this entirely and instead make it so that if it has no value at all, the message will be shown. If it has a value of even 1 character, though, the message does not show. Not what I was trying to do, and I really don't know what's happened.

Thanks in advance to anyone who can help out a newbie in need.

Code:

function uservalidate() {
	if (document.getElementById("user").value < 5) 
                        { document.getElementById("userdiv").innerHTML = "Username must be six characters or more." }
             else 
                 {
	    document.getElementById("userdiv").innerHTML = ""
	     }
}

Code:

<body>
      <form id="form1">
         <input type="text" id="user" onblur="uservalidate()" /> 
         <div id="userdiv"></div>
      </form>
</body>
</html>