JavaScript - Need Help Adding These Two Functions Together For Form Validation

Hello Everyone,

I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks!

Code:

<form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)">
		<p><b>First Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_first" size="40"></p>

		<p><b>Last Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_last" size="40"></p>

		<p><b>School Name</b><br/>
		<INPUT TYPE="TEXT" NAME="name_school" size="40"></p>

		<p><b>Your School E-Mail</b><font class="super">1</font><br/>
		<INPUT TYPE="TEXT" NAME="school_email" size="40"></p>

		<p><b>Your File</b><font class="super">4,5</font><br/>
		<input id="userfile1" name="userfile1" type="file" size="30"></p>
	
		<p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p>
	</form>

Code:

function validate_required_field(field,alertText) {
	with (field) {
		if (value==null||value=="") {
            YAHOO.example.container.wait.hide();
			alert(alertText);
	  		return false;
		}
		else {
			return true;
		}
	}
}


function validate_email(field,alertText)
{
	with (field) {
		apos=value.indexOf("@");
		dotpos=value.lastIndexOf(".");
		if (apos<1||dotpos-apos<2) {
            YAHOO.example.container.wait.hide();
			alert(alertText);
			return false;
		}
		else {
			return true;
		}
	}
}


function validate_form(thisform) {
	with (thisform) {
		if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) {
			name_first.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) {
			name_last.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) {
			name_school.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) {
			school_email.focus();
			return false
		}
	}
	with (thisform) {
		if (validate_email(school_email,"Please enter a valid email address before continuing")==false) {
			school_email.focus();
			return false
		}
	}
}

Hello all, new here Seems like a very nice place to be apart of.

I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it.

The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem.

I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs.

<problem>
I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location.
<problem>

I would like to keep the JS close to how it is now as I have a library to use this JS over and over again.

Any pointers in the right direction or solutions to my problem would be greatly appreciated.

Thanks! Hopefully it is not to hard huh

If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again!

I would like to start off by saying I know there isn't a sure fire, 100% way to tell if javascript is enabled on a users browser. Because of this, it's a good idea to check form input using a php (or another server-side language) function.

Now, let's say the user DOES have javascript enabled. I would like to check that same form input with a javascript function, instead of a php function.
How would I be able to do that? If both php and javascript functions are in the same script, how does the browser know which one to run and how can I make it run the javascript function if the user has javascript enabled?

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

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>

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

});

I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong?

here is my code so far...
Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok.

Code:

....
<script type="text/javascript">
	window.onload = function() {
		document.forms[0].username.focus();
	}
	function validate(form)
	{
		var form = document.getElementById("reg");
		var e = document.getElementById("error");
		e.style.background = "red";
		
		for(var i = 0; i < form.elements.length; i++)
		{
			var el = form.elements[i];
			if(el.type == "text" || el.type == "password")
			{
				if(el.value == "")
				{
					e.innerHTML = "Please fill in all fields!";
					el.style.border = "1px solid red";
					el.focus();
					return false;
				} else {
					el.style.border = "1px solid green";
					return false;
				}
			}
		}
		var un = form.username;
		un.value = un.value.replace(/^\s+|\s+$/g,"");
		if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
		{
			e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
			un.focus();
			return false;
		}
		var pw = form.password;
		pw.value = pw.value.replace(/^\s+|\s+$/g,"");
		if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
		{
			e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
			pw.focus();
			return false;
		}
		e.innerHTML = "You filled in all the fields, well done!";
		e.style.background = "green";
		return false;
	}
</script>
</head>

<body>
<div id="wrapper">
	<div id="header">
    	<h1>My Cool Website</h1>
    </div>
    <div id="content">
		<div class="padding">
       	  <h2>Registration</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
	    <div id="error"></div>
		<div><label for="username">Username</label></div>
    			<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
		<div><label for="password">Password</label></div>
    			<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
        <div><label for="c_password">Confirm Password</label></div>
                <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
        <div><label for="email">Email address</label></div>
                <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
        <div><label for="c_email">Confirm Email address</label></div>
                <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
        <div><label for="firstname">First name</label></div>
                <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
        <div><label for="surname">Surname</label></div>
                <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
        <div><label for="gender">Gender</label></div>
                <div>
                    <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
                    <div><input type="radio" name="gender" value="f" />Female</div>
                </div>
                <div><input type="submit" value="Register" name="submit" /></div>
          </form>
		</div>
    </div>
    <div id="footer">
    	<p>Copyright &copy; 2009 My Cool Website</p>
    </div>
