Learn VBA & Macros in 1 Week!

JavaScript - Form's Battens Don't Work On Ie

Full Excel VBA Course - Beginner to Expert

Form's Battens Don't Work On Ie	View Content

Hello everyone.

My girlfriend wrote an electronic form with some Java script code.
However some buttons don't work on IE (like the "submit and "default values" battens).

Could someone please have a quick view and maybe tell me what should be changed?

http://img2.timg.co.il/forums/1_142239233.txt

Thanks

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Need Help With Getting This Form To Work Properly

Form Submit Does Not Work

Problem Getting Form To Work In Ff

How Come This Form Validation Wont Work

Form Button To Work With Enter Key

Form Validation Doesn't Work In Ff

Document.form.submit Does Not Work After Sometime!

How To Work On Indexed Form Fields With Js?

Does Document.getelementbyid Work With Form Elements

Validation Form Does Not Seem To Work. Boolean Or Variable?

Dynamic Creation Of Form Element Name/id Properties Doesn't Work In Ie

Need Help : Positioned Layers/radio Buttons On Order Form Won't Work :/

Dynamically Adding Form Elements With Javascript Does Not Work Properly In Firefox.

Form Wont Send In Ie7, Validation Wont Work?

Fade Script Work Work On Ie 7

Jquery Realtime Order Form - Change Form Elements Depending On Selection

Client Side Javascript Form Validation (uses Ajax) - Form Won't Submit, Help!

Multistep Form Validation Issues - Form Submits Too Early

Need Javascript To Check A Form And Trigger A Hidden Form To Become Visible.

Javascript Validation Not Working With Form Of Multipart/form-data

Learn VBA & Macros for Excel in 1 Week!

Need Help With Getting This Form To Work Properly

Similar Tutorials

Ultimately, when the user inputs their name in a text field, choose their age from a select list, and choose the amount of hours they sleep via radio button and when they hit the submit button it is supposed to calculate the amount of years they've slept their entire life. Any hints or clues why this isn't working would be greatly appreciated.
Code:

