Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-09-2011, 11:04 PM   PM User | #16
venegal
Gütkodierer


 
Join Date: Apr 2009
Posts: 2,127
Thanks: 1
Thanked 426 Times in 424 Posts
venegal has a spectacular aura aboutvenegal has a spectacular aura about
Alright. First of all, I told you to replace IDs with classes, which you didn't do. Since the code is now fetching elements by their class name, instead of their ID, those class names have to be there, which they are not.

That means, each of those forms have to have class="submit", each of those usern inputs has to have class="usern", and so on. And none of those are allowed to have an ID (which they still do have in your code), since that ID wouldn't be unique, with multiple forms on the page. I did mention that, didn't I?

Next, if your code isn't able to fetch those elements, because you didn't add the right classes, why does the submit work at all? The answer to that is that for some reason you have a completely different piece of code in there, which also tries to handle the form submission. You got action="javascript:insert()" in each of those forms, and your insert function looks like this:

PHP Code:
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML "Just a second..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var usern encodeURI(document.getElementById('usern').value);
var 
joborder_id encodeURI(document.getElementById('joborder_id').value);
var 
site_id encodeURI(document.getElementById('site_id').value);
// Set te random number to add to URL request
nocache Math.random();
// Pass the login variables like URL variable
http.open('get''insert.php?usern='+usern+'&joborder_id='+joborder_id+'&site_id='+site_id+'&nocache = '+nocache);
http.onreadystatechange insertReply;
http.send(null);

That's a very bad case of code duplication, where that bogus function (bogus because it uses IDs instead of classes) suddenly takes over if your actual submission handling code fails (which it does, because you didn't adapt the HTML). Get rid of that "javascript:insert()" stuff, and of that whole bogus function.

Also, you might want to read some jQuery tutorial, since the fact that you didn't adapt your HTML like I told you to indicates that you don't really understand how jQuery selectors work.
__________________
.My new Javascript tutorial site: http://reallifejs.com/
.Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
.Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback
venegal is offline   Reply With Quote
Old 11-10-2011, 01:43 AM   PM User | #17
stn003
New Coder

 
Join Date: Jul 2010
Posts: 41
Thanks: 2
Thanked 0 Times in 0 Posts
stn003 is an unknown quantity at this point
Hi Thanks, i had to clean my pages up i had so many variations that i kept uploading and saving different variations and in the end i was more confused than when i started. My javascript and jquery isn't that great so i am reading through some tutorials now, however i have uploaded a modified page.

I removed the redundant code and the links to non used javascript pages that i had over looked. On the form i changed all of the ID tags to class and added a class submit to the form.

I have left the javascript part to collect the classes the same as you sent me earlier and it now makes all more sense to me. However now it simply doesn't work and i get it only worked before was because their was a link to the javascript page that was just throwing variables in to the database.

But from my limited understanding i thought now once the form is submitted the javascript picks up the form class and then finds the values that it needs.

when the form is clicked it just simply reloads the page, should i have an entry in the form action section?
stn003 is offline   Reply With Quote
Old 11-10-2011, 02:06 AM   PM User | #18
venegal
Gütkodierer


 
Join Date: Apr 2009
Posts: 2,127
Thanks: 1
Thanked 426 Times in 424 Posts
venegal has a spectacular aura aboutvenegal has a spectacular aura about
You're selecting those forms with $('form.submit'), which means form elements that have class="submit". Your form elements (the <form> tags in your HTML) don't have that.

So, either add those classes, or change the selector to $('form'), which will select all forms on the page, regardless of class or id.

As for the action attribute: If you get your jQuery selector to actually select those forms of yours, the action attribute doesn't matter any more, because the default action will be overridden by your own submit handler. If you care about accessibility, though, you should set the action to your ajax.php, so people without Javascript can submit too. For that to make sense, though, you will probably have to change that file, so it won't show you a blank page after Javascript-free form submission.
__________________
.My new Javascript tutorial site: http://reallifejs.com/
.Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
.Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback
venegal is offline   Reply With Quote
Old 11-10-2011, 02:34 AM   PM User | #19
stn003
New Coder

 
Join Date: Jul 2010
Posts: 41
Thanks: 2
Thanked 0 Times in 0 Posts
stn003 is an unknown quantity at this point
Hi, ok i just added the snippet below in to the action part of the form, and it worked!, i will look at the what you have just posted and go with them as i am sure they are the proper commands, but i really appreciate your help.

THanks

PHP Code:
  javascript:insert() 
stn003 is offline   Reply With Quote
Old 11-10-2011, 02:38 AM   PM User | #20
stn003
New Coder

 
Join Date: Jul 2010
Posts: 41
Thanks: 2
Thanked 0 Times in 0 Posts
stn003 is an unknown quantity at this point
Ok, I stand corrected it's because i also added the class="submit" to the <form> tag, and it was obviously that. With regards to the form action yes adding ajax.php makes perfect sense.

Again thanks, you have been a great help in solving the problem and me making sense of it all.

Cheers
stn003 is offline   Reply With Quote
Old 11-10-2011, 03:46 AM   PM User | #21
stn003
New Coder

 
Join Date: Jul 2010
Posts: 41
Thanks: 2
Thanked 0 Times in 0 Posts
stn003 is an unknown quantity at this point
one last question, i am trying to get the success message to display, i have added this
PHP Code:
<div class="success" style="display: none;">Your Application has been sent.</div
However it doesn't show.

Thanks

Lee
stn003 is offline   Reply With Quote
Old 11-10-2011, 03:59 AM   PM User | #22
venegal
Gütkodierer


 
Join Date: Apr 2009
Posts: 2,127
Thanks: 1
Thanked 426 Times in 424 Posts
venegal has a spectacular aura aboutvenegal has a spectacular aura about
Please read up on jQuery, so you actually understand your own code.

PHP Code:
$('form#submit').hide(function(){$('div.success').fadeIn();}); 
This is trying to hide a form with the id "submit", and after that's done, fade in all divs with the class "success". Since you don't have a form with the id "submit", nothing will be faded in. Also, you probably don't want to fade in all those success divs, but only the one belonging to the form that has actually been submitted.
__________________
.My new Javascript tutorial site: http://reallifejs.com/
.Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
.Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback
venegal is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 04:38 PM.


Advertisement
Log in to turn off these ads.