Stop submitting if innerHTML value is equal to specified value

user_10403902 0
Viewed 67

I'm designing a web page which checks if an email specified is available is database. If it is available, then i must stop submitting the form.

I used ajax for live checking of email and update the response as a span message. If i click submit button, even though the email is already available in the db, the form is submitted and getting redirected to another page. Please do help me get out of this. Thanks in advance.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        function checkemail() {
            var email=document.getElementById( "UserEmail" ).value;

            if(email) {
                $.ajax({
                    type: 'post',
                    url: 'check.php',
                    data: {
                        user_email:email,
                    },
                    success: function (response) {
                        $( '#email_status' ).html(response);
                    }
                });
            }
        }

        function validateForm(){
        var a=document.getElementById("email_status").innerHTML;
        var b="Email Already Exist";
        if(a==b)
        alert('Yes');
        else
        alert('No');
        }
    </script>
</head>
<body>

<form method="POST" action="insertdata.php" onsubmit="return validateForm();">
    <input type="text" name="useremail" id="UserEmail" onkeyup="checkemail();">
    <span id="email_status"></span><br>
    <input type="submit" name="submit_form" value="Submit">
</form>

Expected result when i give an email which is already in db: Yes. Actual result: No

jquery ajax javascript
1 Answers

You code has design problems. 1.The biggest one is that you are make an ajax call request while user is typing, that will probably cause you big overhead. 2. the same design is causing the validation not working properly.

Allow me to make a proposal.

 <form method="POST" action="insertdata.php" id="form" onsubmit="return false;">
    <input type="text" name="useremail" id="UserEmail" >
    <span id="email_status"></span><br>
    <input type="submit" name="submit_form" value="Submit" onClick="checkemail();">
    </form>

in this approach i have removed the keyup event form the input and have added the function checkemail() on button click.

var emails = [];
function checkemail() {
    var email = document.getElementById('UserEmail').value;
    if (email) {
        if (!emails.includes(email)) {
            $.ajax({
                type: 'post',
                url: 'check.php',
                data: {
                    user_email: email,
                },
                success: function (response) {
                    $('#email_status').html(response);
                    if (response == 'Email Already Exist') {
                        console.log("email "+email+" is a spam")
                        emails.push(email);
                    } else {
                        document.getElementById('form').setAttribute('onsubmit', 'return true;');
                        document.getElementById('form').submit;
                    }
                }
            });
        }else{
            console.log("email "+email+" is a spam")
        }
    }

}

In this design approach code does 1.on button click executes checkemail function 2.checkemail function checks the emails array if contains the email from the text input, if the email is in the array then a log is written in console, if not then an ajax requset is done. 3.if the email is in the db then an other log is made, else the form is submitted.

This approach provides the ability of keeping every email that the user will possible write. I also suggest your ajax script instead of returning a text message to return a code maybe 0 or 1, that way comparison is safer.

Last but not least, although i don't know where you intend to use that code please keep in mind that a bot will probably bypass this java script code and hit directly your server side script. So you should think of a server side check also. If you need more help or clarifications don't hesitate to ask.

user_89419790
Related