need to clear input text if validation fails

Question

Im looking to validate the email text box, if email already exists, it should throw an error in span, and the text box should be empty, i did all the work with JQuery, but cant get the field cleared, please help

This is my email box

    <tr>
        <td>
            <label> * Email</label>
        </td>
        <td>
            <input type="text" id="email" name="email"/>
        </td>
        <td> <span id="email_status"></span></td>
    </tr>

and my validation on blur event

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").blur(function() {
var email = $('#email').val();
if(email==="")
{
$("#email_status").html("");
}
else
{
$.ajax({
type: "POST",
cache: false,
url: "checkemail.php",
data: "email="+ email ,
success: function(html){
$("#email_status").html(html);
if (html == "Already exist"){
$("input:text[id=email]").val("");}
}
});
return false;
}
});
});
</script>

And finally the php part

<?php
    $conn=mysqli_connect("localhost","root","zaq12345","testdb");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM formdata WHERE email = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo "<span style='color:red;'>Already exist</span> ";
    }
    else
    {
        echo "<span style='color:green;'>Available</span>";
    }
    }
?>

yes but in which place? i tried, but getting cleared the box everytime — Joseph, Apr 20 '17 at 07:02
Possible duplicate: http://stackoverflow.com/questions/3786694/how-to-reset-clear-form-through-javascript — Alex Slipknot, Apr 20 '17 at 07:02
In the code if (html == "Already exist"), add console.log(html) to check html. I think it may be Already exist. So the check would fail. Can you try — Kannan J, Apr 20 '17 at 07:03
Possible duplicate of [How to reset (clear) form through JavaScript?](http://stackoverflow.com/questions/3786694/how-to-reset-clear-form-through-javascript) — Alex Slipknot, Apr 20 '17 at 07:03

score 1 · Answer 1 · answered Apr 20 '17 at 07:03

You need to send true and false from the PHP file and append the markup in the HTML file accordingly.

<?php
    $conn=mysqli_connect("localhost","root","zaq12345","testdb");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM formdata WHERE email = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo 0;
    }
    else
    {
        echo 1;
    }
    }
?>

it is a good practice always.

Try with that Hope it helps.

score 1 · Answer 2 · answered Apr 20 '17 at 07:07

<tr>
        <td>
            <label> * Email</label>
        </td>
        <td>
            <input type="text" id="email" name="email"/>
        </td>
        <td> <span id="email_status"></span></td>
    </tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").blur(function() {
var email = $('#email').val();
if(email=="")
{
$("#email_status").html("");
}
else
{
$.ajax({
type: "POST",
cache: false,
url: "checkemail.php",
data: "email="+ email ,
success: function(html){
$("#email_status").html(html);
if (html == "Already exist"){
$("input:text[id=email]").val("");}
}
});
return false;
}
});
});
</script>
<?php
    $conn=mysqli_connect("localhost","root","your databse password","database name");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM admin WHERE u_name = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo "<span style='color:red;'>Already exist</span> ";
    }
    else
    {
        echo "<span style='color:green;'>Available</span>";
    }
    }
?>

Your Code Working Fabulous please Check your DAtabase name and database connection . your java script code working proper thank you

Mohamed-Yousef · Accepted Answer · 2017-04-20T07:17:16.937

1

Actually the problem in your js with the if statement you checking for

if (html == "Already exist")

while the returned data from php is

<span style='color:red;'>Already exist</span>

I hope you got the point .. So

Your php should like

<?php
    $conn=mysqli_connect("localhost","root","zaq12345","testdb");
    if(isset($_POST['email']))
    {
     $email=$_POST['email'];
     $qu = "SELECT * FROM formdata WHERE email = '$email'";
     $reslt=mysqli_query($conn,$qu);
     if(mysqli_num_rows($reslt)>0)
    {
        echo "Already exist";
    }
    else
    {
        echo "Available";
    }
    }
?>

And in js

success: function(html){
           var html = html.trim();
           if (html == "Already exist"){
             $("#email_status").html("<span style='color:red;'>Already exist</span>");
             $("#email").val("");
           }else if (html == "Available"){
             $("#email_status").html("<span style='color:green;'>Available</span>");
           }
        }

edited Apr 20 '17 at 07:17

answered Apr 20 '17 at 07:11

Mohamed-Yousef

23,946
3
19
28

