Submitt button remain disabled untill I press refresh button in html jquerry form

JavaScript
1

Hi I am trying to solve this issue since morning! I have small form with one input username, When I entered username, then script checking whether its already exist in database or not. If its already exist then message display that username is not available and submit button become disable so that record should not be inserted in database. Everything is working fine until this point. But the issue which I am facing is that, when I rename username, the submit button still remain disable, untill I press refresh button. I want that when I rename existed username, the submit button should become active without pressing reresh button. below is my code

<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<form class="a16" action="form9.php" method="POST" autocomplete="on">
                                    <label for="userName" class=" ">Użytkownik:</label>

<input type="text" name="userName" placeholder="Username" id="userName1" onBlur="checkAvailability()">

      <span id="user-availability-status"></span> 
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>

<input type="submit" name="submit" id="submit" value="Submit">

 <script type="text/javascript">     

function checkAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "proceser.php",
data:'userName='+$("#userName1").val(),
type: "POST",
success:function(data){
$("#user-availability-status").html(data);
$("#loaderIcon").hide();
if(data == "<span class=''> Username Not Available.</span>") {
$('#submit').prop('disabled', true);
}
},
error:function (){}
});
}
</script>

and here is processor.php file

<?php
 include 'db1.php';   //standard datebase local connection..

 if(isset($_POST['userName']) && $_POST['userName']!="") {
     if ($stmt = $con->prepare('SELECT userName FROM ttt WHERE userName = ?')) {
         $stmt->bind_param('s', $_POST['userName']);
         $stmt->execute();
         $stmt->store_result();
         $numRows = $stmt->num_rows;
         if ($numRows > 0) {
             echo "<span class=''> Username Not Available.</span>";
         } 
     }
 }
$con->close();
ob_end_flush();

?>
2

You need an else here. If you have a used username the first time, it never gets reset…

1 Like
3

i think else will not work here, perhaps I need some thing like enable submit option from some where, and perhaps also need onchange event in my input field

4

Why not? The checkAvailability method fires whenever the username loses focus.

So the order of events

  1. The user enters a username into the field
  2. The user tabs out of the username field (or tries to click on the OK button)
    1. The checkAvailability method fires, finds the username is NOT available and disables the button.
  3. User returns to step 1 to enter a DIFFERENT username

The SECOND time that checkAvailability is fired, the data value should NOT be the span value. So this if statement should re-enable the button.

if(data == "<span class=''> Username Not Available.</span>") {
$('#submit').prop('disabled', true);
} else {
$('#submit').prop('disabled', false);
}

or better yet

const disableButton = (data == "<span class=''> Username Not Available.</span>" ? true : false;
$('#submit').prop('disabled', disableButton);
4 Likes
5

Thanks alot sir and yes its working

1 Like