</div>
</body>
</html>

use in form fields - onBlur="chkalpha(this)"

function chknum(field) {
var valid = "0123456789";
var ok = "yes";
var temp;
for (var i=0; i<field.value.length && ok == "yes"; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") { var ok = "no"; }
}
if (ok == "no") {
alert("Invalid entry! Only numeric data is accepted!");
field.value=""; field.focus();
field.select();
}
}

function chkalpha(field) {
var valid = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ";
var ok = "yes";
var temp;
for (var i=0; i<field.value.length && ok == "yes"; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") { var ok = "no"; }
}
if (ok == "no") {
alert("Invalid entry! Only alphabetic data is accepted!");
field.value=""; field.focus();
field.select();
}
}

function chkalphanum(field) {
var valid = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@_-. ";
var ok = "yes";
var temp;
for (var i=0; i<field.value.length && ok == "yes"; i++) {
temp = "" + field.value.substring(i, i+1);
if (valid.indexOf(temp) == "-1") { var ok = "no"; }
}
if (ok == "no") {
alert("Invalid entry! Only alphanumeric data is accepted!");
field.value=""; field.focus();
field.select();
}
}

I have been working on a JavaScript form with validation and I cant get it to work right. The form is supposed to validate the name, E-mail, Phone number, Password and confirmation, Drop-down selection, Question reply, yes and no radios, and 3 preferences check-boxes. It is also supposed to verify that the passwords match, not allow any letters or special characters in the phone number box, and remove the default text when a user clicks on the Name, E-mail, and Question reply boxes. I've been checking over the code for almost a month now and I can't figure out why it is not working. This is my entire code.

[CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>

<script type="text/javascript">
/* <![CDATA[ */

function onlyDigits(objtextbox)
{
var exp = /[^\d]/g;
objtextbox.value = objtextbox.value.replace(exp,"");
}

function textdisappear(txt)
{
if (txt.value == txt.defaultValue)
{
txt.value = ""
}
function passmatch() {
if (document.forms[0].psswrd2.value
!= document.forms[0].psswrd1.value) {
window.alert("You did not enter the same password!");
document.forms[0].psswrd1.focus();
}
function validate()
{
var name = document.form1.Name;
var email = document.form1.Email;
var phone = document.form1.Telephone;
var question = document.form1.selection;
var reply = document.form1.questionreply
var word1 = document.form1.psswrd1
var word2 = document.form1.psswrd2
var chkradio = false;
var chkbox = false;

if (name.value == "")
{
window.alert("Name please.");
name.focus();
return false;
}

if (email.value == "")
{
window.alert("E-mail is blank.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Enter valid e-mail please.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Enter valid e-mail please.");
email.focus();
return false;
}

if ((phone.value == ""))
{
window.alert("Telephone number please.");
phone.focus();
return false;
}
if (word1.value == "")
{
window.alert("Password please.");
word1.focus();
return false;
}
if (word2.value == "")
{
window.alert("Re-type password please.");
word2.focus();
return false;
}
if (question.selectedIndex < 1)
{
alert("Choose question please.");
question.focus();
return false;

}
if (reply.value == "" || reply.value == "Question reply")
{
window.alert("Question reply please.");
reply.focus();
return false;
}



for (var i=0; i<2; ++i) {

if (document.form1.confirmreply.checked == true) {

chkradio = true;

break;

}

if (chkradio != true) {

window.alert("Yes or no please.");
confirmrelpy.focus();
return false;
}

for (var i=0; i<3; ++i) {

if (document.form1.hobby.checked == true) {

chkbox = true;

break;

}

if (chkbox != true) {

window.alert("Choose preference.");
hobby.focus();
return false;

}

return true;

}




/* ]]> */
</script>
</head>

<body>

<center><h1>Contact</h1></center>
<form method="post" action="mailto:someemail@somedomain.com"
name="form1" onsubmit="return validate();">
<h3>Your Details</h3>
<p>Name:* <input type="text" name="Name" value="Enter Name" onfocus="textdisappear(this)" ></p>
<p>E-mail:* <input type="text" name="Email" value="Enter E-mail" onfocus="textdisappear(this)" ></p>
<p>Phone Number:* <input type="text" name="Telephone" onkeyup="onlyDigits(this)"><br>
<br />

<h3>Password and Secret Question</h3>
Password:<br />
<input type="password" name="psswrd1" value="" />*<br />
Confirm:<br />
<input type="password" name="psswrd2" value="" onblur="passmatch()" />*<br />
<p>Choose a question:*<br />
<select type="text" value="" name="selection">
<option> </option>
<option>Where was your elementary school?</option>
<option>Who was the first person you ever kissed?</option>
<option>What was your first car?</option>
<option>Who is your favorite author?</option>
</select><br />

reply<br />
<input type="text" name="questionreply" value="Question reply" onfocus="textdisappear(this)" />*<br />

<h3>Offers</h3>
Do you want any special offers sent to you?*<br />
Yes<input type="radio" name="confirmreply" value="Yes"/>No<input type="radio" name="confirmreply" value="No" />

<h3>Which preference do you have?*</h3>
<input type="checkbox" name="hobby" value="check"/>Inside Activities<br />
<input type="checkbox" name="hobby" value="check"/>Outside Activities<br />
<input type="checkbox" name="hobby" value="check"/>Both<br />
<br />
<p><input type="submit" value="Submit" name="submit" />
<input type="reset" value="Reset" name="reset"></p>
</form>

</body>
</html>
[CODE]

<?php
session_start();
include_once "../c-library/errorcheck.inc.php";
function viewForm($input,$errors){

//$array[] = $var;

$num_days= array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21 ","22","23","24","25","26","27","28","29","30","31");

$num_months = array(1=>"Jan",2=>"Feb",3=>"Mar",4=>"Apr",5=>"May",6=>"Jun",
7=>"Jul",8=>"Aug",9=>"Sept",10=>"Oct",11=>"Nov",12=>"Dec"
);
$gender = array("Male","Female");



?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register</title>

<script src="reload_vals.js" type="text/javascript"></script>
<style media="all">
table{ table-layout:auto; width:auto;}
th{ text-align:right;}
td #err{ color:#FF0000; font-weight:bold;}
</style>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" >
<h3><font face="Georgia" color="#000066" size="+2">Registeration</font></h3>
<?php
if (count($errors) > 0):

echo "<p style='color:#ff0000'>*The following errors ocurred:</p>";

endif;

?>
<table width="" border="1">
<tr>
<th scope="row">Firstname:</th>
<td><input name="fname" type="text" id="fname" size="28" value="<?php echo htmlentities($input['fname'])?>" /></td>
<td id="err"><?php echo $errors['fname'] ?></td>
</tr>
<tr>
<th scope="row">Lastname:</th>
<td><input name="lname" type="text" id="lname" size="28" value="<?php echo htmlentities($input['lname'])?>" /></td>
<td><?php echo $errors['lname'] ?></td>
</tr>
<tr>
<th scope="row">Date of Birth:</th>
<td>
<select name="days" size="1" id ="days" >
<option value='-------'>--Day--</option>
<?php
/* day starts here*/

(array)$num_days;
foreach ($num_days as $day):
printf("<option value=\"%s\" %s>%s</option>",$day,($days==$day ? "selected='selected'" : ""),
$day);
endforeach;
/* day ends and months start here*/
?>
</select> <select name="" size="1" id ="">
<?php






/* month ends and starts here*/
?>
</select><select name="" size="1" id ="">
<?php

?>
</select>
<br /><small style="text-align:center; color:#006600;">dd-mm-yyy</small> </td>
<td><?php echo $errors['date'] ?></td>
</tr>
<tr>
<th scope="row">Sex:</th>
<td>
<select name="" size="1" id ="">
<?php
/*
Sex selection starts here;*/



/*
Sex selection starts here;
*/
?>
</select></td>
<td><?php echo $errors['sex'] ?></td>
</tr>
<tr>
<th scope="row">Email:</th>
<td><input name="email" type="text" id="email" size="28" value="<?php echo htmlentities($input['email']) ?>"/></td>
<td><?php echo $errors['email'] ?></td>
</tr>
<tr>
<th scope="row">Password:</th>
<td><input name="password" type="password" id="password" size="28" value="<?php echo htmlentities($input['password']) ?>"/></td>
<td><?php echo $errors['password'] ?></td>
</tr>
<tr>
<th scope="row">Comfirm Password:</th>
<td><input name="password2" type="password" id="password2" size="28" value="<?php echo htmlentities($input['password2']) ?>"/></td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">&nbsp;</th>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">I agree:</th>
<td><input name="agree" type="checkbox" id="agree" value="<?php echo $input['agree']='agree'?>" /></td>
<td><?php echo $errors['agree'] ?></td>
</tr>
<tr>
<th scope="row"><input name="action" type="hidden" id="submitted" value="TRUE" /></th>
<td><input name="add_newuser" type="submit" id="submit" value="I accept, Register me" /></td>
<td>&nbsp;</td>
</tr>
</table>


</form>

</body>
</html>
<?php
}
function register_user($input){
include "../c-library/database.inc.php";
//

$input = $_REQUEST;

$input['fname'] = mysql_escape_string(stripslashes($input['fname']));
$input['lname'] = mysql_real_escape_string(stripslashes($input['lname']));

//$input['day']

$input['date'] = $input['year'].''.$input['month'].''.$input['day'];
$input['sex'] = $input['sex'];

$input['email'] = mysql_real_escape_string($input['email']);
$input['password'] = mysql_real_escape_string(md5($input['password']));



$input['uid'] = uniqid(rand(16,32),true);
$qr ="insert into users(id,Firstname,Lastname,Date_of_Birth,Sex,Email,Password,Userid) values('null','$input[fname]','$input[lname]','$input[date]','$input[sex]','$input[email]','$input[password]','$input[uid]')";

$results = mysql_query($qr,$sdayb);
return $results;
mysql_close($sdayb);
echo "thanks";//header("Location: thankyou.html");

}
/*ex. user enters - 19/11/1980

$var = explode('/', '19/11/1980');
$sdayd = $var[0];
$mm = $var[1];
$yyyy = $var[2];
*/

if(isset($_POST['add_newuser'])):

$inputs = $_POST;
$setErrors = array();

if(!check_formerr($inputs, $setErrors)):
viewForm($inputs, $setErrors);
else:
register_user($inputs);
endif;

else:
viewForm(null, null);
endif;


?>

I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is.

Here is the code.

Code:

// BEGIN JAVASCRIPT
$(function(){
	
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'your email',
			'yourmessage'  :  'I would like to inquire about'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
	$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });

    //form validation
    $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
    $('#submit').click(function(){
        //remove classes
        $('#sendamessage 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 = $('#sendamessage input[type=text],#sendamessage textarea');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error'); // css class
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid'); // css class
            }
        });     
        
        if(!error) {
        	// this is where I get confused. How do I make this send the form?
        	alert('Data sent');
    		});
        } 						
    }); 	
});
// END JAVASCRIPT


        <form method="post" action="" onsubmit="return validateForm()" >
			<input type="hidden" name="ccf_customhtml" value="1" />
			<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
			<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
            <input type="hidden" name="required_fields" value="" />

            	<label for="name">Name</label>
            		<input type="text" name="name" id="name" value="your name" /> 
            
            	<label for="email">Email</label>
            		<input type="text" name="email" id="email" value="your email" /> 
            
            	<label for="yourmessage">Your Message</label>
            		<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>

            		<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
        </form>

