CODEWITHSUNDEEP
javascriptjquerystringjquery-selectors
cschippe
cschippe

Reputation: 81

Comparing an HTML value to a jquery input value

I feel like I'm missing something small, but I can't seem to make this work. I am validating a form where a user is allowed to change their email, and among other things want to confirm that they have not re-entered the same email that they already have.

I've played around a lot trying to pull the value of the p with id="originalemail", but I can't seem to get it in a form that, when compared to the value entered, reflects that the strings are identical. Any help would be hugely appreciated.

For the sake of simplicity, I've trimmed the function to only validate based on whether or not the entered new email matches the currently existing (original) email:

JS/jquery:

<script>
function validateEmailChange()
{
    // set comparison
    var originalemail=document.getElementById("originalemail").innerHTML;
    var newemail=document.forms["emailform"]["emailnewemail"].value;

    if (newemail == originalemail)
    {
        $('#emailnewemailoff').html("Same as current email address");
        $('#emailconfirmationoff').html("");
        return false;
    }
</script>

HTML:

// show the user's current email
<p id="originalemail"><?= htmlspecialchars($user[0]["email"]) ?></p>

<form id="emailform" name="emailform" onsubmit="return validateEmailChange()" 
              action="email.php" method="post">

<input id="emailnewemail" name="emailnewemail" placeholder="New Email" type="text"/>
<input type="submit" value="Change Email" class="btn"/>

Thanks so much!

Upvotes: 0

Views: 2400

Answers (4)

cschippe
cschippe

Reputation: 81

I realized that my issue was that I was wrapping the

line, and as a result leading zeroes were being included. It looked like the below. Fixing this solved the problem, thanks all for your help, and I apologize for the bad question posting (still new to coding, so syntax like this still gets me)

<p id="originalemail">
    <?= htmlspecialchars($user[0]["email"]) ?></p>

Upvotes: 0

Jeromy French
Jeromy French

Reputation: 12121

I created jQuery that evaluates when the user moves off the email input field ($('#emailnewemail').blur(), and it compares the values case-insensitive (.toLowerCase()) too, so that '[email protected]' is recognized to be the same as '[email protected]'.

$('#emailnewemail').blur(function() {
    if ($('#originalemail').text().toLowerCase() === $('#emailnewemail').val().toLowerCase()) {
        $('#emailnewemailoff').html("Same as current email address");
        $('#emailconfirmationoff').html("");
        return false;
    } else {
        $('#emailnewemailoff').html("Not the same email address");
    }
});

See http://fiddle.jshell.net/jhfrench/EZp6R/ for a working example.

Upvotes: 1

Lix
Lix

Reputation: 47976

You might want to try extracting the values using jQuery. I'm not sure why you decided to fall back to native JavaScript for these two lines - 

var originalemail=document.getElementById("originalemail").innerHTML;
var newemail=document.forms["emailform"]["emailnewemail"].value;

Using jQuery, these lines would look something like this - 

var originalemail = $("#originalemail").text();
var newemail = $("#emailnewemail").val();

Here is a little demo

Upvotes: 0

t.niese
t.niese

Reputation: 40842

You could try if( $('#originalemail').text() == $('#emailnewemail').val() )

Upvotes: 1

Related Questions