Webpage refreshing when I click Submit button

Question

Each time I input the data in the fields and click submit, the page refreshes, clears the forms, and not entering on the external Javascript file. But when I change the button type to "button" instead of "Submit", everything goes well except the "required" pop doesn't show anymore. What is the best practice in calling the external script when submit type button is clicked?

HTML file



  
    Registration Form 2
    
	
	
    
	
  
  
  
  
  
   
   

	
		
          
            
              Registration
            
            

		

			 
				
					
				
				
				  Name	  
				
					
                 
                 
					
				
              
				

				
				
				  Birthday	

				
					
				
				
				
            

			 
				
					
				
				
				
				  Email	  
				 
                  
                    
					 			
				
				
				
			
				
				  Gender	
					 
					
					Male
					
					
					Female
						
						
				
				
				 
				
				
				  Country

JAVASCRIPT FILE

`function validate() {

var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var gender = $('input[name="gender"]:checked').val();
var bday = document.getElementById("bday").value;
var country = document.getElementById("country").value;

if (fname=="" || lname=="" || email=="" || country == "Select Country"){

 console.log("Incomplete data");

 $(".modal-title").text("Incomplete Data");
 $(".modal-body").text("Please Fill All Required Fields");
 $("#myModal").modal();
  }
else{

$(".modal-title").text("Registration Succesful");
$(".modal-body").text("Welcome "+ fname +"! Your data has been inserted.");
$("#myModal").modal();

var info = new Object();
info.firstname = fname;
info.lastname = lname;
info.email = email;
info.gender = gender;
info.country = country;
info.bday = bday;

console.log("Output: " , info);

}

}`

theprogrammer · Accepted Answer

There are 2 ways to go about it. The one I personally like is to change the button to a type submit and bind the onSubmit event from the form to the validate() js function.

Make sure that to cancel the event if an error occurs, so the form is not submitted using event.preventDefault()

Webpage refreshing when I click Submit button

Answers (2)

Answer

Elaboration

More info

Related Questions