Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    My event won't register or perform its task

    Hey I am having trouble getting my javascript code to work. It seems to not register the event or even carry out the code. I have attached my code.

    index.php
    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" />
        <link rel="stylesheet" href="StyleSheet.css" type="text/css" />
    	<script type="text/javascript" src="register.js"></script>
        <title>CollegeStop.com -  Your stop for used college books!</title>
    </head>
    <body>
    <div class="wrapper">
    <div class="logo">Logo goes Here</div>
    <div class="login_bar">
    	<form action="" method="post">
    		<table>
    			<tr>
    				<td>Email:</td>
    				<td><input type="text" name="email"></td>
    				<td>Password:</td>
    				<td><input type="password" name="password"></td>
    				<td><input type="submit" name="login" value="Login"/></td>
    			</tr>
    		</table>
    	</form>
    	<p>Not yet a member? <a href="index.php">Register</p>
    </div>
    <div class="nav_bar">
    	<ul class="menu">
    	<li class="home"><a href="index.php">Home</a></li>
    	<li class="browse"><a href="browse.php">Browse</a></li>
    	<li class="contact"><a href="contact.php">Contact</a></li>
    </div>
    <div class="content_container">
    	<div id="recent">
    		<p>box of recent additions to the site</p>
    	</div>
    	<div id="about_us">
    		<p>Hi and welcome to CollegeStop.com. This is a site dedicated to hopefully getting you a bit of a return
    		on the money you spent on books.</p>
    	</div>
    <div id="registration">
    	<h5>Your password must be atleast six characters in length. Please enter a valid email as 
    	it will be our method to ensure you get an account!</h5>
    	<form id="registration_form" action="" method="post">
    		<table>
    			<tr>
    				<td>First Name:</td>
    				<td><input type="text" id="firstName" name="first_name"/></td>
    			</tr>
    			<tr>
    				<td>Last Name:</td>
    				<td><input type="text" id="lastName" name="last_name"/></td>
    			</tr>
    			<tr>
    				<td>Email:</td>
    				<td><input type="text" id="intEmail" name="email_first"/></td>
    			</tr>
    			<tr>
    				<td>Retype Email:</td>
    				<td><input type="text" id="secEmail" name="email_second"/></td>
    			</tr>
    			<tr>
    				<td>Password:</td>
    				<td><input type="password" id="intPass" name="pass_first"/></td>
    			</tr>
    			<tr>
    				<td>Retype Password:</td>
    				<td><input type="password" id="secPass" name="pass_second"/></td>
    			</tr>
    			<tr>
    				<td><input type="submit" value="Register"/></td>
    				<td><input type="reset" value="Clear Form"/></td>
    			</tr>
    		</table>
    	</form>
        <script type="text/javascript" src="registerR.js">
    	</script>
    	</div>
    </div>
    </div>
    </div>
    <div class="footer"><p>2012 &copy; Hassan Said</p></div>
    </body>
    </html>
    register.js
    Code:
    function checkReg(){
    	var firstName = document.getElementById("firstName");
    	var lastName = document.getElementById("lastName");
    	var intEmail = document.getElementById("intEmail");
    	var secEmail = document.getElementById("secEmail");
    	var intPassw = document.getElementById("intPass");
    	var secPassw = document.getElementById("secPass");
    	
    	if((firstName == "")||(lastName == "")||(intEmail == "")||(secEmail == "")||
    		(intPassw == "")||(secPassw =="")){
    			alert("Please fill in all fields!");
    			firstName.focus();
    			return false;
    		}
    }
    registerR.js
    Code:
    document.getElementById("registration_form").onsubmit = checkRegister;

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    You do not call your checkReg() script.

    Code:
    <td><input type="submit" value="Register" onclick = "checkReg()" /></td>
    You need to get the value of each field:-
    Code:
    var firstName = document.getElementById("firstName").value  ;
    But there are other issues:-

    a) You are using the same name for the Javascript variable and the HTML element. This is strongly deprecated.

    b) Form validation of the pattern if (fieldname.value == "") is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

    c) You say that a password must be at least six characters in length, but I do not see any code to verify that.

    d) If a user fails to fill in a field (correctly or at all) the refocus should be applied to that field, not the first field in the form, which may well have been completed correctly. document.getElementById("firstName").focus();

    e) It is silly and confusing to assign slightly different names and ids to your form fields - "firstName" and "first_name".



    111,111,111 x 111,111,111 = 12,345,678,987,654,321
    Last edited by Philip M; 05-01-2012 at 12:40 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    JavaScriptRooki (05-01-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok thanks for the replies. I shall try as you guys suggested. Note however that I was not done. This was just the first step, I was next going to check if the fields were of a certain length, then check if the email and passswords match, and then submit it to the server.

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok one more question. How do i keep the correct values in the fields. So lets say that first name and last name validate but the passwords don't how can i keep first and last name filled in.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by JavaScriptRooki View Post
    ok one more question. How do i keep the correct values in the fields. So lets say that first name and last name validate but the passwords don't how can i keep first and last name filled in.
    I am not sure that I understand you. The fields (whether they validate correctly or not) are not erased by the validation process.

    It is best to erase any field which fails validation (following a suitable error message) and then place the focus on that field to compel the user to fill it in again.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Lets say that I press the submit and it tells me my emails did not match, the forms removes the data from all the fields. Is that a default behavior of Javascript? Also even if javascript does not validate the form, to proceeds to the page specified by the action part of the form. How do I fix this problem?

    thanks in advance

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    That's because you forgot to use return in your onsubmit.

    Code:
    <form action="" method="post" onsubmit="return checkReg()">
    If you want to add the onsubmit programmatically, then you would need to use
    Code:
    document.forms[0].onsubmit = function() { return checkReg(); };
    If you simply do
    Code:
    document.forms[0].onsubmit = checkReg;
    then that does *NOT* prevent the submit from happening even if checkReg returns false.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Same applies, by the by, if you opt to attach the validation to the <input type=submit> button.
    Code:
    <input type="submit" value="Register" onclick = "return checkReg()" />
    Without the return, the submit takes place regardless.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    iBall clearly missed the fact that your Javascript checkReg function *is* returning true/false.

    And then he missed the way you are assigning the checkReg function *to* the onsubmit. To wit, using
    Code:
    document.getElementById("registration_form").onsubmit = checkReg; // minor corretion
    So he missed the root cause of your problem.

    However, I do agree with him that it would be better to use things like changing answers to red text (or maybe, better, changing the form field's background color...in case there was no answer at all) so that you can indicate all errors in one go. It really is clumsy to give one error message at a time. And you really should avoid using alert() as modern browsers are beginning to give users ways to turn off the alerts.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New to the CF scene
    Join Date
    May 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi again guys and girls. The help you gave me last time actually worked very well so thanks. I have another issue I am having. I have a 9 drop down menus, 8 of which I would like to hide until a choice is made in the first dropdown menu. I have attached the html, and javascript file

    Code:
    function checkChoice(){
    	var main = document.getElementById("main_cat");
    	var arts = document.getElementById("Arts");
    	var auto = document.getElementById("Auto");
    	var books = document.getElementById("Books");
    	var electronics = document.getElementById("Electronics");
    	var general = document.getElementById("General");
    	var pets = document.getElementById("Pets");
    	var jobs = document.getElementById("Jobs");
    	var community = document.getElementById("Community");
    	
    		arts.stytle.visibility = "hidden";
    		auto.stytle.visibility = "hidden";	
    		books.stytle.visibility = "hidden";	
    		electronics.stytle.visibility = "hidden";	
    		general.stytle.visibility = "hidden";	
    		pets.stytle.visibility = "hidden";	
    		jobs.stytle.visibility = "hidden";	
    		community.stytle.visibility = "hidden";	
    
    	if(main.value == "1"){	
    		arts.stytle.visibility = "visible";
    	}else if(main.value == "2"){
    		auto.stytle.visibility = "hidden";	
    	}else if(main.value == "3"){
    		books.stytle.visibility = "hidden";		
    	}else if(main.value == "4"){
    		electronics.stytle.visibility = "hidden";			
    	}else if(main.value == "5"){
    		general.stytle.visibility = "hidden";		
    	}else if(main.value == "6"){
    		pets.stytle.visibility = "hidden";		
    	}else if(main.value == "7"){
    		jobs.stytle.visibility = "hidden";		
    	}else if(main.value == "8"){
    		community.stytle.visibility = "hidden";			
    	}
    }
    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" />
        <link rel="stylesheet" href="stylesheet.css" type="text/css" />
    	<script type="text/javascript" src="postCheck.js"></script>
        <title>CollegeStop.com -  Your stop for used college books!</title>
    </head>
    <body onload="checkChoice()">
    <div class="wrapper">
    <div class="logo">Logo goes Here</div>
    <div class="nav_bar">
    	<ul class="menu">
    	<li class="home"><a href="index.php">Home</a></li>
    	<li class="browse"><a href="browse.php">Browse</a></li>
    	<li class="contact"><a href="contact.php">Contact</a></li>
    	</ul>
    </div>
    <div class="cookie_crumble">
    <p>You are here</p>
    </div>
    <div class="content_container">
    <form method="post" action="">
    <div id="cat_selection">
    <p>All fields are requried! Before filling in the fields below, make a selection of
    what category you would like you item sold under!</p>
    	<select name="main_cat" id="main_cat">
    		<option value="0">Please make a selection</option>
    		<option value="1">Arts and Antiques</option>
    		<option value="2">Auto</option>
    		<option value="3">Books</option>
    		<option value="4">Electronics</option>
    		<option value="5">General Merchandise</option>
    		<option value="6">Pets</option>
    		<option value="7">Jobs</option>
    		<option value="8">Community</option>
    	</select>
    	
    	<select name="Arts" id="Arts">
    		<option value="0">Please make a selection</option>
    		<option value="1">Antiques</option>
    		<option value="2">Cultural Arts</option>
    		<option value="3">Paints</option>
    		<option value="4">Sculptures</option>
    		<option value="5">Tapestry</option>
    	</select>
    	
    	<select name="Auto" id="Auto">
    		<option value="0">Please make a selection</option>
    		<option value="1">Auto parts</option>
    		<option value="2">Auto services</option>
    		<option value="3">ATVS and recreation vechiles</option>
    		<option value="4">Cars and trucks</option>
    		<option value="5">Motorcycles</option>
    		<option value="6">RVs</option>
    	</select>
    	
    	<select name="Books" id="Books">
    		<option value="0">Please make a selection</option>
    		<option value="1">Action and adventure</option>
    		<option value="2">Children's books</option>
    		<option value="3">History</option>
    		<option value="4">Romance</option>
    		<option value="5">Science fiction and Fantasy</option>
    		<option value="6">Student textbooks</option>
    	</select>
    	
    	<select name="Electronics" id="Electronics">
    		<option value="0">Please make a selection</option>
    		<option value="1">Assorted electronics</option>
    		<option value="2">Cellphones and mobile devices</option>
    		<option value="3">Computers</option>
    		<option value="4">Laptops</option>
    		<option value="5">PC gaming</option>
    		<option value="6">Playstation gaming</option>
    		<option value="7">Nintendo Gaming</option>
    		<option value="8">Xbox Gaming</option>
    	</select>
    	
    	<select name="General" id="General">
    		<option value="0">Please make a selection</option>
    		<option value="1">Appliances</option>
    		<option value="2">Bicycles</option>
    		<option value="3">Furniture</option>
    		<option value="4">Lawn care</option>
    		<option value="5">Hobbie items</option>
    		<option value="6">Instruments</option>
    		<option value="7">Sporting goods</option>
    		<option value="8">Tools</option>
    		<option value="9">Misc</option>
    	</select>
    	
    	<select name="Pets" id="Pets">
    		<option value="0">Please make a selection</option>
    		<option value="1">Cats for adoption or sale</option>
    		<option value="2">Dogs for adoption or sale</option>
    		<option value="3">Fish for adoption or sale</option>
    		<option value="4">Pet accessories and services</option>
    		<option value="5">Repitles for adoption or sale</option>
    	</select>
    	
    	<select name="Jobs" id="Jobs">
    		<option value="0">Please make a selection</option>
    	</select>
    	
    	<select name="Community" id="Community">
    		<option value="0">Please make a selection</option>
    	</select>
    </div>
    
    <div id="item_info">
    	Price: <input type="text" size="10" />
    	Email: <input type="text" size="32" />
    	Retype email: <input type="text" size="32" />
    	<br />
    	Item description: <input type="text" size="32" />
    	<br />
    	<textarea cols="50" rows="30"></textarea>
    	<br />
    	<input type="submit" value="Post Your Ad!" /><input type="reset" />
    	</form>
    </div>
    </div>
    </div>
    <div class="footer">2012 &copy; Hassan Said</div>
    </body>
    </html>

    I'm trying to put a new spin on classified sites. Please let me know where I am going wrong. Thanks, also I hope you guys don't mind me just reusing my thread so i don't congest the forums

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by JavaScriptRooki View Post

    Please let me know where I am going wrong.
    arts.stytle.visibility = "hidden";

    Throughout!

    At each change set all the dropdowns to hidden (you seem to have done this), then show just the one selected. Use a switch statement rather than a series of if...else's. There is no point in setting a div to hidden when it is already hidden.

    <body onload="checkChoice()">
    This makes no sense as the user has no opporunity to make a choice!


    You may care to have a look at http://www.javascriptkit.com/script/...plecombo.shtml

    Rather than revive a long-completed thread it is better to start a new thread when the issue being discussed has changed.


    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 07-13-2012 at 09:03 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    JavaScriptRooki (07-26-2012)

  • #12
    New to the CF scene
    Join Date
    May 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    with your method, how would i be able to keep track of which is selected to upload to a database. so for example Apparell -> Men -> Shorts would not be distingushed from Apprarell -> Women -> Shorts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •