I have a booking widget on my website which checks the availability of the accommodation on a linked booking website.
I would like to have the "check out date" automatically be '2 days later' than the check in date, unless the user selects otherwise.
Eg: Check in date (entered on calendar by user) 1 September 2016
Check out date - automatically has a text of 3 September 2016
THis is the code for my iFrame Widget:
<div id="booking_widget">
<form class="formtastic" target="_blank" action="/properties/airportgamedirect?locale=en" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="hidden" name="locale" id="locale" value="en">
<input type="hidden" name="from_widget" id="from_widget" value="true">
<fieldset class="inputs">
<ol>
<li class="string">
<label>Check In Date</label>
<input type="text" name="check_in_date_view" id="check_in_date_view" class="calendar hasDatepicker" data-init-val="null"><img class="ui-datepicker-trigger" src="https://d3ltdu8ywan39g.cloudfront.net/assets/cal_button-27edd7f4d9f9f1a1ef085e5b4e139081.png" alt="Select a date" title="Select a date"><input type="hidden" name="check_in_date" id="check_in_date" value="">
</li>
<li class="string">
<label>Check Out Date</label>
<input type="text" name="check_out_date_view" id="check_out_date_view" class="calendar hasDatepicker" data-init-val="null"><img class="ui-datepicker-trigger" src="https://d3ltdu8ywan39g.cloudfront.net/assets/cal_button-27edd7f4d9f9f1a1ef085e5b4e139081.png" alt="Select a date" title="Select a date"><input type="hidden" name="check_out_date" id="check_out_date">
</li>
<li class="select_occupancies">
<label>Adults</label>
<select name="number_adults" id="number_adults"><option value="0">0</option>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option></select>
</li>
<li class="select_occupancies">
<label>Children</label>
<select name="number_children" id="number_children"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option></select>
</li>
</ol>
</fieldset>
<fieldset class="actions">
<ol>
<li><input type="submit" name="commit" value=" Check Availability" class="check_availability"></li>
</ol>
</fieldset>
</form>
</div>
I have tried
<input type="text" name="check_out_date_view" id="check_out_date_view" class="calendar hasDatepicker" data-init-value="text" value="check_in_date">
but that just adds the text "check_In_date" instead of the "check_in_date" value from the above field
You have to set and event listener on the check-in date box, once the user pick a date. you update the check-out box, something like this
$( "#check_in_date" ).change(function() {
//add two days
var checkoutDate = new Date($(this).val)
checkoutDate.setDate(checkoutDate.getDate() + 2)
//update check-out input
$( "#check_out_date" ).val(checkoutDate)
});
Related
I am trying to get a sum of input values in an HTML form within a Laravel application.
Here is the code that I already have. Any suggestions on how this is possible?
Two Things I want to achieve:
For "Total Cost" I want it to add up the two dollar amounts of the two inputs and display the sum in the input field.
For "Total Qty" I want it to add up the two quantity amounts of the two inputs and display the sum in the input field.
<!--FORM-->
<form action="/orders/create" method="POST">
#csrf
<div class="form-group">
<label for="productsOrdered">Products Ordered</label>
<input name="product1" class="form-control" id="product1" placeholder="Product 1">
<input name="price1" class="form-control" id="price1">
<select name="q1" class="form-control" id="q1">
<option value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
<input name="product2" class="form-control" id="product2" placeholder="Product 2">
<input name="price2" class="form-control" id="price2">
<select name="q2" class="form-control" id="q2">
<option value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
<div class="form-group">
<label for="shippingcost">Shipping Cost:</label>
<input name="shipping" class="form-control" id="shipping" placeholder="--.-- (no dollar sign)">
</div>
<div class="form-group">
<label for="tax">Tax</label>
<input name="tax" class="form-control" id="tax" placeholder="(leave blank if 0)">
</div>
<!--For "Total Cost" I want it to add up the two dollar amounts of the two inputs and display the sum in the input field.-->
<div class="form-group">
<label for="total">Total Order Cost:</label>
<input name="total" class="form-control" id="total">
</div>
<!--For "Total Qty" I want it to add up the two quantity amounts of the two inputs and display the sum in the input field.-->
<div class="form-group">
<label for="total">Total Qty:</label>
<input name="total" class="form-control" id="total">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Unfortunately I'm having trouble finding decent documentation/instructions on how to achieve this.
Add this to the bottom of your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#price2").keyup(function(){
$("#total").val(parseFloat($("#price2").val()) + parseFloat($('#price1').val()));
})
$("#q2").change(function(){
$("#total_quan").val(parseInt($("#q1").val()) + parseInt($('#q2').val()));
})
</script>
And change the "id" of the quantity total to "total_quan". As a good note, you shouldn't have two elements with the same ID.
Now, this this code I've supplied, this will only work if the first quantity/price is entered followed by the second input. It won't calculate if it's entered as product two then product one. But this should be enough to get you tested and started.
This was all done with jquery/javascript. From here, just send the value of the totals to the laravel back end to do whatever you need to do with the data. So javascript to do the calculations from the form, php to do the server side stuff with the output of the calculations supplied from JS.
Using JQuery to change an image on the change of a select, the code works, on one form, however if I try to apply to same thing to another form the JQuery just doesn't work. Need to implement this one a basis where I can use the same code to change individual select.
Feel free to run the code and see what I mean, the first item works, change the select option to red, the image changes, try the same with the next one, no luck although its written in the same fashion.
If you need anything else let me know, thanks in advance.
$(function(){
$("#colour").on('change', function(){
$("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li></ul>
It is bad thing to give same id to multiple element. There is same ID used for multiple element. Make it unique it works.
You can use class instead of id. like Here i give colour class and change image using sibling selector.
$(function(){
$(".colour").on('change', function(){
$(this).siblings(".item_thumb").attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour" class="colour">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour1" class="colour">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li></ul>
Hope it helps.
It looks to me that you have "imageToSwap" duplicated. Therefore the function isn't able to locate the correct object to refresh.
As part of W3C rules, a html cannot contain duplicate ids. So I would suggest to change the ids and perform your color change by picking up class as below:
Changes -
Added class colorChange to your color select element and changed its
ids
Changed event change to fire on class and getting the actual target image with $(this) reaching to its parent li and getting the img with class image_thumb
$(function() {
$(".colorChange").on('change', function() {
$(this).closest('li').find('.item_thumb').attr("src", $(this).find(":selected").attr("data-src"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="shelf">
<li class="simpleCart_shelfItem">
<img id="imageToSwap" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png" />
<h4 class="item_name">C&J Wash Bag</h4>
<span class="item_price">£30.00</span>
<select id="colour" class="colorChange">
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagBlack.png">Black</option>
<option value="Red" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/washbagRed.png">Red</option>
</select>
<select class="item_quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
<li class="simpleCart_shelfItem">
<img id="imageToSwap1" class="item_thumb" src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png" />
<h4 class="item_name">C&J Wool Lined Gloves</h4>
<span class="item_price">£28.00</span>
<select id="colour1" class="colorChange">
<option value="Brown" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBrown.png">Brown</option>
<option value="Tan" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesTan.png">Tan</option>
<option value="Black" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesBlack.png">Black</option>
<option value="Grey" data-src="http://candj.azurewebsites.net/PHP/2/shelf_img/glovesGrey.png">Grey</option>
</select>
<select required class="item_quantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="hidden" class="item_shipping" value="0" />
<input type="button" class="item_add" value="Add To Basket" />
</li>
</ul>
I have a site with the same form in different spots on the page. I would like to be able to have a placeholder in a text input change when I change the select option. I have a JSFiddle with a kinda example: http://jsfiddle.net/y1jhhqLz/
All the forms look like this:
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
And in this example, I would like to have the place holder change on the input with the id myInput, when I select the option Third.
I have tried many different ways to include the most recent attempt, which I put on the JSFiddle.
Any help would be greatly appreciated!
Set select onclick attribute to
onclick="changePlaceHolder(this,'#myInput1');"
and change javascript function to
function changePlaceHolder(dropdown, element) {
if (jQuery(dropdown).val() == "Third") {
jQuery(element).attr('placeholder', 'You did it correctly!');
} else {
jQuery(element).at}tr('placeholder', '');
}
}
in JSFiddle, you should set the loading behaviour to "no wrap - in head"
Done!
Add a change listener to the select, then get the value of the select and set the attribute placeholder to said value:
$('select').on('change',function(){
var place=$(this).val();
var num=$(this).attr('id').substring(8);
$('#myInput'+num).attr('placeholder',place);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>How do I get it so that when I click on the option that says Third Choice (for any form), it will put in the text box (with the form and number ) a placeholder: "You did it correctly"? But it shouldn't change any other form but the one where you change the select to the Third Choice option. I tried using a onClick function.
</p>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Several things going on. First, remove the onClick events (we are not looking for when the select is clicked but rather when it is changed) and instead use jQuery's on method. Now changePlaceHolder has access to this which is the actual select box which was changed.
See below:
jQuery('select').on('change input', changePlaceHolder);
function changePlaceHolder() {
//I have to use jQuery instead of $ because it is on a wordpress site
if (jQuery(this).val() == "Third") {
jQuery(this).next().attr("placeholder","You did it correctly!");
} else {
jQuery(this).next().attr("placeholder"," ");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" >
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"/>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"/>
</form>
Other things to note: your <input> tags to not require an ending tag </input>, instead write them like this <input />. Note that the "/" ends the tag. You want to edit the input immediately following your select, in which case you can use jQuery(this).next() which will select the element immediately following the current this element.
For your specific case I would not touch source code, would define all functionality in script. Setting the onlick event inline is not a good idea, scripts should not go together with content.
I wrote this script having in mind that your select and input tags do not have to be siblings, the only condition is that both belong to same form:
/* This way you can use $ in your Wordpress */
(function ($) {
$('select').on('change', function(e) {
var thisSelect = $(this);
var thisSelectValue = thisSelect.val();
var thisInput = thisSelect.closest('form').find('input[id^=myInput]');
if (thisSelectValue == 'Third') {
thisInput.attr("placeholder", "You did it correctly!");
} else {
thisInput.attr("placeholder", "");
}
});
}(jQuery));
p {
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Please find the working code for you:
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function changePlaceHolder(element,target) {
alert(element);
if ( element == "Third") {
jQuery(target).attr("placeholder","You did it correctly!");
} else {
jQuery(target).attr("placeholder","");
}
}
</script>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" name="mySelect1" onclick="changePlaceHolder( this.value ,'#myInput1' );">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
</body>
</html>
I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});
I have a dynamic number of dropdown boxes with different values. I wan't to be able to calculate all of the totals from all of the boxes together.
Currently, I have a snippet that will calculate the total of one box, but when I select another box, it will show the total of that one instead. My program can have any amount of drop down boxes but it's random. Heres a snippet that calculates one box at a time
$('.drop').on('change',function() {
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
$("div.total-amount").text("$"+total);
});
My form rendered looks like this
<form accept-charset="UTF-8" action="/orders" id="payment-form" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="ia3sQyXOn0BP3GUDHmLmghjLFyK/27F8N9EEyhYN8UI=" /></div>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_2" value="2"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="2" />
another
<br>
<div class='subheader'>$5.55</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="555" id="another" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
<li class='bullet-item'>
<div class='product panel'>
<div class='small-12'>
<h4>
<li class="product" id="product_1" value="1"><div class='row'>
<div class='small-2 columns switch'>
<input id='switchName1' type='checkbox'>
<label for='switchName1'></label>
</div>
<div class='small-7 columns'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="1" />
test
<br>
<div class='subheader'>$0.33</div>
</div>
<div class='small-3 columns'>
<select class="drop" data-cost-per-unit="33" id="test" name="order_products[][quanity]" prodindex="1"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</li>
</h4>
</div>
</div>
</li>
Can a jQuery expert help me out here?
//cache your selectors
var drop = $('.drop');
//your grand total variable
var grandtotal = 0;
//create a function to call to reuse for all drops
function getTotal(){
//cycle through each one
drop.each(function(i,el){
//i is the number and el is the element (or this)
var val = $(this).val();
var price = $(this).attr('data-cost-per-unit')
var total = price * val
grandtotal = grandtotal + total;
});
$("div.total-amount").text("$"+grandtotal);
}
//bind on change to all drops
drop.on('change',getTotal);