You just solved it. thanks it worked, but how??? i have the same code but in wrong place??? – Joseph Apr 20 '17 at 07:16
oh the returned html will be a span tagged text right? so we cant compare it with if function? – Joseph Apr 20 '17 at 07:18
@Joseph exactly .. and you compared the span line with just a text .. But you can compare it but with full returned line .. so if you need the html with span from php you must check the whole line in if statement – Mohamed-Yousef Apr 20 '17 at 07:21
@Joseph always try to alert or console.log returned data from php every time you using ajax .. it will give you the exact output and then make your if statements .. Good Luck :-) – Mohamed-Yousef Apr 20 '17 at 07:27
again a twist, i also have an edit button, if i click edit, it will show all the form elements with data, here i have to do the same validation but it should not return "already exist" if i didnt change the email(i,e keeping the same email but edit other fields) so what i had to do now??? – Joseph Apr 20 '17 at 07:29
@Joseph (edit other fields) inside }else if (html == "Available"){ or you can even make else in the last of if statement you can edit the fields you need .. depending on which condition you need to edit the other field – Mohamed-Yousef Apr 20 '17 at 07:37
not like that it is based on the number of row>0 then we say its already exists. but now there will be a email id already in db will be in text box, but we shouldn't display already exist, because we're editing a row. can you get it now? – Joseph Apr 20 '17 at 07:41
@Joseph I guess I got your point .. you mean you checked for email once and no need to check it again right?? – Mohamed-Yousef Apr 20 '17 at 07:43
like "SELECT * FROM formdata WHERE email = '$email'" if(email == $email) { $("#email_status").html(" ");} – Joseph Apr 20 '17 at 07:44
yes, i need to check in another form which shows the existing data in the form field on click evet of a button – Joseph Apr 20 '17 at 07:45
@Joseph I got your point.. in your edit button click event catch the email value which exists in the email input .. and on save button catch its value again and compare it .. if its not the same call the ajax again – Mohamed-Yousef Apr 20 '17 at 08:21
@Joseph this is a simple example how you do that https://jsfiddle.net/mohamedyousef1980/bh2sLz5s/ – Mohamed-Yousef Apr 20 '17 at 08:28
@Joseph you just need for a focus event like so https://jsfiddle.net/mohamedyousef1980/bh2sLz5s/1/ – Mohamed-Yousef Apr 20 '17 at 08:49
@Joseph actually with the focus you will have a some issue with backspace so the next solution will be good to create a hidden input https://jsfiddle.net/mohamedyousef1980/bh2sLz5s/2/ .. Have a great day bro :-) – Mohamed-Yousef Apr 20 '17 at 09:00
what if the ajax part should run without button click event, i.e, onblur or keyup event of textbox? – Joseph Apr 20 '17 at 12:48
@Joseph same thing with hidden input https://jsfiddle.net/mohamedyousef1980/bh2sLz5s/3/ – Mohamed-Yousef Apr 20 '17 at 22:45

Davinder Kumar · Answer 4 · 2017-04-20T07:02:50.313

0

You can simply clear input fields value with jQuery simply.

$("form #email").val('');

edited Apr 20 '17 at 07:02

answered Apr 20 '17 at 07:01

Davinder Kumar

652
4
17

yes but in which place? i tried, but getting cleared the box everytime – Joseph Apr 20 '17 at 07:02
replace with "$("input:text[id=email]").val("");" – Davinder Kumar Apr 20 '17 at 07:04
1) try to remove $("#email").blur(function() { function because according to code, error will empty after blur out of email textbox. – Davinder Kumar Apr 20 '17 at 07:12

score 0 · Answer 5 · answered Apr 20 '17 at 07:03

0

Replace this:

$("input:text[id=email]").val("");

With this:

$("#email").val("");

answered Apr 20 '17 at 07:03

Simos Fasouliotis

1,383
2
16
35

score 0 · Answer 6 · answered Apr 20 '17 at 07:04

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#email").blur(function() {
var email = $('#email').val();
if(email==="")
{
$("#email_status").html("");
}
else
{
$.ajax({
type: "POST",
cache: false,
url: "checkemail.php",
data: "email="+ email ,
success: function(html){
$("#email_status").html(html);
if (html == "Already exist"){
$("#email").val("");}//this was changed by me
}
});
return false;
}
});
});
</script>

score 0 · Answer 7 · edited Apr 20 '17 at 07:21

0

Are you sure to 'input:text[id=email]' is correct selector? You can call console.log($('input:text[id=email]').length) to check.

edited Apr 20 '17 at 07:21

Carsten Løvbo Andersen

26,637
10
47
77

answered Apr 20 '17 at 07:09

Kermit

1,062
6
10

1

yes its working if i put it outside of if statement. but clears the box everytime – Joseph Apr 20 '17 at 07:10

need to clear input text if validation fails

7 Answers7