Jquery within a PHP loop make unique

Question

I'm trying to create a simple food cart which has; options i.e. small, medium, large and extras i.e. cheese, onions, chilli's.

I have a script which calculates the amounts however the script is within a while loop for each food item, I'm having some difficulty making each call for the script unique.

This is what I have so far: http://jsfiddle.net/2F8LA/1/

I have tried using echo $testnumber next to each id within the PHP and JS to make them unique but, it doesn't work. Think I'm in a little over my head :)

How can I make each loop unique please? Thanks in advance.

<?php
$testnumber = 5;
?>
<?php do { ?>
<?php $testnumber -= 1;?>
<hr />
<div>
<div> 
<select id="options" name="options" class="options">
<option value="10.00">$10.00</option>
<option value="20.50">$20.50</option>
<option value="30.80">$30.80</option>
</select><span style="margin-left:30px;">TOTAL: $<span id="totalamount"> </span></span>
</div>
<br />
<div>
<input type="checkbox" name="extra" value="0.50" />$0.50
<input type="checkbox" name="extra" value="1.50" />$1.50
<input type="checkbox" name="extra" value="0.80" />$0.80
</div>
</div><br />
<script type="text/javascript">
// for adding the options and extras
function displayVals() { // get option value
  calcUsage();
  var singleValues = $("#options").val();
}

var $cbs = $('input[name="extra"]');
function calcUsage() {
var total = $("#options").val();
$cbs.each(function() {
    if(this.checked)
        total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
});
$("#totalamount").text(total); // display total
}

$("#options").change(displayVals);

displayVals();

//For  checkboxes           
$cbs.click(calcUsage);
</script>
<?php }while($testnumber > 0); ?>
<hr />

Thank you Ohgodwhy I now have the following code but, I don't understand how to connect "displayVals(ele)" to "displayVals($(this))" sorry I'm new to Jquery/Javascript.

If you don't have time to explain I understand but, if you have a link to somewhere I can learn about what this means that would be great.

<head>
<script type="text/javascript" src="scripts/jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
    $(document).on('change', 'select[name^=options]', function(){
        displayVals($(this));
    });

    $(document).on('click', 'input[name^=extra]', function(){
        calcUsage($(this));
    });
});
</script>
</head>
<?php $testnumber = 5; ?>
<?php do {  ?>
<?php $testnumber -= 1; ?>
<hr />
<div>
    <div> 
    <select id="options" name="options-<?php echo $testnumber; ?>" class="options">
    <option value="10.00">$10.00</option>
    <option value="20.50">$20.50</option>
    <option value="30.80">$30.80</option>
    </select><span style="margin-left:30px;">TOTAL: $<span id="totalamount-<?php echo $testnumber; ?>"> </span></span>
    </div>
    <br />
    <div>
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.50" />$0.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="1.50" />$1.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.80" />$0.80    
    </div>
</div><br />
<script type="text/javascript">
function displayVals(ele) { // get option value
    calcUsage(ele);
    var singleValues = ele.val();
}

function calcUsage(ele) {
    var total = ele.val(),
    $cbs = ele.parent().parent().find('input[name="^extra"]'),
    cnt = cbs.prop('name').split('-')[1]; // the iteration number
    $cbs.each(function() {
        if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
    });
    $("#totalamount-"+cnt).text(total); // display total
}
</script>
<?php }while($testnumber > 0); ?>
<hr />

Barmar · Accepted Answer · 2013-03-27 08:47:55Z

1

Use this:

<select id="options" name="options<?php echo $testnumber; ?>" class="options">

and:

<input type="checkbox" name="extra<?php echo $testnumber; ?>[]" value="0.50" />$0.50
<input type="checkbox" name="extra<?php echo $testnumber; ?>[]" value="1.50" />$1.50
<input type="checkbox" name="extra<?php echo $testnumber; ?>[]" value="0.80" />$0.80

answered Mar 27, 2013 at 8:47

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barmar Over a year ago

Actually, there's more to it than this. I didn't notice that you're generating your JS within the loop, that's not usually right. What you really should do is use classes and DOM traversal to find the related options and extras, and then have one set of functions for everything. This is more coding than I feel like doing now, you really should study jQuery and figure out how to do it yourself.

monsterboy Over a year ago

Thanks for trying Barmar, appreciate your time.

Ohgodwhy · Accepted Answer · 2013-03-27 21:03:13Z

