CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user3599482
user3599482

Reputation: 157

How to prevent submitting form based on text in an html element?

I have a form in that I have User Id availability check. So if Id is already in DB it will show a message "Id is already in use". In that case I have to avoid submitting the form. For that my html is as follow,

<div>
<label><strong>Teacher Id:</strong></label>
<input type="text" name="teacherId" id="teacherId" placeholder="Enter Teacher Id"  > 
</div><span class="status" id="status"></span>

Here span will have the text about availability,

The value to span comes form jquery post call,

$.post('<%=request.getContextPath()%>/controller/TeacherIdCheckController',
{'teacherId':teacherId},
 function(data)
 {
$('.status').html(data);
  });
}

This works fine, to prevent submitting I wrote javascript function as,

function checkTeacherId(){
 alert(" in checkTecherId()");
 var status=$("#status").text();
 alert(status);
 if(status=="Id in use try another")
preventDefault();
 else
return true;

}

Everything works fine but this javascript function is not working fine so I cant able to prevent submit in case of Id already exist in DB. So please anyone help me in this.

Upvotes: 0

Views: 177

Answers (2)

Jai
Jai

Reputation: 74738

Just because you need to pass the event in the function's arg:

function checkTeacherId(e){ // <---pass the event here
  .....
 if(status=="Id in use try another")
   e.preventDefault(); // and stop it here using dot notation
 else
   return true;
}

As per your comment you can pass the event to your function in your onclick handler:

onclick="checkTeacherId(event);"

Fiddle

Okay! As @Sanjeev tried commenting on best approach for this work then as you are using jQuery then you can just do this as per best approach like Unobrusive Javascript (removing this inliner scripts just like above posted):

function checkTeacherId(e){ // <---pass the event here
  .....
 if(status=="Id in use try another")
   e.preventDefault(); // and stop it here using dot notation
 else
   return true;
}


$(function(){
   $('#yourformid').on('submit', function(e){
      checkTeacherId(e);
   });
});

Use this approach if you want to externalize your scripts as declare the function in global scope and put your event handler in doc ready with submit event.

Updated fiddle with unobtrusive way.

Upvotes: 3

Sanjeev
Sanjeev

Reputation: 2667

Solution as per best practice for form validation:

You have implemented form submit via Submit button and not through js like document.getElementById("myForm").submit();

I don't see any point in using onclick handler on submit button for validation, use the native onsubmit Event Attribute, else you will keep on breaking submit flow. onsubmit is made for validating form and stopping form submission if validation fails. This will work sure shot in all browsers and is the correct approach for form validation

Example:

<form action="demo_form.asp" onsubmit="return checkTeacherId()">


function checkTeacherId(){
 var status=$("#status").text();

 if(status==="Id in use try another"){
    return false
 }
 else{
 return true;
 }

}

Upvotes: 0

Related Questions