check availability before submit form
Hi,
I have a form :
-
| <div> |
|
<form name="CreateIfaceEnvForm" id="CreateIcaceEnvForm" method="post" action="/Grouping/createIfaceEnv.do"> |
|
|
|
|
|
|
|
<label for="disabled" class="formLabel">Disabled*</label> |
|
<select name="disabled" tabindex="1" id="disabled" class="criteria" title="Disabled"> <option value="F">Enabled</option> |
|
<option value="T">Disabled</option> </select> |
|
<br/> <br/> |
|
<label for="interfaceType" class="formLabel">environment*</label> |
|
<input type="text" name="interfaceEnvironment" size="10" tabindex="2" value="" id="interfaceEnvironment"> |
|
<div> |
|
<span class="status"> </span> |
|
</div> |
|
<br/> |
|
|
|
<input id="createenv" type="submit" name="submit" class="submitbutton" tabindex="3" value='Create Environment' /> |
|
|
|
<a href="/Grouping/listSAIAdmins.do?id=saiAdmins" tabindex="4" class="linkButton">Back To SAI ADMIN</a> |
|
|
|
|
|
</form> |
|
</div> |
and my js code :
- $("#interfaceEnvironment").focusout(function () {
- console.log("inside blur");
- var env = $(this).val();
- $(".status").html("<img src='images/loading83.gif'><font color=gray> Checking availability...</font>");
- $.ajax({
- url: "isMetadataEnvAvailable.do",
- data: "envname=" + env ,
- success: function(response) {
- if(response.message === "exist"){
- $(".status").html("<font color=red face='arial, sans-serif' size='2px'> This environment already " + response.message + "</font>");
- $("#createenv").attr("disabled", "disabled");
- }
- else{
- $(".status").html(response.message);
- $("#createenv").removeAttr("disabled");
- }
-
- }
- })
-
- });
The check availability is working, but the end user got confused with this design, any thought or correction will be appreciated.
Thanks