SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Setting Form Values to Default Values, Disabling Elements in jQuery

    Hello all,

    I'm almost done with the e-mail submission script for my website, World Review Group, but I still need some help with some jQuery that I want to get added in.

    To get to the submission form I am talking about, enter a valid e-mail in the bottom right side e-mail submission box.

    The first issue I want to address is the cancel button on that form. When a user clicks cancel, I want to reset all the form values to their default values. My below code is not doing that properly when "#cancel" is clicked.

    Another thing I'd like to accomplish with this form submission is that when the forms have been submitted validly, the "#emailbox" inputs will be disabled. The code I tried as well does not succeed in doing that. I noticed that there are some issues if that form is left available after it has been used more than once successfully.

    the jQuery:
    Code:
    $("#go").focus(function(){
    		if ($("#go").val() == $("#go").prop('defaultValue')){
    			$("#go").val('');
    		}
    	  });
     
    	$("#go").on('focus blur', function(e) {
    	  var v = $(this).val()
    	  if (e.type == "focus"){
    		v = (v == "your e-mail")? "" : v;
    	  } else {
    		v = (v == "")? "your e-mail" : v;
    	  }
    	  $(this).val(v);
    	});
          
          //this is the function called by the success value of the first .ajax() call
          function testFirstResults(response){
            if (response.indexOf("Submission Successful") != -1){
              $('<div>',{ id : 'blackoverlay' }).insertBefore('#submissionform');
              $("#submissionform").css("display", "block");
            } else if (response.indexOf("Invalid E-mail") != -1){
              alert("Invalid mail");
            } else if (response.indexOf("Nothing in Box") != -1){
              //do nothing
            } else {
              //do nothing
            }
          }
    	  
    	  function testSecondResults(data){
    	  	if (data['validation'] == "pass"){
    			$("#submissionform").css("display", "none");
    			$("#submitstatus p").append(data['message']);
    			$("#submitstatus").css("display", "block").delay(1000).fadeOut(800);
    			$("#blackoverlay").delay(1000).fadeOut(800);
    			$("#submitstatus h3").append("Submission Successful");
    			$("#emailbox").each(function(){
                    $(this).attr("disabled", "disabled");
                });
    		} else {
    			$("#errormessage").empty().append(data['message']);
    		}
    	  }
          
          $(document).ready(function(){
            $("#emailbox").submit(function(e){
              e.preventDefault();
              $.ajax({
                type: $(this).attr('method'),
                dataType: 'html',
                cache: false,
                url: "Scripts/emailtester.php",
                data: $(this).serialize(),
                success: function(data){
                  testFirstResults(data);
                }
              });
            });
    		
    		$("#submissionform").submit(function(e){
    			var origEmail = $('#go').val();
    			var confirmEmail = $("#confirmemail").val();
    			var name = $("#name").val();
    			var age = $("#age").val();
    			var country = $("#country").val();
    			
    			e.preventDefault();
    		
    			$.ajax({
    			  type: "POST",
    			  dataType: 'json',
    			  cache: false,
    			  url: "Scripts/confirmform.php",
    			  data: { origEmail: origEmail,
    			        confirmEmail: confirmEmail,
    					name: name,
    					age: age,
    					country: country },
    			  success: function(data){
    				  testSecondResults(data);
    			  }
    			});
    		});
    		
    		$("#cancel").click(function(){
    			$("#blackoverlay").remove();
    			$("#errormessage").empty();
    			$("#submissionform").css("display", "none");
    			$("#submissionform").each(function(){
    				$(this).val($(this).attr('defaultValue'));
    			});
    		});
          });
    Thanks for your help!

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    To reset all the form values to their default values you can add the "reset" button in form.
    Code:
    <input type="reset" value="Cancel" />
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question

    Yes, this worked perfectly- thank you! Do you know why this snippet is not disabling the first form after successful submission?

    Code:
    			$("#emailbox").each(function(){
                    $(this).prop("disabled", "disabled");
                });

  4. #4
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not know, but try:
    Code:
    $("#emailbox input").each(function(){
      $(this).prop("disabled", "disabled");
    });
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  5. #5
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, that worked, MarPlo. Thank you very much!


Bookmarks

Posting Permissions

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