function createOptions()
		{
			var myOptions;
				for (cntr=1; cntr<99; cntr++)
					{
						myOptions = myOptions + "<option value=" + cntr + ">" + cntr + "</option>";
						
						if (myOptions[20].selected)
						{
							switch(myOptions[20].value)
						}
					
					}
					
		}
		
	
		
		function someFunction()
		{
			var myTextElement = document.getElementById("name");
			var myValue = myTextElement.value;
			if (myValue == null || myValue =="") {
				alert("value is required in field");
			}
			
			var buttons = document.getElementById("hours");
			
				if (document.getElementById("r7").checked) 
				{ 
        	    	myHours = 7; 
				}
			
				if (document.getElementById("r8").checked)
				{
					myHours = 8;
				}
				
				if (document.getElementById("r9").checked)
				{
					myHours = 9;
				}
			
				if (document.getElementById("r6").checked)
				{
					myHours = 6;
				}
			
			var mySelect = document.getElementById('age').selectmySelect.options;
					for (var i = 0; i < mySelect.length; i++) {
						if (mySelect[i].selected) {
							switch(mySelect[i].value) {
								case "1" : mySelect[i + 1].selected = true;
											  break;
								case "2" : mySelect[i + 1].selected = true;
											  break;
								case "3" : mySelect[i + 1].selected = true;
											  break;
							}
						}
					}
					mySelect.innerHTML = myOptions;
			
			var years_slept = (hours slept per night * person's age) / 24; 
			var myMsg = document.getElementById("mymsg");
		}

Form Submit Does Not Work

Similar Tutorials

the showUser function has ajax in it that calls a php file that accesses a db to perform some calculations.

I wanted to use the clicked function to force required dropdowns to be selected but I cannot seem to get the submit button to do anything. It does nothing when you click it. Not sure how to proceed, have looked everywhere. If anyone has any advice I would really appreciate it.

Code:

<form id="forecastfilter" action="indexo_beats.php" method="get" onsubmit="clicked(this.value='yes')">

<div class="fc">Date:</div>
<select name="date" onchange="showUser(this.value)">
<option value="">--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="Date: Past Hour">Past hour</option>
<option value="Date: Past week">Past week</option>
<option value="Date: Past month">Past month</option>
<option value="Date: Past year">Past year</option>
</select>

<br />
<div class="fc">Wideouts:</div>
<select name="wideouts" onchange="showUser(this.value)">
<option value="">--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="Wideouts: Higher">Revised Higher</option>
<option value="Wideouts: Unchanged">Remains Unchanged</option>
<option value="Wideouts: Lower">Revised Lower</option>
</select>

<br />
<div class="fc">QBs:</div>
<select name="qbs" onchange="showUser(this.value)">
<option value="">--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="QBs: beat">Above Analyst Estimates</option>
<option value="QBs: inline">Inline with Analyst Estimates</option>
<option value="QBs: miss">Below Analyst Estimates</option>
</select>

<br />
<div class="fc">Football:</div>
<select name="football" onchange="showUser(this.value)">
<option value="">--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="Football: beat">Above Analyst Estimates</option>
<option value="Football: inline">Inline with Analyst Estimates</option>
<option value="Football: miss">Below Analyst Estimates</option>
</select>

<br />
<div class="fc">Sentiment:</div>
<select name="sentiment" onchange="showUser(this.value)">
<option value="">--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="Sentiment: good">Good</option>
<option value="Sentiment: neutral">Neutral</option>
<option value="Sentiment: bad">Bad</option>
</select>
	<div class="searchbutton">
	<input type="button" value="Search Draft" />
	</div>
</form>

Problem Getting Form To Work In Ff

Similar Tutorials

Hi guys I'm having trouble with my javascript coding. The form works fine in IE but does not work in firefox I've been pulling my hair out overt his for the last hour and can't figure it out.

Code:

<script type="text/javascript">

<!--

function validate_form ( )
{
	valid = true;

        if ( document.getElementById.rego_form.First_name.value == "" )
        {
        	//Alert the user to
                alert ( "Please fill in your first name." );
                valid = false;
        }

        if ( document.getElementById.rego_form.Last_name.value == "" )
        {
        	//Alert the user to
                alert ( "Please fill in your last name." );
                valid = false;
        }
		//Check Age 
		if (parseInt(document.getElementById.rego_form.Age.value) < 16 || parseInt(document.rego_form.Age.value) > 90)
		{
			//Alert the user to
			alert ("Please enter an age between 16 and 90");

		return false;
}
        

        return valid;

}

//-->

</script>

This is the fields I would like them to enter into but when I do this in IE you can't click on the top 3 fields to enter data
Code:

<form name="rego_form" method="post" action=""
onSubmit="return validate_form ( );">

<h1>Please Fill Out Your Details Below</h1>

<p>Email: <input type="text" name="Email"></p>

<p>First Name: <input type="text" name="First_name"></p>

<p>Surame: <input type="text" name="Last_name"></p>

<p>Age: <input type="text" name="Age"></p>

<p>Address: <input type="text" name="Address"></p>

<p>City: <input type="text" name="City"></p>

<p>City: <input type="text" name="City"></p>

<p><input type="submit" name="send" value="Send Details"></p>

</form>

Any help would be greatly appreciated!

How Come This Form Validation Wont Work

Similar Tutorials

Hi guys..

I cant figure out why the validation wont work on the form..

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cork Discos Mailing List</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/form_validation.js"></script>
</head>

<body>

    <div id="wrapper">

      <div id="star1">
      <div id="star2">
      <div id="star3">
      <div id="star4">
      <div id="header">
        <h1>Cork Discos Texting Service</h1>
      </div>
      <div id="content">

                            <form name="frm" action="index.html" method="POST" onsubmit="return validateForm()">
                            <table width="100%" border="0" cellspacing="2" cellpadding="3"  class="mainForm">
                                <tr>
                                <td class="normalText" align="left" style="padding:0px 0px 0px 33px">
                                    <table border="0" cellspacing="3" cellpadding="2">
                                        <tr>
                                            <td class="normalHeading" colspan="2" style="padding-bottom:6px">

                                                <div id="error_msg" class="txtErrorMsg" align="center"></div>

                                            </td>
                                        </tr>
                                        <tr >
                                            <td class="normalText" width="30%">First Name</td>
                                            <td><input type="text" name="firstName" id="firstName"  class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Last Name</td>
                                            <td><input type="text" name="lastName" id="lastName" class="input1" style="width:195px" maxlength="10"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Mobile</td>
                                            <td><input type="text" name="mobile"  id="mobile" class="input1"  style="width:195px" maxlength="10" onkeypress="return fnIsIntNumber(event,this);"/></td>
                                        </tr>
                                        <tr>
                                            <td class="normalText">Email</td>
                                            <td><input type="text" name="email" id="email" class="input1"  style="width:195px" onblur="IsEmail(this.vlaue)"/></td>
                                        </tr>
                                    
                                            <tr>
                                            <td class="normalText">Comments</td>
                                            <td>
                                                <textarea name="comments" id="comments" cols="22" rows="3" ></textarea>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="normalText"> </td>
                                            <td valign="middle"><input class="send" type="image" value="submit" src="images/submit.gif" name="submit"/></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        </form>

      </div>
      </div>
      </div>
      </div>
    </div>

  </div>

</body>
</html>

Here is the js

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('#comments').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;
            }
            if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Correct Email';
                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 Correct Mobile Number';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }


            if(comment.length < 10){
                error = 'Please Enter A Comment More Than 10 Characters';
                j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    }

Can anybody figure it out.. im trying it all morning

Form Button To Work With Enter Key

Similar Tutorials

Hi I have a form setup so that when you enter something in a text field and click a button it checks to see if the value entered in the text field is the "correct" letter and if its right it changes the CSS property of a div container to be shown which then has a link to a the next question. So I don't really have a submit button because my form isn't setup to work with one. This is fine by me but the only problem is when you enter a letter and click enter it acts as a submit and the submit does nothing, which is what it's suppose to do.

So what I'm asking is how can I get that button to respond to an enter instead of the default submit taking over the enter key?

Form Validation Doesn't Work In Ff

Similar Tutorials

Hi, doing form validation at college just now. The lecturer gave all of us this following example. But it doesn't seem to work in firefox. I have tried my own scripts and they seem to work so have no idea whats happening!

Code:

<html>
<head>
<title>Javascript validation program  - limits field length and content</title>
<script type="text/javascript">

