10 Replies - 1851 Views - Last Post: 05 February 2013 - 05:11 PM

#1 Exceedinglife  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 98
  • Joined: 01-July 12

Code works only when refreshed?

Posted 05 February 2013 - 03:18 PM

Hello,
I am making a simple jQuery program and i have it so i click a button and it says its sending the info to a diff page i also have a clear button and it is suppose to clear the data in the text boxes. Right now i have to click the send / join button and then click back in my web browser then if i click the clear button it will clear the text boxes and put a "*" at the end of them.

can someone tell me if i did something wrong? i have no errors and it sends but doesn't clear at first when you try

$(document).ready(function() {
	$("#join_list").click(
		function() {
			var emailAddress1 = $("#email_address1").val();
			var emailAddress2 = $("#email_address2").val();
			var isValid = true;
			
			// validate the first email address
			if (emailAddress1 == "") { 
				$("#email_address1_error").text("This field is required.");
				isValid = false;
			} else {
				$("#email_address1_error").text("");
			} 
			
			// validate the second email address
			if (emailAddress2 == "") { 
				$("#email_address2_error").text("This field is required.");
				isValid = false; 
			} else if (emailAddress1 !== emailAddress2) { 
				$("#email_address2_error").text("This entry must equal first entry.");
				isValid = false;
			} else {
				$("#email_address2_error").text("");
			}
			
			// validate the first name entry  
			if ($("#first_name").val() == "") {
				$("#first_name_error").text("This field is required.");
				isValid = false;
			} 
			else {
				$("#first_name_error").text("");
			}
			
			// submit the form if all entries are valid
			if (isValid) {
				$("#email_form").submit(); 
			}
			/*
			$("#clear_entries.clear").click(function(e){ ${"#email_form").reset(); });
			*/
			$("#clear_entries").click(function() {$("input[type=text]").val("");
			$("input[type=text]").after("*");
			$("#email_address1").focus();})
			
		} // end function
	);	// end click
	$("#email_address1").focus();
}); // end ready



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Join Email List</title>
   	<link rel="stylesheet" href="email_list.css">
   	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
   	<script src="email_list.js"></script>
</head>
<body>
    <section>
        <h1>Please join our email list</h1>
        <form id="email_form" name="email_form" action="join.html" method="get">
	        <label for="email_address1">Email Address:</label>
	        <input type="text" id="email_address1">
	        <span id="email_address1_error">*</span><br>
	        
	        <label for="email_address2">Re-enter Email Address:</label>
	        <input type="text" id="email_address2">
	        <span id="email_address2_error">*</span><br>
	        
	        <label for="first_name">First Name:</label>
	        <input type="text" id="first_name">
	        <span id="first_name_error">*</span><br>
	        
	        <label>&nbsp;</label>
	        <input type="button" id="join_list" value="Join our List"><br>
	        
	        <label>&nbsp;</label>
	        <input type="button" id="clear_entries" value="Clear Entries">
	    </form>
    </section>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Code works only when refreshed?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5076
  • View blog
  • Posts: 13,700
  • Joined: 18-April 07

Re: Code works only when refreshed?

Posted 05 February 2013 - 03:39 PM

Well I noticed that your code for clicking the clear button is actually in the function for clicking the join list button. I don't think you want that there. The two events are separate.

So you want take the code...

$("#clear_entries").click(function() {
   $("input[type=text]").val("");
   $("input[type=text]").after("*");
   $("#email_address1").focus();
});



... out from inside the curly braces of the $("#join_list").click() function and put it right after line 48 in your code there (the end of the click function). The ready function should setup both click functions for join_list and for clear_entries buttons.

I hope you understand. :)
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6403
  • View blog
  • Posts: 25,878
  • Joined: 12-December 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 03:41 PM

The problem is caused by the click event for the #clear_entries button being attached within the click event for #join_list.

It is possible to get this to work, but why not just move it outside this other event - like this:

	);	// end click
    
    $("#clear_entries").click(function () {
        $("input[type=text]").val("");
		$("input[type=text]").after("*");
		$("#email_address1").focus();
    });
	$("#email_address1").focus();

You end up with lots of stars though! Better would be to use CSS and switch classNames, one of which classes could perhaps use the :after pseudo-element to show the star.
Was This Post Helpful? 1
  • +
  • -

#4 Exceedinglife  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 98
  • Joined: 01-July 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 03:52 PM

View PostMartyr2, on 05 February 2013 - 03:39 PM, said:

Well I noticed that your code for clicking the clear button is actually in the function for clicking the join list button. I don't think you want that there. The two events are separate.

So you want take the code...

$("#clear_entries").click(function() {
   $("input[type=text]").val("");
   $("input[type=text]").after("*");
   $("#email_address1").focus();
});



... out from inside the curly braces of the $("#join_list").click() function and put it right after line 48 in your code there (the end of the click function). The ready function should setup both click functions for join_list and for clear_entries buttons.

I hope you understand. :)/>



thank you very much i did not see that i will try that right away i have been messing with this for like 30 mins and was not able to figure it out lol
Was This Post Helpful? 0
  • +
  • -

#5 Exceedinglife  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 98
  • Joined: 01-July 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 03:57 PM

View Postandrewsw, on 05 February 2013 - 03:41 PM, said:

The problem is caused by the click event for the #clear_entries button being attached within the click event for #join_list.

It is possible to get this to work, but why not just move it outside this other event - like this:

	);	// end click
    
    $("#clear_entries").click(function () {
        $("input[type=text]").val("");
		$("input[type=text]").after("*");
		$("#email_address1").focus();
    });
	$("#email_address1").focus();

You end up with lots of stars though! Better would be to use CSS and switch classNames, one of which classes could perhaps use the :after pseudo-element to show the star.

Thank you i had no idea about my functions trying to combine each other lol and about pseudo-element i am not sure how to use this this is my first program i have ever made with jQuery so i am not to familiar on how to do that yet would you by chance be able to explain how to do that a little better and i will try it?
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6403
  • View blog
  • Posts: 25,878
  • Joined: 12-December 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 04:15 PM

It's something like this in the CSS (I haven't tested this):

input[type='text'].valid:after {
    content: '';
}

input[type='text'].invalid:after {
    content: '*';
}

Added: Give all your text-inputs the initial class-name of 'valid'.

Then, in your jQuery, you would switch the class-name between 'valid' and 'invalid'. Assuming you were looping through and checking each text-input:

if (isValid) {
    $(this).removeClass("invalid").addClass("valid");
} else {
    $(this).addClass("invalid").removeClass("valid");
}


but perhaps you are a few steps away from this yet - you need to loop through the collection of inputs, checking each one.

css-tricks

The pseudo-element doesn't work in IE7 I believe, but it just means that it wouldn't show the asterisk in that (old) browser.

This post has been edited by andrewsw: 05 February 2013 - 04:22 PM

Was This Post Helpful? 1
  • +
  • -

#7 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6403
  • View blog
  • Posts: 25,878
  • Joined: 12-December 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 04:21 PM

Actually, you could incorporate this, perhaps, into your current code (in the join_list click-event) as you are looking at each of the inputs individually.
Was This Post Helpful? 0
  • +
  • -

#8 Exceedinglife  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 98
  • Joined: 01-July 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 04:35 PM

View Postandrewsw, on 05 February 2013 - 04:15 PM, said:

It's something like this in the CSS (I haven't tested this):

input[type='text'].valid:after {
    content: '';
}

input[type='text'].invalid:after {
    content: '*';
}

Added: Give all your text-inputs the initial class-name of 'valid'.

Then, in your jQuery, you would switch the class-name between 'valid' and 'invalid'. Assuming you were looping through and checking each text-input:

if (isValid) {
    $(this).removeClass("invalid").addClass("valid");
} else {
    $(this).addClass("invalid").removeClass("valid");
}


but perhaps you are a few steps away from this yet - you need to loop through the collection of inputs, checking each one.

css-tricks

The pseudo-element doesn't work in IE7 I believe, but it just means that it wouldn't show the asterisk in that (old) browser.

i believe that is till to advanced for me lol but thanks! I do have another question tho about what i am doing
I need to make a dblclick() so when i double click any text box it will clear all the info like my clear click. i was going to copy and paste the clear code but it says to do this by trigger the click event
im guessing that is the trigger()? And does trigger just imitate a different event or keep track of events on a page
this is my code that i made.
$(document).ready(function() {
	$("#join_list").click(
		function() {
			var emailAddress1 = $("#email_address1").val();
			var emailAddress2 = $("#email_address2").val();
			var isValid = true;
			
			// validate the first email address
			if (emailAddress1 == "") { 
				$("#email_address1_error").text("This field is required.");
				isValid = false;
			} else {
				$("#email_address1_error").text("");
			} 
			
			// validate the second email address
			if (emailAddress2 == "") { 
				$("#email_address2_error").text("This field is required.");
				isValid = false; 
			} else if (emailAddress1 !== emailAddress2) { 
				$("#email_address2_error").text("This entry must equal first entry.");
				isValid = false;
			} else {
				$("#email_address2_error").text("");
			}
			
			// validate the first name entry  
			if ($("#first_name").val() == "") {
				$("#first_name_error").text("This field is required.");
				isValid = false;
			} 
			else {
				$("#first_name_error").text("");
			}
			
			// submit the form if all entries are valid
			if (isValid) {
				$("#email_form").submit(); 
			}
		}//end function
	);	// end click
			$("#clear_entries").click(function() {
				$("input[type=text]").val("");
				$("input[type=text]").after("*");
				$("#email_address1").focus();
				})
			
			
			$("input[type=text]").dblclick(function() {$("input[type=text]").val("");
			$("input[type=text]").after("*");
			$("#email_address1").focus();
			})


	$("#email_address1").focus();
}); // end ready



how do i add trigger in that?
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6403
  • View blog
  • Posts: 25,878
  • Joined: 12-December 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 04:42 PM

You shouldn't need .trigger() just .click().

http://api.jquery.com/click/
Was This Post Helpful? 0
  • +
  • -

#10 Exceedinglife  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 98
  • Joined: 01-July 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 04:56 PM

View Postandrewsw, on 05 February 2013 - 04:42 PM, said:

You shouldn't need .trigger() just .click().

http://api.jquery.com/click/

so the code i have that is copying the other clear click event when i dblclick is right? then i have one last question. I need to use the "this" keyword so i dblclick on a textbox and it clears only that one text box and not all of them and i need to be able to do this with all 3 boxes
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is offline

  • say what now
  • member icon

Reputation: 6403
  • View blog
  • Posts: 25,878
  • Joined: 12-December 12

Re: Code works only when refreshed?

Posted 05 February 2013 - 05:11 PM

Quote

so the code i have that is copying the other clear click event when i dblclick is right?

Er, dunno, maybe.

Quote

I need to use the "this" keyword so i dblclick on a textbox and it clears only that one text box and not all of them and i need to be able to do this with all 3 boxes


In which case you could use trigger() instead of click() so that you can pass arguments to the event.

Sounds very messy to me, particularly as the click event currently clears all the inputs. I would probably create a completely separate function to call that clears whichever element is passed to it. Well, actually, if it is just emptying a text-input I would just do it directly in the dblclick event.. but anyway, good luck.

This post has been edited by andrewsw: 05 February 2013 - 05:12 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1