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.
Page 2 of 2 FirstFirst 12
Results 16 to 22 of 22
  1. #16
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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

  2. #17
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  3. #18
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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

  4. #19
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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() 

  5. #20
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  6. #21
    New Coder
    Join Date
    Jul 2010
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  7. #22
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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