need help: display a popup message after HTML form

  • Scott123
  • Newbie
  • Newbie
  • Scott123
  • Posts: 10

Post 3+ Months Ago

Hi
I have a html form which use php to post form input to a MySQL table. The problem is after the data input is "inserted" into the table. The html page goes to blank. If user click on back button, it goes back to the html form page with all inputs still displaying.
My goal is:
if the submission is successful, two things should happen: 1. the original html form page should be displayed(refresh or no does not matter since the form is simple and short) with all field data blank. 2. popup a "submission successful" message.

I did googled for answer, but got something about AJAX. I have no knowledge of Ajax, and the sample codes look complicate.
I would appreciate any suggestions. Thanks.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Ajax is pretty much the answer there since it can submit the form without reposting the page...

Here's a pretty straight forward example
  • michaelc
  • Born
  • Born
  • michaelc
  • Posts: 4

Post 3+ Months Ago

you can do Ajax, I use EXTjs and it rocks.
another simple answer is to include the HTML form into your PHP you can then insert the Javascript on the Fly.
  • Scott123
  • Newbie
  • Newbie
  • Scott123
  • Posts: 10

Post 3+ Months Ago

I have spent many hours experimenting with this Ajax code example (http://nettuts.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/)

the problem is I have one select drop down box in my html form. But the Ajax example only has text input boxes. I don't know how to incorporate a select box into his code.
Can anybody please help?

Thanks.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Can you post your code? Basically your select needs an id and you get the value in a similar way to the input fields.

jQuery API docs for val()
  • Scott123
  • Newbie
  • Newbie
  • Scott123
  • Posts: 10

Post 3+ Months Ago

This is my html form:

Code: [ Select ]
<html><head></head><body>
<title> Feedback Form </title>
<script src="js/jquery-1.2.3.pack.js"></script>
<script src="js/runonload.js"></script>
<script src="js/testform.js"></script>
 
<form id="contact_form" name="contact" action="" method="POST">
<fieldset>
      <label for="category" id="category_label" style='float: left; width: 18%'>Category: </label>
      <select name="category" id="category" class="text_input">
      <option value="complaint">Complaint</option>
      <option value="followup">Follow-up</option>
      <option value="question">Question</option>
      </select>
      </br>
      <label class="error" for="category" id="category_error"><font size="1"; color="red">This field is required.</font></label>
      </br>  
 
      <label for="description" id="description_label" style='float: left; width: 18%'>Description: </label>
      <input type="text" name="description" id="description" size="76" value="" class="text-input" />
      </br>
      <label class="error" for="description" id="description_error"><font size="1"; color="red">This field is required.</font></label>
      </br>        
     
      <label for="email" id="email_label" style='float: left; width: 26%'>://</label>
      <input style="width: 425px" type="text" name="email" id="email" value="" class="text-input" />
      </br>
      <label class="error" for="link" id="email_error"><font size="1"; color="red">This field is required.</font></label>
      </br>
 
      <input type="submit" value="Submit" class="button" id="submit_btn" value="Submit" style='margin-left: 18%; margin-top: 20px'>
 
</fieldset>
</form>
 
</body></html>
  1. <html><head></head><body>
  2. <title> Feedback Form </title>
  3. <script src="js/jquery-1.2.3.pack.js"></script>
  4. <script src="js/runonload.js"></script>
  5. <script src="js/testform.js"></script>
  6.  
  7. <form id="contact_form" name="contact" action="" method="POST">
  8. <fieldset>
  9.       <label for="category" id="category_label" style='float: left; width: 18%'>Category: </label>
  10.       <select name="category" id="category" class="text_input">
  11.       <option value="complaint">Complaint</option>
  12.       <option value="followup">Follow-up</option>
  13.       <option value="question">Question</option>
  14.       </select>
  15.       </br>
  16.       <label class="error" for="category" id="category_error"><font size="1"; color="red">This field is required.</font></label>
  17.       </br>  
  18.  
  19.       <label for="description" id="description_label" style='float: left; width: 18%'>Description: </label>
  20.       <input type="text" name="description" id="description" size="76" value="" class="text-input" />
  21.       </br>
  22.       <label class="error" for="description" id="description_error"><font size="1"; color="red">This field is required.</font></label>
  23.       </br>        
  24.      
  25.       <label for="email" id="email_label" style='float: left; width: 26%'>://</label>
  26.       <input style="width: 425px" type="text" name="email" id="email" value="" class="text-input" />
  27.       </br>
  28.       <label class="error" for="link" id="email_error"><font size="1"; color="red">This field is required.</font></label>
  29.       </br>
  30.  
  31.       <input type="submit" value="Submit" class="button" id="submit_btn" value="Submit" style='margin-left: 18%; margin-top: 20px'>
  32.  
  33. </fieldset>
  34. </form>
  35.  
  36. </body></html>

 
this is my testform.js code (modified from tutorial.js)
 
Code: [ Select ]
$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
 
  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();
       
      var category = $("input#category").val();
        if (category == "") {
      $("label#category_error").show();
      $("input#category").focus();
      return false;
      }
 
      var description = $("input#description").val();
        if (description == "") {
      $("label#description_error").show();
      $("input#description").focus();
      return false;
      }
 
    var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
      }
       
    var dataString = 'category='+ category + '&description=' + description + '&email=' + email;
       
        $.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Your feedback is submitted!</h2>")
        .append("<p>Thank you.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#category").select().focus();
});
  1. $(function() {
  2.   $('.error').hide();
  3.   $('input.text-input').css({backgroundColor:"#FFFFFF"});
  4.   $('input.text-input').focus(function(){
  5.     $(this).css({backgroundColor:"#FFDDAA"});
  6.   });
  7.   $('input.text-input').blur(function(){
  8.     $(this).css({backgroundColor:"#FFFFFF"});
  9.   });
  10.  
  11.   $(".button").click(function() {
  12.         // validate and process form
  13.         // first hide any error messages
  14.     $('.error').hide();
  15.        
  16.       var category = $("input#category").val();
  17.         if (category == "") {
  18.       $("label#category_error").show();
  19.       $("input#category").focus();
  20.       return false;
  21.       }
  22.  
  23.       var description = $("input#description").val();
  24.         if (description == "") {
  25.       $("label#description_error").show();
  26.       $("input#description").focus();
  27.       return false;
  28.       }
  29.  
  30.     var email = $("input#email").val();
  31.         if (email == "") {
  32.       $("label#email_error").show();
  33.       $("input#email").focus();
  34.       return false;
  35.       }
  36.        
  37.     var dataString = 'category='+ category + '&description=' + description + '&email=' + email;
  38.        
  39.         $.ajax({
  40.       type: "POST",
  41.       url: "process.php",
  42.       data: dataString,
  43.       success: function() {
  44.         $('#contact_form').html("<div id='message'></div>");
  45.         $('#message').html("<h2>Your feedback is submitted!</h2>")
  46.         .append("<p>Thank you.</p>")
  47.         .hide()
  48.         .fadeIn(1500, function() {
  49.           $('#message').append("<img id='checkmark' src='images/check.png' />");
  50.         });
  51.       }
  52.      });
  53.     return false;
  54.     });
  55. });
  56. runOnLoad(function(){
  57.   $("input#category").select().focus();
  58. });


----------------------------------------------------------

no changes to jquery-1.2.3.pack.js and runonload.js

The problem is the select box "category". It does not seem to be able to grab any value. It is always 'undefined'. The other two input text fields work.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 32 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.