function ValidateForm()
{
var msg='';
if(document.getElementById('CC').value=='')
  {
	msg+='- Please enter CC\n\n';
  }
else
// Now test if CC is purely 2 capital letters...

  {
   var CC=RTrim(document.getElementById('CC').value);
// alert(CC);
   if (CC.length==2)
   {
      if (isCHAR(CC)==false) 
      {
       msg+=' - CC not solely 2 capital letters \n\n';
      }
   }
   else
       msg+=' - CC not 2 letters in length \n\n';
  }

if(document.getElementById('NNNNNN').value=='')
 {
	msg+='- Please enter NNNNNN \n\n';
  }
else
  {
// Now test if NNNNNN is purely 6 digits...

   var NIdigits=RTrim(document.getElementById('NNNNNN').value);
   if (NIdigits.length==6)
   {
   if (isInteger(NIdigits)==false) 
   {
       msg+=' - NNNNNN not solely digits \n\n';
   }
}
else
   msg+=' - NNNNNN not 6 digits in length\n\n';
   }
   
// Lastly check if the last field contains only 1 char
   
if(document.getElementById('C').value=='')
 {
	msg+='- Please enter C \n\n';

 }
else
// Now test if C is a single letter...

  {
   var C=RTrim(document.getElementById('C').value);

  if (C.length==1)
   { 
   if (isCHAR(C)==false)
   {
       msg+=' - C not a capital letter \n\n';
   }
   }
   else
   msg+=' C not 1 character in length';
   }
// alert(msg);
if(msg!='')
  {
//alert('Here...');  
  alert('The following fields are empty and/or invalid:\n\n'+msg);
	return false
  }
else
  {
	return true 
  }
}

function RTrim(str){
	if (str==null){return null;}
	for(var i=str.length-1;str.charAt(i)==" ";i--);
	return str.substring(0,i+1);
	}
	
//-------------------------------------------------------------------
// isBlank(value)
//   Returns true if value only contains spaces
//-------------------------------------------------------------------
function isBlank(val){
	if(val==null){return true;}
	for(var i=0;i<val.length;i++) {
		if ((val.charAt(i)!=' ')&&(val.charAt(i)!="\t")&&(val.charAt(i)!="\n")&&(val.charAt(i)!="\r")){return false;}
		}
	return true;
	}

//-------------------------------------------------------------------
// isInteger(value)
//   Returns true if value contains all digits
//-------------------------------------------------------------------
function isInteger(val){
	if (isBlank(val)){return false;}
	for(var i=0;i<val.length;i++){
		if(!isDigit(val.charAt(i))){return false;}
		}
	return true;
	}
//-------------------------------------------------------------------
// isCHAR(value)
//   Returns true if value contains all CHARS
//-------------------------------------------------------------------
function isCHAR(val){
	if (isBlank(val)){return false;}
	for(var i=0;i<val.length;i++){
		if(!isCAPlet(val.charAt(i))){return false;}
		}
	return true;
	}
//-------------------------------------------------------------------
// isDigit(value)
//   Returns true if value is a 1-character digit
//-------------------------------------------------------------------
function isDigit(num) {
	if (num.length>1){return false;}
	var string="1234567890";
	if (string.indexOf(num)!=-1){return true;}
	return false;
	}

//-------------------------------------------------------------------
// isCAPlet(value)
//   Returns true if value is a 1-character letter
//-------------------------------------------------------------------
function isCAPlet(num) {
	if (num.length>1){return false;}
	var string="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	if (string.indexOf(num)!=-1){return true;}
	return false;
	}
</script>

</head>

<body bgcolor="#FFFFFF">

<form action='http://10.205.3.202/Valid.php' method='POST'  onsubmit='return ValidateForm();'>



<H1>Validate NI No</H1>


<p>

NI-No    :

<INPUT TYPE="text" id='CC' NAME="CC" SIZE='2' maxlength='2' >
-


<INPUT TYPE="text" id='"NNNNNN"' NAME="NNNNNN" SIZE='6' maxlength='6' >

<INPUT TYPE="text" id='C' NAME="C" SIZE='1' maxlength='1'>

<p>

<INPUT  TYPE="submit" id='Process' value="Process" name="submit">



</form>

</body>
</html>

Any help would be great.

Document.form.submit Does Not Work After Sometime!

Similar Tutorials

How To Work On Indexed Form Fields With Js?

Similar Tutorials

Does Document.getelementbyid Work With Form Elements

Similar Tutorials

I wanted to know if document.getElementById works while accessing form elements.
I tried doing this just for testing purposes

This code doesnt work
function validateForm()
{
var val = document.getElementById("id_login").getAttribute("value");
alert(val);
return false;
}

but this does
function validateForm()
{
alert(document.myForm.text_login.value );
return false;
}

Why doesnt document.getElementByid work with form objects.it works with all non form HTML objects..

Validation Form Does Not Seem To Work. Boolean Or Variable?

Similar Tutorials

Hello fellow programmers,

I am having some trouble with my javascript doing what I want it to, which is returning values (true/false || 1/0).

I haven't used much javasript but I am experienced with C#, Java, Python etc so this is sort of new to me syntax wise.

Here is what I have so far:
http://jsfiddle.net/HpSyJ/1/

note: for some reason css doesn't like jsfiddle :S, the error messages are hidden in my Notepad++ & firefox combo though

Really all I want is when I hit submit, it runs an alert or changes the error message to visible.

Can someone please have a quick read over and see if anything jumps out at them?

Thanks in advance, Andrew

Dynamic Creation Of Form Element Name/id Properties Doesn't Work In Ie

Similar Tutorials

