Setting Form Values to Default Values, Disabling Elements in jQuery

JavaScript
1

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. :x

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. :nono: I noticed that there are some issues if that form is left available after it has been used more than once successfully.

the jQuery:


$("#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

Hi,
To reset all the form values to their default values you can add the “reset” button in form.

<input type="reset" value="Cancel" />
3

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


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

Not know, but try:

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

Yes, that worked, MarPlo. Thank you very much!