1

Add the iteration number to the selects, and inputs, as pointed out by @Barmar.

<select id="options" name="options-<?php echo $testnumber; ?>" class="options">

Do the same for the inputs...

<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.50" />$0.50
<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="1.50" />$1.50
<input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.80" />$0.80

Don't forget the totalvalue span..

<span id="totalamount-<?php echo $testnumber; ?>">

Some functions that you wanted, just pass in the element as ele and use it to get the values.

function displayVals(ele) { // get option value
    calcUsage(ele);
    var singleValues = ele.val();
}

function calcUsage(ele) {
    var total = ele.val(),
    $cbs = ele.parent().parent().find('input[name^="extra"]'),
    cnt = $cbs.prop('name').split('-')[1]; // the iteration number
    $cbs.each(function() {
        if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
    });
    $("#totalamount-"+cnt).text(total); // display total
}

Now delegate the events to the document. Non-static elements need to leverage jQuery's .on() method to be bound to a static element. pass the element $(this) to the function to have the calculations performed.

$(document).on('change', 'select[name^=options]', function(){
    displayVals($(this));
});

$(document).on('click', 'input[name^=extra]', function(){
    calcUsage($(this));
});

This should all be in working order.

Edit

Do not use this in a loop, simply place at the head, in a script tag, wrapped in $(function(){//the javascrpit here });

edited Mar 27, 2013 at 21:03

answered Mar 27, 2013 at 9:46

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

8 Comments

monsterboy Over a year ago

Thanks Ohgodwhy really appreciate your help and time, I have updated my current code to my original post and a question if you have the time. great username btw

Ohgodwhy Over a year ago

@monsterboy when you pass $(this) to the function, you're sending the actual jQuery object that refers to the element that the event occured on. When passing in something to a function, it's referred to as an argument. You can read more about arguments over at the MDN. So ele is really just the object that the change event or click event was fired from.

Ohgodwhy Over a year ago

oops it's right here, change ` cbs.prop('name').split('-')[1];` to $cbs.prop('name').split('-')[1]; note the missing $ in front of cbs

Ohgodwhy Over a year ago

@monsterboy I'm sorry, it was extremely late and I'd been deprived of sleep for awhile. The reason the split didn't work is because the $cbs selector was wrong, instead of $('input[name="^extra"]'), it should be $('input[name^="extra"]').

Ohgodwhy Over a year ago

let us continue this discussion in chat

|

monsterboy · Accepted Answer · 2013-03-29 09:08:04Z

Thanks to user Ohgodwhy and a someone at Fiverr I now have the script working as intended.

I'm adding the script to help anyone looking for something similar.

<head>
<script type="text/javascript" src="scripts/jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
    $(document).on('change', 'select[name^=options]', function(){
        displayVals($(this));
    });

    $(document).on('click', 'input[name^=extra]', function(){
        calcUsage($(this));
    });
});

function displayVals(ele) { // get option value
    calcUsage(ele);
    var singleValues = ele.val();
}

function calcUsage(ele) {
    var total = ele.parent().parent().find('#options').val(),
    $cbs = ele.parent().parent().find('input[name^="extra"]'),
    cnt = ele.prop('name').match(/\d/)[0];
    $cbs.each(function() {
        if(this.checked) total = (parseFloat(total) + parseFloat(this.value)).toFixed(2);
    });
    $("#totalamount-"+cnt).text(total); // display total
}
</script>
</head>
<?php $testnumber = 5; ?>
<?php do {  ?>
<?php $testnumber -= 1; ?>
<hr />
<div>
    <div> 
    <select id="options" name="options-<?php echo $testnumber; ?>" class="options">
    <option value="10.00">$10.00</option>
    <option value="20.50">$20.50</option>
    <option value="30.80">$30.80</option>
    </select><span style="margin-left:30px;">TOTAL: $<span id="totalamount-<?php echo $testnumber; ?>"> </span></span>
    </div>
    <br />
    <div>
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.50" />$0.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="1.50" />$1.50
    <input type="checkbox" name="extra-<?php echo $testnumber; ?>[]" value="0.80" />$0.80    
    </div>
</div><br />
<?php }while($testnumber > 0); ?>
<script type="text/javascript">
$('[id^=options]').each(function(){ displayVals($(this)); });
</script>
<hr />

Collectives™ on Stack Overflow

Jquery within a PHP loop make unique

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related