I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent.

Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page.

Cheers!
-Dave

I am trying to do a custom add to cart to use with paypal and need to utilize javascript to achieve inserting some code or a weight value per the paypal forms' options choice. Here is my dilemma, All of my items have multiple weights, for instance the below example called Aqua Max 100 comes in .5lbs, 1.5lbs., 10lbs., 20lbs., and 50lbs. Paypal allows you to enter weight but it's one weight per item and I would have to create 5 Paypal buttons just for this one item to calculate the different weights per zip code. I need help making javascript insert the following code within the paypal forms' code upon option select before clicking submit?

<input type="hidden" name="weight" value=".5">
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="1.5">
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="10
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="20
<input type="hidden" name="weight_unit" value="lbs">

<input type="hidden" name="weight" value="50
<input type="hidden" name="weight_unit" value="lbs">

The code I came up with is wrong as I'm getting an error but I was originally trying to make it enter a weight using a hidden fillable number and without any real javascript training, just alot of googling but I think I'm pretty close. Please take a look at the code I've came up with so far and maybe point me in the correct direction:

<html>
<body>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<input type="hidden" name="cmd" value="_cart"> <input type="hidden"
name="business" value="test@test.com">
<input type="hidden" name="currency_code" value="USD"> <input type='hidden'text'
name='amt' id='amt' value="0.00"/>
<table>
<tr>
<td>
<input type="text" name="on0" value="Aqua Max 100">Aqua Max 100</td></tr>
<tr><td>
<select name="os0" onChange="getamt()">
<option value="select">Please Select</option>
<option value="1/2 lb.">1/2 lb. $3.99 USD</option>
<option value="1 - 1/2 lbs">1 - 1/2 lbs $7.59 USD</option>
<option value="10 lbs.">10 lbs. $25.80 USD</option>
<option value="20 lbs.">20 lbs. $42.75 USD</option>
<option value="50 lbs.">50 lbs. $86.20 USD</option>
</select></td></tr> </table>
<script type="text/javascript"> function getamt() {
var sh=0;
var choice = document.getElementById("os0").selectedIndex;
if (choice == 0)
{ sh=0; }
if (choice == 1)
{ sh=.5; }
if (choice == 2)
{ sh=1.5; }
if (choice == 3)
{ sh=10; }
if (choice == 4)
{ sh=20 }
if (choice == 5)
{ sh=50.00; }
document.getElementById("on0").value=sh;
}
</script>
<input type="image" src="https://images.paypal.com/images/sc-but-03.gif"
border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img
alt="" border="0"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1"
height="1">
</form>
</body>
</html>

