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

2 years ago

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">
Jonathan Hazelwood

Jonathan Hazelwood 0 points

2 years ago

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

Jonathan Hazelwood 0 points

2 years ago

Hussein

Can you show an example?
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

2 years ago

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?
Jonathan Hazelwood

Jonathan Hazelwood 0 points

2 years ago

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);
    });
});
Jonathan Hazelwood

Jonathan Hazelwood 0 points

2 years ago

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

2 years ago

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);
    }); 
});
Jonathan Hazelwood

Jonathan Hazelwood 0 points

2 years ago

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?