Hi!
I have encountered a problem with IE that I'm simply unable to solve. I have a form where the user can choose different things to input from a drop down list and depending on the choise, different kinds of textboxes of text areas etc. are loaded onto the page with JS. After the user has finished inputing text and submits the form, I read the input with PHP and process it further. Now, this works perfectly in firefox but IE doesn't seem to add the name properties to the elements (both textboxes and text areas) because PHP cannot find them and no info is printed from the input. The creation of the elements (adding them to the page...) works just fine, it's just getting the data from them that's the problem. Since it works in FF I know it's not a PHP problem. I've used the recommended .name to set the property (although I've also tried .setAttribute() etc), yet it still doesn't work. What can I do to solve this?

My relevant JS code:

Code:

function addTextbox(idName, head)
{
var target = document.getElementById('addThings');

var newDiv = document.createElement("div");
newDiv.id = "container"; 
newDiv.name = "container"; 
newDiv.setAttribute("className", "intNew"); //IE
newDiv.setAttribute("class", "intNew"); //FF

var newTextbox = document.createElement("input");
newTextbox.type = "text";
newTextbox.id = idName; //--
newTextbox.name = idName; //Doesn't work in IE?.. 
newTextbox.setAttribute("className", "newWidth"); //IE
newTextbox.setAttribute("class", "newWidth"); //FF

var text = document.createTextNode(head + ":"); 

target.appendChild(newDiv);
newDiv.appendChild(text);
newDiv.innerHTML += "<br />";
newDiv.appendChild(newTextbox);
newDiv.innerHTML += "<p />";

}

(The text area function is the same, more or less)

The PHP code, if anyone's interested:

Code:

if($_POST['createBtn'])
{
$head = $_POST['head']; //1
$intro = $_POST['intro']; //2
$question = $_POST['question']; //3
$answer = $_POST['answer']; //3
$image = $_POST['image']; //?
$author = $_POST['author']; //5
$end = $_POST['end']; //4
//sammanfattning

printHTMLTop(9);

$today = date('Y-m-d');

$text = <<<END
<div class="intContainer">
<div class="intHeadRow"><b>$head &nbsp;</b></div>
<div class="stpdIEContainer">
<div class="intTextContainer">
<p />
$intro
<p />
END;

if($question != "" && answer != "")
{
foreach($question as $k)
{
$text .= $k . "<p />";

foreach($answer as $j)
{
$text .= $j . "<p />";
}

}
}

$text .= <<<END
<p />
$end
<p />
<i>Skrivet av: $author den $today</i>
</div> <!-- intTextContainer -->
<div class="intImgContainer">&nbsp;</div></div> <!-- stpdIEContainer -->
</div> <!-- intContainer -->

END;

//Prints to new file (on server) 
$file = file_put_contents('interviews/interview01.html', $text); //Set name
//Add to DB

//print newly created file
$page = file_get_contents('interviews/interview01.html');

echo $page;

printHTMLBottom();

Need Help : Positioned Layers/radio Buttons On Order Form Won't Work :/

Similar Tutorials

Dynamically Adding Form Elements With Javascript Does Not Work Properly In Firefox.

Similar Tutorials

Form Wont Send In Ie7, Validation Wont Work?

Similar Tutorials

Hi Guys,

im using chrome and ff and it worked fine till i tested on ie7 and the form just wont send on ie7. it gives me a validation error msg "SOME VALUES ARE NOT ACCEPTABLE" when i try to submit.

ive tried so many things and i cant figure out why ie7 wont send upon submit like ff does, code seems to be fine, pls see validation coding line 7 - 32 , any jsGURU advice will be much appreciated!

Code:

<?php defined('_JEXEC') or die('Restricted access'); ?>
<?php JHTML::_('behavior.formvalidation'); ?>
<script language="javascript" type="text/javascript">
function submitbutton(pressbutton)
{
	var form = document.adminForm;
	if (pressbutton == 'cancel') {
		submitform( pressbutton );
		return;
	}

	// do field validation
	if (document.getElementById('jformfirstname').value == ""){
		alert( "<?php echo JText::_( 'Firstname is missing.', true ); ?>" );
	} else if (document.getElementById('jformsurname').value == ""){
		alert( "<?php echo JText::_( 'Surname is missing.', true ); ?>" );
	} else if (document.getElementById('jformemail').value == ""){
		alert( "<?php echo JText::_( 'Email is missing.', true ); ?>" );
	} else if (document.getElementById('jformphone1').value == ""){
		alert( "<?php echo JText::_( 'Phone1 is missing.', true ); ?>" );
	} else {
	       if (document.formvalidator.isValid(form)) {
				submitform( pressbutton ); 
        }
        else {
                alert("<?php echo JText::_( 'SOME VALUES ARE NOT ACCEPTABLE.', true ); ?>");
        }

		
	}
}
</script>
<?php if ($this->courseid){ ?>
<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
	<div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
		<?php echo $this->courseDetails->title; ?>
	</div>
<?php endif; ?>
<h3>Course Details</h3>
<table cellSpacing=0 cellPadding=5 width="90%" border=0>
   <tr>
      <td width="20%"><?php echo JText::_( 'Course Title' ); ?>:</td>
      <td width="30%"><?php echo $this->courseDetails->title;?></td>
      <td width="20%"><?php echo JText::_( 'Code' ); ?>:</td>
      <td width="30%"><?php echo $this->courseDetails->code;?></td>
   </tr>
  <tr>
<td><?php echo JText::_( 'Price' ); ?>:</td>
      <td><?php echo (number_format($this->courseDetails->price,2));?></td>
     <td><?php echo JText::_( 'No. of Days' ); ?>:</td>
      <td><?php echo $this->courseDetails->capacity;?></td>
   </tr>
   <tr>
<?php if ($_GET['hide'] != 1 ) { ?>
      <td><?php echo JText::_( 'Location' ); ?>:</td>
      <td><?php echo $this->courseDetails->course_location;?></td>

<?php

      }
      else
      {
          echo "<td>&nbsp;</td>";
          echo "<td>&nbsp;</td>";
      }

      ?>
   </tr>


   <tr>
         <?php if ($_GET['hide'] != 1 ) { ?>

     <td><?php echo JText::_( 'Start Date' ); ?>:</td>
     <td><?php echo Date('d-M-y', strtotime($this->courseDetails->start_date));?></td>


      <?php

      }
      else
      {
          echo "<td>&nbsp;</td>";
          echo "<td>&nbsp;</td>";
      }

      ?>
   </tr>

</table>

<?php } ?> 

<?php if ( $this->params->def( 'show_course_sessions', 1 ) && ($this->courseid) ) : ?>
<h3>Sessions</h3>
<table cellSpacing=0 cellPadding=5 width="90%" border=0>
<tr>
   <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Day');  ?>
   </td>
   <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Start Time');  ?>
   </td>
   <td width="20%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Finish Time');  ?>
   </td>
   <td width="10%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Duration');  ?>
   </td>
   <td width="30%" align="center" height="20" class="sectiontableheader<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
      <?php echo JText::_('Location');  ?>
   </td>
</tr>
         <?php
  $k = 0;
  $n=count( $this->course_sessions );
  if ($n > 0){
   for ($i=0, $n; $i < $n; $i++)
   {
      $row = &$this->course_sessions[$i];
      ?>
            <tr>
               <td align="center">
      <?php echo $row->session_day;?> 
               </td> 
               <td align="center">
      <?php echo date('H:i', strtotime($row->start_time));?> 
               </td> 
               <td align="center">
      <?php echo date('H:i', strtotime($row->finish_time));?> 
               </td> 
               <td align="center">
      <?php echo $row->duration;?> 
               </td> 
               <td align="center">
      <?php echo $row->session_location;?> 
               </td> 
            </tr> 
    <?php 
    $k = 1 - $k;
   }
  } else {
  ?> <tr> <td colspan="5"><? echo JText::_( 'There are no sessions for this course' );?></td></tr><?php } ?>
</table>
<?php endif; ?>

<form action="<?php echo $this->action ?>" method="post" name="adminForm" id="adminForm" class="form-validate">
<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
	<div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
		<?php echo $this->escape($this->params->get('page_title')); ?>
	</div>
<?php endif; ?>
<table cellpadding="4" cellspacing="1" border="0" width="100%">
<tr>

	<td width="15%">
		<label for="jformcourseid">
			<?php echo JText::_( 'Course' ); ?>:
		</label>
	</td>
	<td>
		<?php  echo $this->lists['courseid'];?>*
        
	</td>
</tr>
<?php if ($_GET['hide'] == 1 ) { ?>
<tr>
       <td valign="top">
                <label for="jformcity">
                        <?php echo JText::_( 'I want to attend this course here' ); ?>:
                </label>
        </td>
        <td width="80%">


<select class="required" type="text" id="jformcountry" name="jform[country]" value="<?php echo $this->escape($this->booking->country);?>" />*
<option>Choose your Location</option>
<option>Melbourne</option>
<option>Sydney</option>
<option>Auckland</option>
</select>
        </td>
</tr>
<?php

      }


      ?>
<tr>
	<td valign="top">
		<label for="jformfirstname">
			<?php echo JText::_( 'Firstname' ); ?>:
		</label>
	</td>
       <td width="80%">
		<input class="required" type="text" id="jformfirstname" name="jform[firstname]" size="50" maxlength="250" value="<?php echo $this->escape($this->booking->firstname);?>" />*
	</td>
</tr>
<tr>
	<td valign="top">
		<label for="jformsurname">
			<?php echo JText::_( 'Surname' ); ?>:
		</label>
	</td>
	<td valign="top">
		<input class="required" type="text" id="jformsurname" name="jform[surname]" size="50" maxlength="250" value="<?php echo $this->escape($this->booking->surname);?>" />*
	</td>
</tr>
<?php if($this->userid > 0) { ?>
<tr>
	<td valign="top">
		<label for="jformusername">
			<?php echo JText::_( 'Username' ); ?>:
		</label>
	</td>
	<td width="80%">
    
		<input class="required" type="text" id="jformusername" name="jform[username]" size="50" maxlength="100" value="<?php echo $this->escape($this->username);?>" READONLY/>* 
	</td>
</tr>
<?php } ?>

<tr>
	<td valign="top">
		<label for="jformdepartment">
			<?php echo JText::_( 'Company' ); ?>:
		</label>
	</td>
	<td width="80%">
		<input class="inputbox" type="text" id="jformdepartment" name="jform[department]" size="50" maxlength="30" value="<?php echo $this->escape($this->booking->department);?>" />
	</td>
</tr>


<tr>
	<td valign="top">
		<label for="jformemail">
			<?php echo JText::_( 'Email' ); ?>:
		</label>
	</td>
	<td width="80%">
		<input class="validate-email" type="text" id="jformemail" name="jform[email]" size="50" maxlength="100" value="<?php echo $this->escape($this->email);?>"/>*
	</td>
</tr>
<tr>
	<td valign="top">
		<label for="jformphone1">
			<?php echo JText::_( 'Phone Number' ); ?>:
		</label>
	</td>
	<td width="80%">
		<input class="required" type="text" id="jformphone1" name="jform[phone1]" size="50" maxlength="20" value="<?php echo $this->escape($this->booking->phone1);?>" />*
	</td>
</tr>

<tr>
        <td valign="top">
                <label for="jformcity">
                        <?php echo JText::_( 'Locations' ); ?>:
                </label>
        </td>
        <td width="80%">

<select type="text" id="jformcity" name="jform[city]" value="<?php echo $this->escape($this->booking->city);?>" />
<option>Choose your Location</option>
<option>Melbourne</option>
<option>Sydney</option>
<option>Auckland</option>
</select>
        </td>
</tr>
<tr>
        <td valign="top">
                <label for="jforminstitution">
                        <?php echo JText::_( 'Referral Source' ); ?>:
                </label>
        </td>
        <td width="80%">

<select type="text" id="jforminstitution" name="jform[institution]" value="<?php echo $this->escape($this->booking->institution);?>" />
<option>How did you find out about us?</option>
<option>Search Engine</option>
<option>Friends</option>
<option>Others</option>

</select>
        </td>
</tr>




<tr>
	<td valign="top">
		<label for="jformdescription">
			<?php echo JText::_( 'Comments' ); ?>:
		</label>
	</td>
	<td>
		<textarea class="inputbox" cols="47" rows="6" id="jformdescription" name="jform[description]"><?php echo $this->escape( $this->booking->description);?></textarea>
	</td>
</tr>
</table>

<div>
	<button type="button" class="button validate" onclick="submitbutton('save')">
		<?php echo JText::_('Save') ?>
	</button>
	<button type="button" onclick="submitbutton('cancel')">
		<?php echo JText::_('Cancel') ?>
	</button>
</div>

	<input type="hidden" name="jform[id]" value="<?php echo $this->booking->id; ?>" />
	<input type="hidden" name="jform[ordering]" value="<?php echo $this->booking->ordering; ?>" />
	<input type="hidden" name="jform[approved]" value="<?php echo $this->booking->approved; ?>" />
	<input type="hidden" name="jform[userid]" value="<?php echo $this->userid; ?>" />
	<input type="hidden" name="option" value="com_courseman" />
	<input type="hidden" name="controller" value="booking" />
	<input type="hidden" name="task" value="" />
	<?php echo JHTML::_( 'form.token' ); ?>
</form>
</br>
Fields marked with an asterisk (*) are required.
</br>
</br>

Fade Script Work Work On Ie 7

Similar Tutorials

Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here.

Code:

function fade(obj, duration, toggle) {
	steps = 1000;
	elem = document.getElementById(obj);
		
	function fadeIn() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ i +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
		}
	}
	
	function fadeOut() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
		}
	}
	
	/* One for Fade in and anything will be fade out*/
	if(toggle == 1) {
	fadeIn();
	}
	else {
	fadeOut();
	}
	
}