Ill tell you the story and then simplify it

ok i have a computer site that you can build your own computer and whatnot but i just recently thought about how not everyone knows which parts are needed in a computer... my first design of the site had the name of the part in the select box as default but now i removed the name of each part outside of the select boxes but the problem now is i need some type of onLoad event to happen when the page loads to call out the functions that are associated with the selected boxes......

i have 2 fuctions in an external js file
Code:

function swapImage(sel,id){
	document.getElementById(id).src = sel.value.split('#')[1];
}

and

Code:

function Calculate(){
	var a = parseFloat(document.comp.caseselect.value.split('#')[0]);
	var b = parseFloat(document.comp.powersupply.value.split('#')[0]);
	var sum = a+b;
    document.getElementById("total").innerHTML = '$'+sum;
}

when someone selects an item it adds the price to the price of other selected items and shows the total price elsewhere on the page... also shows a picture of the selected item on the page..

im just going to show the first select box to show you how all my select boxes are written

Code:

<p align="left">CASE</p>
					<center>
					<select name="caseselect" style="width:625px" onchange="Calculate(); swapImage(this,'caseimg');">
						<option value="50#COOLER MASTER Elite 310red.jpg" selected="1">COOLER MASTER Elite 310 Red ($50.00)</option>
						<option value="50#COOLER MASTER Elite 310blue.jpg">COOLER MASTER Elite 310 Blue ($50.00)</option>
						<option value="50#COOLER MASTER Elite 310orange.jpg">COOLER MASTER Elite 310 Orange ($50.00)</option>
						<option value="50#COOLER MASTER Elite 310silver.jpg">COOLER MASTER Elite 310 Silver ($50.00)</option>
					</select>

*not that it matters but yes there is an ending center in my html but its at the end of the group

the image is sent here
Code:

<img src="start.jpg" id="caseimg" />

and the price is sent here
Code:

<span style="color:black; font-size:20pt">YOUR PRICE UPDATE</span><br />
			<span id="total" style="color:white; font-size:32pt">$0 Nothing Selected</span>

code works perfectly fine ONCE YOU SELECT SOMETHING ELSE but i need it to work when the page loads

Hello,

