We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 3349
    • 126 Posts
    Hello

    My client has requested the contact form on their site have an email address and a confirm email address field.

    I can happily add in another input field to my contact form but how do I go about checking to make sure the two field values are the same?

    Appreciate some help here...

    Thanks

    bS
      • 1122
      • 209 Posts
      Both emails are -- at the very latest -- known at the moment of form submission so the following simple js function should fit your needs:
      <form ...>
          ...
          Email: <input type="text" name="email" id="unique1" value="" />
          Confirm: <input type="text" name="email2" id="unique2" value="" />
          ...
          <input type="submit" name="send" value="Send" onclick="return compareEmails();" />
      </form>
      <script type="text/javascript">
      <!--
      function compareEmails() {
          var email_1 = document.getElementById('unique1');
          var email_2 = document.getElementById('unique2');
          if (email_1.value != email_2.value) {
              alert('Email, confirmation do not match!');
              return false;
          }
          return true;
      }
      -->
      </script>
      
        • 3349
        • 126 Posts
        Thanks for the reply...I added in the code you posted. My code is as below. However, im not getting the JS alert when clicking submit. It seems to be ignoring it.... do I have it positioned correctly? Does it have to go into the <head> of the html doc?

        <form method="post" action="index.php?id=6">
            <input type="hidden" name="formid"  value="feedbackForm" />
        <table border="0" cellpadding="0" cellspacing="0" id="contactform" summary="">
        <tr>
            <th><label for="Name" >Name *</label></th>
            <td><input type="text" name="name"  value="" /></td>
        </tr>
        <tr>
            <th><label for="email" >Email Address *</label></th>
        
            <td><input type="text" name="email" id="unique1"  value="" /></td>
        </tr>
        <tr>
            <th><label for="email2" >Confirm Email *</label></th>
            <td><input type="text" name="email2" id="unique2"  value="" /></td>
        </tr>
        <tr>
            <th><label for="subject" >Subject *</label></th>
            <td><select name="topic" id="topic" > 
        <option>Please select...</option> 
        
        <option value="1" >Community Noticeboard</option>
        <option value="2" >Subscriptions </option> 
        <option value="3" >Writing for the Jura Jottings</option> 
        <option value="4" >Website Queries</option> 
        <option value="5" >Other</option> 
        </select></td>
        </tr>
        <tr>
            <th><label for="comments" >Comments *</label></th>
            <td><textarea cols="41" rows="5" name="comments" ></textarea></td>
        
        </tr>
        <tr>
            <td> </td>
            <td><input class="button" type="submit" name="submit" onclick="return compareEmails();" value="Send" /></td>
        </tr>
        </table>
        </form> 
        <script type="text/javascript">
        <!--
        function compareEmails() {
            var email_1 = document.getElementById('unique1');
            var email_2 = document.getElementById('unique2');
            if (email_1.value != email_2.value) {
                alert('Sorry, your email address don't appear to match!');
                return false;
            }
            return true;
        }
        -->
        </script>
        
          • 1122
          • 209 Posts
          The provided scheme should be implemented within template of the form that is used in your eForm call. (Just for checking, I’ve implemented it in my eForm template and it appeared that it is working fine.) I don’t know what to advice you more.
            • 3349
            • 126 Posts
            Strange, its still not working for me? Does your contact form use the eForm validation to check for populated fields?

            Would it be possible for you to post your form code here for me to see?

            Thanks again!

            bS
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              In a snippet named "checkFields" I have two functions:
              function setEmail($email) {
                  $_SESSION['formEmail'] = $email;
                  return true;
              }
              
              function checkEmail($confirmEmail) {
                  return ($_SESSION['formEmail'] == $confirmEmail);
              }

              I call the checkFields snippet uncached before the eForm snippet.

              Then in my eForm form tpl I have
                  <input type="text" tabindex="1" name="frEmail" class="text required email" id="frEmail" value="" eform="Your Email:email:1::#FUNCTION setEmail">
                   <input type="text" tabindex="2" name="frEmailConfirm" class="text required email" id="frEmailConfirm" value="" eform="Confirm Email:email:1:Confirm Password field doesn't match Password field:#FUNCTION checkEmail">

              I’ve added the "required email" classnames so I can also use a Javascript validator. It’s always good to have back-end validation as well, since not everyone has javascript enabled.
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
                • 22640
                • 44 Posts
                Thanks for the info Susan. It worked great for me.
                - Glenn