Thanks,
Jon W

Jquery Realtime Order Form - Change Form Elements Depending On Selection

Similar Tutorials

Hello

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
http://www.watphotos.com/introductio...otography.html

And here is the code in question:

Code:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

I have two questions...

Question 1
How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2
The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

Thanks in advance!

Client Side Javascript Form Validation (uses Ajax) - Form Won't Submit, Help!

Similar Tutorials

I've literally tried everything. Read 26 tutorials, interchanged code, etc.

My validation functions all work. My AJAX functions work (tested manually using servlet URL's).

The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes.

I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return.

html form:
Code:

<form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
        <table cellspacing="5" style="border: 2px solid black;">
            <tr>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td>*First name</td>
                            <td align="right"><span id="valid_one"></span></td>

                            <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Last name</td>
                            <td align="right"><span id="valid_two"></span></td>

                            <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Email address</td>
                            <td align="right"><span id="result"></span></td>

                            <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Phone number</td>
                            <td align="right"><span id="valid_three"></span></td>

                            <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
                        </tr>
                        <tr>
                            <td align="left">*City/Town</td>
                            <td align="right"><span id="valid_four"></span></td>

                            <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <select name="s">
                                    <option value="AL">Alabama
                                    <option value="AK">Alaska
                                    <option value="AZ">Arizona
                                    <option value="AR">Arkansas
                                    <option value="CA">California
                                    <option value="CO">Colorado
                                    <option value="CT">Connecticut
                                    <option value="DE">Delaware
                                    <option value="FL">Florida
                                    <option value="GA">Georgia
                                    <option value="HI">Hawaii
                                    <option value="ID">Idaho
                                    <option value="IL">Illinois
                                    <option value="IN">Indiana
                                    <option value="IA">Iowa
                                    <option value="KS">Kansas
                                    <option value="KY">Kentucky
                                    <option value="LA">Louisiana
                                    <option value="ME">Maine
                                    <option value="MD">Maryland
                                    <option value="MA">Massachusetts
                                    <option value="MI">Michigan
                                    <option value="MN">Minnesota
                                    <option value="MS">Mississippi
                                    <option value="MO">Missouri
                                    <option value="MT">Montana
                                    <option value="NE">Nebraska
                                    <option value="NV">Nevada
                                    <option value="NH">New Hampshire
                                    <option value="NJ">New Jersey
                                    <option value="NM">New Mexico
                                    <option value="NY">New York
                                    <option value="MC">North Carolina
                                    <option value="ND">North Dakota
                                    <option value="OH">Ohio
                                    <option value="OK">Oklahoma
                                    <option value="OR">Oregon
                                    <option value="PA">Pennsylvania
                                    <option value="RI">Rhode Island
                                    <option value="SC">South Carolina
                                    <option value="SD">South Dakota
                                    <option value="TN">Tennessee
                                    <option value="TX">Texas
                                    <option value="UT">Utah
                                    <option value="VT">Vermont
                                    <option value="VA">Virginia
                                    <option value="WA">Washington
                                    <option value="WV">West Virginia
                                    <option value="WI">Wisconsin
                                    <option value="WY">Wyoming
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><span id="error"></span></td>
                        </tr>
                        <tr>
                            <td valign="top">*Anti-Spam Verification</td>
                            <td></td>
                            <td id="reCaptcha"></td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td align="left">*Affiliation</td>
                            <td align="right"><span id="valid_five"></span></td>

                            <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Research Area:</td>
                            <td align="right"><span id="valid_six"></span></td>

                            <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
                        </tr>
                        <tr>
                            <td valign="top" align="left">*Research Overview</td>
                            <td align="right"><span id="valid_seven"></span></td>

                            <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
                        </tr>
                        <tr>
                            <td align="left">*Talk Availability</td>
                            <td></td>
                            <td>
                                <input type="radio" name="ta" value="In person">In person
                                <input type="radio" name="ta" value="Online">Online
                                <input type="radio" name="ta" value="Both" checked>Both
                            </td>
                        </tr>
                        <tr>
                            <td align="left" valign="top">Links</td>
                            <td></td>
                            <td>
                                <table id="linkTable" border="0">
                                    <td><input type="text" style="width: 320px;" name="link"></td>
                                    <td><div id="result"></div></td>
                                </table>
                            </td>
                            <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><span style="color: red;"></span></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <br />
        <input type="submit" id="submit" name="submit" value="Submit Form">
    </form>

Javascript file:
Code:

/* 
 * script.js - ajax and table functions
 */

var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions

var validAjax = new Boolean();
var validCaptcha = new Boolean();

var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();

function init() {
    showRecaptcha('reCaptcha');

    // Separate booleans for AJAX funcs
    validAjax = false;
    validCaptcha = false;

    // Booleanse for fields that don't require servlet validation
    valid_one = false;
    valid_two = false;
    valid_three = false;
    valid_four = false;
    valid_five = false;
    valid_six = false;
    valid_seven = false;
}

function showRecaptcha(element) {
    Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}

function validate_form() {
    if (valid_one && valid_two && valid_three && valid_four && validEmail) {
        startCaptchaRequest();

        if (validCaptcha) {
            return true;
        }
    }
    else {
        alert("Submission contains errors. Please fill out all required fields before submitting.");
        return false;
    }
}

function validate_one() {
    if (document.getElementById("fn").value == 0) {
        valid_one = false;
        document.getElementById("valid_one").innerHTML = "No";
    }
    else {
        valid_one = true;
        document.getElementById("valid_one").innerHTML = "";
    }
}

function validate_two() {
    if (document.getElementById("ln").value == 0) {
        valid_two = false;
        document.getElementById("valid_two").innerHTML = "No";
    }
    else {
        valid_two = true;
        document.getElementById("valid_two").innerHTML = "";
    }
}

function validate_three() {
    if (document.getElementById("pn").value == 0) {
        valid_three = false;
        document.getElementById("valid_three").innerHTML = "No";
    }
    else {
        valid_three = true;
        document.getElementById("valid_three").innerHTML = "";
    }
}

function validate_four() {
    if (document.getElementById("c").value == 0) {
        valid_four = false;
        document.getElementById("valid_four").innerHTML = "No";
    }
    else {
        valid_four = true;
        document.getElementById("valid_four").innerHTML = "";
    }
}

function validate_five() {
    if (document.getElementById("affl").value == 0) {
        valid_five = false;
        document.getElementById("valid_five").innerHTML = "No";
    }
    else {
        valid_five = true;
        document.getElementById("valid_five").innerHTML = "";
    }
}
//
//function validate_six() {
//    if (document.getElementById("ra").value == 0) {
//        valid_six = false;
//        document.getElementById("valid_six").innerHTML = "No";
//    }
//    else {
//        valid_six = true;
//        document.getElementById("valid_six").innerHTML = "";
//    }
//}
//
//function validate_seven() {
//    if (document.getElementById("ro").value == 0) {
//        valid_seven = false;
//        document.getElementById("valid_seven").innerHTML = "No";
//    }
//    else {
//        valid_seven = true;
//        document.getElementById("valid_seven").innerHTML = "";
//    }
//}

function addLink(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell = row.insertCell(0);
    var element1 = document.createElement("input");

    element1.type = "text";
    element1.name = "link" + rowCount;
    element1.style.width = "320px";

    cell.appendChild(element1);
}

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else {
        limitCount.value = limitNum - limitField.value.length;
    }
}

