Display Based on Entered Amount

Loops & Logic
#1

Hi,

I have a question about a setup I am hoping I can accomplish with the If/Else Loops and Logic condition.

  1. There is a post which displays an amount range, e.g. $10000-12000, the amounts are retrieved from two ACF custom fields on the post - “amount from” and “amount to”.
  2. I have an “entry field” on the post (created with HTML, similar to a form field) where a user needs to enter an amount within that range in order to submit a request.
  3. I would like to use the If/Else condition to display a form (which submits the request) if the amount entered in the “entry field” falls within the range of the two custom fields for the post.

I am hoping this can be accomplished with LandL. Has anyone tried and succeeded doing something like this? Thanks in advance.

Regards.

#2

This is more of a JS question than an L&L question, since the logic needs to happen based on user input that isn’t saved to the database. I’ve done something similar on our agency site with a range input which hides certain hosting plans based on a value output in a custom data attribute on each.

So the answer is unfortunately no, the If/Else conditional tags can’t do this, but some simple JS should suffice, and it will be easy to get your ACF custom field values into your template JS using the Set tag: <Set js=variable_name type=number>..</Set>. If you’re not super comfortable writing JS (like me), I recommend looking up snippets instead of starting from scratch, checking your inspector console for bugs, and using ChatGPT as a coding buddy :slight_smile:

Here’s a little help getting started:

Template

<Set js=range_min type=number><Field my_custom_min_value_field /></Set>
<Set js=range_max type=number><Field my_custom_max_value_field /></Set>
<input type=number id=textbox_id />
<div id="myform" style="display: none;">
  test
</div>

Javascript

// Get the textbox and form elements by their IDs
var textbox = document.getElementById('textbox_id');
var myform = document.getElementById('myform');

// Attach an event listener to the textbox that runs whenever the user edits it
textbox.addEventListener('input', function() {
  // Get the current value of the textbox
  var x = textbox.value;

  // Check if the value is between range_min and range_max
  if (between(x, range_min, range_max)) {
    // If it is, show the form by setting its display property to 'block'
    myform.style.display = 'block';
  } else {
    // If it's not, hide the form by setting its display property to 'none'
    myform.style.display = 'none';
  }
});
#3

Hi @julia,

Thanks for replying and for such a detailed response. I realised after posting this thread that there would be no way to achieve what I want with L&L being that I need to use an input that isn’t saved within the post.

I couldn’t delete the original question which is probably a good thing because your suggestion of using JS instead is definitely worth looking into and hopefully will be helpful to others.

You’ve been most helpful. Thanks again. :+1:

1 Like