I am using a simple form to submit values to another website. This has been working without any problems. I now have added a second form to the page. I have separated the text boxes and duplicated the information from one form to another. The problem is, when I click on the link that use to submit the information, nothing happens. Before the addition of the new form a new window would open with the search that I had submitted. Am I missing something to point to one form or the other? The following is the code that i am using in the form that no longer submits. Thanks in advance for any help.
Code:

<script language="javascript">
function submitPostLink()
{
document.postlink.submit();
}
</script>

<form action="http://wcca.wicourts.gov/simpleCaseSearch.do;jsessionid=61EFDA464D938EB53461CABB6EFC7D3B.renderHTTP/1.1" name="postlink" method="post" target="_blank">
<input type="hidden" name="partyName.lastName" id="ccapLAST">
<input type="hidden" name="partyName.firstName" id="ccapFIRST">
<input type="hidden" name="partyName.middleName" id="ccapMIDDLE">
<input type="hidden" name="partyName.showMissingMiddleNames" value="true">
<input type="hidden" name="recordsPerPage" value="25"><br>
<a onclick="submitPostLink()" href="#" a>SEARCH</a>
</form>

Hi All,

I have created my second Form to File Web Form thanks to some help from other members. Looks great.

I am still new to HTML and Javascript, but basically I took my First Web Form coding (with the Java Script) and manipulated it so that it suited my needs for my 2nd Form (both are very close to being the same).

For some reason, I can't get my Java Script validation to take effect.

I was wondering if some one could try to pin point why it isn't functioning properly? Again it could be the most obvious thing, but please bear with me as I learn.

Just for a little more clarity, I am going to list the things that I have changed to possibly make it easier to pin point:

Added Fields: Department, SteetAddress, CityState
Deleted: State/Research Accounts, Vendor Checkbox
Modified: "Type" which is a radio button that I have changed the choices of.

I beleive that's it...I will post my Java Script here and attach my Index File.

Thank you in advance!!

Code:

/********************************************************************************
 *
 * FORM VALIDATION 
 *
 ********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
    if ( grp.length == null ) return grp.checked ? grp.value : null;
    for ( var g = 0; g < grp.length; ++g )
    {
        if ( grp[g].checked ) return grp[g].value;
    }
    return null;
}
// trim a string
function trim(fld)
{
    var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
    fld.value = val;
    return val;
}
 
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
    var email = trim( fld );
    fld.value = email;
    return echk.test(email);
}
 
var digonly = /[^\d]/g
function formatPhone( fld )
{
    var ph = fld.value.replace( digonly, "" );
    if ( ph.length != 10 ) return;
    fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
 
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
    return phchk.test(fld.value);
}
 
function validateForm( frm )
{
	var oops = "";
    
    if ( trim( frm.elements["Username."] ).length  < 5 )
        oops += "You must enter your first and last name\n";
    if ( ! emailCheck( frm.elements["Email."] ) )
        oops += "That does not appear to be a valid email address\n";
	if ( trim( frm.elements["Department."] ).length  < 3)
        oops += "You must enter your department name\n";
    if ( ! phoneCheck( frm.elements["Phone."] ) )
        oops += "That is not a valid 10-digit phone number\n";
    if ( trim( frm.elements["ShipToBuildingRoom."] ).length  < 5 )
        oops += "You must enter your building and room information\n";
	if ( trim( frm.elements["StreetAddress."] ).length  < 5 )
        oops += "You must enter your street address information\n";
	if ( trim( frm.elements["CityZip."] ).length  < 5 )
        oops += "You must enter your city and zip code information\n";
		apptype = getRBValue( frm.elements["Type."] );
    if ( apptype == null )
        oops += "You must check one class\n";
   
    var app = getRBValue( frm.RequireApprovalYesNo );
    if ( app == null )
        oops += "You must specify whether or not approval is required.\n";
    if ( app == "Yes" )
    {
        if ( trim( frm.Approver ).length < 5 )
            oops += "You must enter the name of the approver\n";
        if ( ! emailCheck( frm.ApprovalEmail ) )
            oops += "The approval email is not a valid email address\n";
    }
   
 }
 
function showapp(yesno)
{
    document.getElementById("APP1").style.display = 
    document.getElementById("APP2").style.display = 
    document.getElementById("APP3").style.display = 
		yesno ? "" : "none";
}
 
</SCRIPT>