function createXmlHttpRequest() {
    if(window.ActiveXObject) {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp=new XMLHttpRequest();
    }
}

function startRequest() {
    createXmlHttpRequest();
    
    var param1 = document.getElementById('mailfield').value;

    if (param1 == "") {
        validEmail = false;
        document.getElementById("result").innerHTML = "Blank";
    }
    else {
        xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.send(null);
    }
}

function handleStateChange() {
    if(xmlHttp.readyState==4) {
        if(xmlHttp.status==200) {
            var message =
                xmlHttp.responseXML
                .getElementsByTagName("valid")[0]
                .childNodes[0].nodeValue;
            
            if (message == "Unregistered") {
                validEmail = true;
                document.getElementById("result").style.color = "green";
            }
            else {
                validEmail = false;
                document.getElementById("result").style.color = "red";
            }

            document.getElementById("result").innerHTML = message;
        }
        else {
            alert("Error checking e-mail address - " + xmlHttp.status +
                " : " + xmlHttp.statusText);
        }
    }
}
function createCaptchaRequest() {
    if(window.ActiveXObject) {
        xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp2=new XMLHttpRequest();
    }
}

function startCaptchaRequest() {
    alert('made it to captcha requeswt');
    createCaptchaRequest();

    var param1 = Recaptcha.get_challenge();
    var param2 = Recaptcha.get_response();

    xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
    xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
    xmlHttp2.send(null);
}

