You are viewing limited content. For full access, please sign in.

Discussion

Discussion

JavaScript to check that two fields are equal

posted on March 11, 2020 Show version history

I am wanting to verify the TOTAL and Amount fields are equal only if the Type of Payment is "Right of Way" (.paytype).  The TOTAL field only shows if "Right of Way" is selected.  I found some helpful JS on LF Answers, but since I don't have anything checking to see if the Type of Payment is Right of Way it runs even when the TOTAL field is hidden causing the submit button to disable.  Could someone please help me fix the JS below to only run when Type of Payment (.paytype) equals "Right of Way"?

JavaScript:

Form Preview:

0 0
replied on March 17, 2020

Hi, Vanessa. Surprised that the forum won't let you upload. You could try remove the ".xml" from the file name and try attach it.

 

If not I've made a public folder on google drive that you can upload to https://drive.google.com/drive/folders/11bL-ofS2UsAWggTtDpjN32uY80OlXn5f?usp=sharing

 

0 0
replied on March 17, 2020

Thank you Alistair.  I have added the XML file to the Google Drive folder.

0 0
replied on March 17, 2020

Thanks for that, makes it a bit easier to troubleshoot.

 

Needs 2 fixes:

From your original javascript, change

$('.rowtotal input, .payamount input').change

into

$('.rowtotal input, .payamount input, .paytype input').change

and change

if($('.rowtotal input').val() != $('.payamount input').val())

into

if($('.paytype input:checked').val() === 'Right of Way' && $('.rowtotal input').val() != $('.payamount input').val())

 

The first change is needed because if they select Right of Way, fill in an incorrect value and click away from it, the event that updates the custom error won't execute even though the field is hidden, meaning that the user doesn't see the problem.

Give it a go and if there's any problems with it just say.
 

With the if statement I was missing the ":checked" part. I had ran the code on my browser and thought it worked but I must have missed something along the way, sorry about that one.

1 0
replied on March 18, 2020

Thank you so much Alistair it works perfect now. smiley

0 0
replied on March 11, 2020 Show version history

If you have the "Type Of Payment" radio button with CSS class '.paytype' then you just need add a check into your if statment.

 

Change 

if($('.rowtotal input').val() != $('.payamount input').val())


into

if($('.paytype input').val() == 'Right of Way' && $('.rowtotal input').val() != $('.payamount input').val())

 

0 0
replied on March 12, 2020

Hi Alistair,

Thank you for your response.  I tried what you put above, but when I add it to the JavaScript the custom error message and submit button disable do not work.  Below is what I have.  Am I missing something?

Thank you for your help,

 

Vanessa

$(document).ready(
  function () 
  {    
    var formValid = true; //variable to determine if the form inputs are valid; used for custom errors
       
    $('.rowtotal input, .payamount input').change
    (
      function ()
      {
        if($('.paytype input').val() == 'Right of Way' && $('.rowtotal input').val() != $('.payamount input').val())
       {                                                                
          formValid = false;
          showCustomError('.rowtotal', 'Total must equal Amount.');
        }
        else
        {
          formValid = true;
          hideCustomError('.rowtotal');
        }
      }
    );
    
    $('input[type=submit]').click
    (
      function(e)
      {
        if(!formValid)
        {
          e.preventDefault(); //stop the form from being submitted
          showCustomError('.rowtotal', 'Total must equal Amount.');
        }
        else
        {
          hideCustomError('.rowtotal');
        }
      }
    );   
});

//Using the provided element selector and message, add an error message next to the field
function showCustomError(elementSelector, errorMessage)
{
  hideCustomError(elementSelector); //remove previous error
  
  $(elementSelector + ' input').addClass('custom-error');
  $(elementSelector + ' input').focus();
  $(elementSelector + ' input').parent().append('<p class="custom-error-message">' + errorMessage + '</p>');
}

//Hide the custom error generated by the showCustomError function
function hideCustomError(elementSelector)
{
  $(elementSelector + ' input').removeClass('custom-error');
  $(elementSelector + ' input').siblings('.custom-error-message').remove();
}
0 0
replied on March 12, 2020

hmm, I can't see the issue looking at it there tbh. Could you send me a copy of the form? (It would just make it a little quicker to troubleshoot). In forms, go to the "Manage" tab, tick the process and press the download button in the top right. Then send me the xml that gets downloaded.

 

0 0
replied on March 16, 2020

Hi Alistair, I have downloaded the xml file, but I am unable to upload it.  What is the best way to get the file to you?  Thank you for your help.

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.