Forum

Thread tagged as: Question, Addons, Forms

Javascript with Forms App

I have a client that we are building a custom order form for. Almost complete except for the auto totaling of of price fields for sub-total and total. We are implementing a JavaScript function to complete the action but it will not work inside of perch:form or perch:input tags.

This Works:

<input type="text" id="value1" class="price"> <input type="text" id="value2" class="price"> <input type="text" disabled="disabled" id="result">

$(document).ready(function(){ $(".price").keyup(function(){ var val1 = +$("#value1").val(); var val2 = +$("#value2").val(); $("#result").val(val1+val2); }); });

This Does't Work:

<perch:form> <perch:input type="text" id="value1" class="price"> <perch:input type="text" id="value2" class="price"> <perch:input type="text" disabled="disabled" id="result"> </perch:form>

$(document).ready(function(){ $(".price").keyup(function(){ var val1 = +$("#value1").val(); var val2 = +$("#value2").val(); $("#result").val(val1+val2); }); });

Trying to understand why it does not work inside of "perch" tags. Thanks.

Jonathan Hazelwood

Jonathan Hazelwood 0 points

  • 2 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Jonathan,

The ids inside Perch forms are prefixed with a value like form1_. So value1 would be form1_value1.

Instead of relying on id to get the input fields, try using data attributes data- and modify your Javascript accordingly.

<perch:input type="text" id="value1" class="price" data-price="true">

Correction: It is working within <perch:form> but not with a <perch:input> tag.

Hussein

Can you show an example?

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Assuming you have a form like so:

<perch:form id="unicorn" data-form="unicorn">
    <perch:input id="elephant" type="text" data-input="elephant">
</perch:form>

If you only have a single occurrence of the form on the page:

var unicornForm = document.querySelector('[data-form="unicorn"]');

if(unicornForm) {
  var elephantInput = unicornForm.querySelector('[data-input="elephant"]');
}

Does this help?

Hussein Al Hammad

Here is my javascript code (i know is wrong) . Also the form is viewable online at https://dev.trishkaufmann.com/orderform

$(document).ready(function() {
     $(".price").keyup(function() {
        var paymentForm = document.querySelector('[data-form="payment"]');
            if(paymentForm) {
                var priceInput = paymentForm.querySelector('[data-input="price"]')
            }
        $("#subTotal").val(priceInput);
    });
});

Hussein Al Hammad

I got it working like this:

<perch:input id="price" name="price" type="number" data-input="price" placeholder="$" class="form-control price">
<perch:input id="price2" name="price2" type="number" data-input="price2" placeholder="$" class="form-control price">
<perch:input id="price3" name="price3" type="number" data-input="price3" placeholder="$" class="form-control price">
<perch:input id="price4" name="price4" type="number" data-input="price4" placeholder="$" class="form-control price">
<perch:input id="price5" name="price5" type="number" data-input="price5" placeholder="$" class="form-control price">


 $(document).ready(function() {
    $(".price").keyup(function() {
        var val1 = +$('input[data-input="price"]').val();
        var val2 = +$('input[data-input="price2"]').val();
        var val3 = +$('input[data-input="price3"]').val();
        var val4 = +$('input[data-input="price4"]').val();
        var val5 = +$('input[data-input="price5"]').val();
        $('input[data-input="subtotal').val(val1+val2+val3+val4+val5);
    });
});
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Instead of using price, price2, price3, etc. they can all be data-input="price" and you can loop over them with jQuery's each():

$(document).ready(function () {
    $priceInputs = $('[data-form="payment"] [data-input="price"]');

    $priceInputs.keyup(function () { 
        var subtotal = 0;
        $priceInputs.each(function() {
            subtotal += +$(this).val();
        })

        $('[data-input="subtotal"]').val(subtotal);
    }); 
});

Hussein Al Hammad

Nice! Thanks. Any suggestion on how to get the calculated amount from sub total and add it to the shipping to automatically have the total calculated?