function handleStateChangeCaptcha() {
    if(xmlHttp2.readyState==4) {
        if(xmlHttp2.status==200) {
            var message =
                xmlHttp2.responseXML
                .getElementsByTagName("result")[0]
                .childNodes[0].nodeValue;

            if (message == "Valid") {
                alert("captcha valid");
                validCaptcha = true;
            }
            else {
                document.getElementById("error").innerHTML = message;
                validCaptcha = false;
            }
        }
        else {
            alert("Error checking captcha validity - " + xmlHttp2.status +
                " : " + xmlHttp2.statusText);
        }
    }
}

Multistep Form Validation Issues - Form Submits Too Early

Similar Tutorials

Hello all,

I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed.

I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution.

Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go).

Cheers!
-Dave

The Javascript:
Code:

$(function validateForm(){
		
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'email',
			'phone'  :  '(555) 123-4567',
			'other'  :  'other',
			'detail'  :  'project overview'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
    $('input#phone').inputfocus({ value: field_values['phone'] });
	$('input#other').inputfocus({ value: field_values['other'] });
	$('input#detail').inputfocus({ value: field_values['detail'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){  });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields1 = $('#first_step input[type=text]');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });        
        
        if(error <= 0) {   
                //update progress bar
                $('#progress_text').html('25% Complete');
                $('#progress').css('width','85px');
                
                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();                 
        } else 
			return false;
    });

	$('#back_second').click(function(){

                //update progress bar
                $('#progress_text').html('0% Complete');
                $('#progress').css('width','0px');
                
                //slide steps
                $('#second_step').slideUp();
                $('#first_step').slideDown();     

    });

    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');
 
        var fields2 = $('#second_step input[textarea]');
        var error = 0;
        fields2.each(function(){
			var value = $(this).val();
			
            if( value.length<5 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }	
		});	
		
        if(error <= 0) { 
                //update progress bar
                $('#progress_text').html('50% Complete');
                $('#progress').css('width','170px');
                
                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();     
        } else 
			return false;

    });

	$('#back_third').click(function(){

                //update progress bar
                $('#progress_text').html('25% Complete');
                $('#progress').css('width','85px');
                
                //slide steps
                $('#third_step').slideUp();
                $('#second_step').slideDown();     

    });

    $('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('75% Complete');
        $('#progress').css('width','255px');

        //prepare the fourth step
		var fields3 = new Array(
			$('#time').val(),  
			$('#budget').val()             
        );
		var fields2half = new Array(
			$('#detail').val()
		);
		var fields2 = new Array(
            $('#other').val(),   
			$('#pages').val()		
		);	

		var fields1 = new Array(
            $('#name').val(),
            $('#email').val(),
            $('#phone').val(),
            $('#contact').val(),
            $('#url').val()
		);
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
			$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
			$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
			$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
        });
                
        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();            
    });

	$('#back_fourth').click(function(){

                //update progress bar
                $('#progress_text').html('50% Complete');
                $('#progress').css('width','170px');
                
                //slide steps
                $('#fourth_step').slideUp();
                $('#third_step').slideDown();     

    });

    $('#submit_fourth').click(function(){
        //send information to server

		        //update progress bar
                $('#progress_text').html('100% Complete');
                $('#progress').css('width','339px');
                
                //slide steps
                $('#fifth_step').slideUp();
                $('#fourth_step').slideDown(); 
				
		if(error <= 0) {        	
        	return true
    	}
    	else{
    		return false
    	}
				  
    });

});

Need Javascript To Check A Form And Trigger A Hidden Form To Become Visible.

Similar Tutorials

Javascript Validation Not Working With Form Of Multipart/form-data

Similar Tutorials

Hi guys,

Been stuck for a few days with this scenario.
Any help?
The alert box appears on an error.
But the submitting won't stop.
The details are submitted and the form is processed.
Any help is greatly appreciated...

Code:

    <html>
    <head>
    <script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
        tinyMCE.init({
            // General options
            mode : "textareas",
            theme : "simple"
        });
    </script>
    <script language="javascript">
     
    function MM_openBrWindow(theURL,winName,features) {
        window.open(theURL,winName,features);
    }
    function err_check(){
        var email = document.getElementById('to_email').value;
        if(email.length==0){
            alert('Please Enter Email Address');
            return false;
        }
        var AtPos = email.indexOf("@")
        var StopPos = email.lastIndexOf(".")
        if (AtPos == -1 || StopPos == -1) {
            alert("Please Enter Valid Email Address");
            document.getElementById('email').focus();
            return false;
        }
        email = document.getElementById('cc_email').value;
        if(email.length != 0){
            var AtPos = email.indexOf("@")
            var StopPos = email.lastIndexOf(".")
            if (AtPos == -1 || StopPos == -1) {
                alert("Please Enter Valid Email Address");
                document.getElementById('email').focus();
                return false;
            }
        }
        var answer = confirm ("Send E-Mail?");
        if (!answer){
            return false;
        }
    }
    </script>
    <!-- /TinyMCE -->
     
     
    <style type="text/css">
    body, table, td, th{
        background-color:#CCCCCC;
        font-family: Arial;
        font-size:14px;
    }
    .que{
        font-weight:bold;
    }
    </style>
    </head>
    <body>
    <form method="post" enctype="multipart/form-data">
    <?php
    include 'library/database.php';
    include 'library/opendb.php';
    $query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
    $row = mysql_fetch_row($query);
    $from_email = $row[0];
    $from_person = $row[1];
    $from_mobile = $row[2];
    $query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
    $row = mysql_fetch_row($query);
    $cusid = $row[0];
    $query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
    $row = mysql_fetch_row($query);
    $toer = $row[0];
    include 'library/closedb.php';
    ?>
    <table width="100%" border="0">
    <tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
    <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
    <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
    <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
    <tr><td rowspan="1" colspan="2">&nbsp;</td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
    </tr>
    <tr>
    <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
    <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
    <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
     
    <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
    <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments&nbsp;&nbsp;<input id="upload_file" name="upload_file" type="file"/> </td></tr>
     
    <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
        <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
        <?php
         echo "<br><br><br>" . $from_person . "<br>" . $from_mobile; 
          ?>
        </textarea>
    </td></tr>
    </table>
    </form>
    </body>
    </html>