I have a checkbox with input field quantity to calculate price automatically. Now it work fine if I check the checkbox option and input quantity.
I would like delete the checkbox and insert only input quantity with calculate price automatically.
<div>
<input type="checkbox" name="option[<?php echo $pt; ?>][]"
value="<?php echo $option_value['product_option_value_id']; ?>|1" id="option-value-<?php echo $option_value['product_option_value_id']; ?>"
price_prefix="<?php echo $option_value['price_prefix']; ?>" price="<?php printf("%.5f", $option_value['price_value_tax']); ?>"
onchange="calc_<?php echo $pt; ?>();"/>
</div>
<div>
<input type="text" name="" id="opt-qty-<?php echo $option_value['product_option_value_id']; ?>" value="1" oninput="
$('#option-value-<?php echo $option_value['product_option_value_id']; ?>').val( <?php echo $option_value['product_option_value_id']; ?> + '|' + Number($(this).attr('value')) );
$('#option-value-<?php echo $option_value['product_option_value_id']; ?>').attr('price', Number($(this).attr('price')) * Number($(this).attr('value')) );
calc_<?php echo $pt; ?>();
"size="4" price="<?php echo $option_value['price_value_tax']; ?>" style="width: 20px;" />
</div>
<span id="total-<?php echo $pt; ?>">
Here the script
function calc_<?php echo $pt; ?>() {
var price = 0;
$('#option-<?php echo $pt; ?> input:checked').each(function() {
if ($(this).attr('price_prefix') == '+') {
price += Number($(this).attr('price'));
} else if ($(this).attr('price_prefix') == '-') {
price -= Number($(this).attr('price'));
}
});
$('#total-<?php echo $pt; ?>').html( price_format_sign(price) );
}
How can work it only with input text (input quantity) and without checkbox input?
Related
How can I hide the original checkboxes and make the labels be clickable and act like checkboxes? I am sure there is a way to do it in JS! I am loading the labels and the checkboxes with PHP, they are loaded dynamically and can always be different, depending on what the user chooses prior to this page. Thanks!
foreach ($row as $type) { ?>
<label for="<?php echo $type['id'] ?>" class="interests-span">
<h3><?php echo $type['Type'] ?></h3>
</label>
<input id="<?php echo $type['id'] ?>" type="checkbox" style="display:block;" value="<?php echo $type['Type']?>" name="options[]"/>
<?php
}
Note: Labels should be linked with id or name.
Here is custom implementation what you want.
But I don't think it is correct to select checkbox with only values
foreach ($row as $type) { ?>
<label for="<?php echo $type['Type'] ?>" class="interests-span"
onclick="toggleCheckboxFromLabel('<?php echo $type['Type'] ?>')"
>
<h3><?php echo $type['Type'] ?></h3>
</label>
<input type="checkbox" style="display:block;" value="<?php echo $type['Type']?>"
name="options[]"/>
<?php } ?>
<script>
function toggleCheckboxFromLabel(val){
var checkbox = document.querySelector('input[type="checkbox"][value="' + val + '"]')
checkbox.checked = !checkbox.checked;
}
</script>
Just add an id equals to the for attribute.
$counter = 0;
foreach ($row as $type) { ?>
<label for="<?= 'checkbox_' . $counter ?>" class="interests-span">
<h3><?php echo $type['Type'] ?></h3>
</label>
<input type="checkbox" style="display:none;" id="<?= 'checkbox_' . $counter ?>" value="<?php echo $type['Type']?>"
name="options[]"/>
<?php
$counter++;
} ?>
I am trying to use JavaScript to calculate total price for the tickets which are selected by using the checkbox. The result is should be shown in a alert window by clicking on the check button which invokes the JavaScript function. But when I click the button nothing happens. I don't even get any error message. I am a beginner so please if anyone can help me, I will be extremely thankful.
<?php foreach ($res as $row): ?>
<form action="book.php" method="get">
<tr><td><?php echo $row['RowNumber']; ?></td><td><?php echo $row['Price']; ?></td>
<td><input type="checkbox" type="hidden" name="myForm[<?php echo $row['RowNumber']; ?>][row]" id="row" value="<?php echo $row['RowNumber']; ?>"></input></td></tr>
<input type="hidden" name="myForm[<?php echo $row['RowNumber']; ?>][price]" id="price" value="<?php echo $row['Price']; ?>"></input>
</form>
<?php endforeach; ?>
</table>
<form action='book.php' method='get'>
Enter Email:<input type='text' name='name'></form>
<script>
function summary() {
var total = 0.0;
var seats = document.getElementById("row").value;
for(i = 1; i <= document.getElementById("row").value; i++) {
if(document.getElementId("row").checked) {
total = total + parseFloat(document.getElementById("price").innerHTML);
}
}
return total;
alert("Price of seats =" + total);
}
</script>
<input type="button" onclick="summary()" value="check">
<?php
You're returning before calling the alert, which means you never get to the alert itself. Remove the return total line.
This is a very common problem.All we have face atleast once.you should use Chrome istead of firefox or internet explorer.close your webpage and restart again.
return total should be after alertbox.
thankx.
You can try this sample
<form action="book.php" method="get">
<table>
<?php foreach ($res as $row): ?>
<tr data-rownumber="<?php echo $row['RowNumber']; ?>">
<td><?php echo $row['RowNumber']; ?></td>
<td><?php echo $row['Price']; ?></td>
<td>
<input type="checkbox" name="myForm[<?php echo $row['RowNumber']; ?>][row]" id="row-<?php echo $row['RowNumber']; ?>" value="<?php echo $row['RowNumber']; ?>" onclick="summary()" />
<input type="hidden" name="myForm[<?php echo $row['RowNumber']; ?>][price]" id="price-<?php echo $row['RowNumber']; ?>" value="<?php echo $row['Price']; ?>" />
</td>
</tr>
<?php endforeach; ?>
</table>
</form>
<form action='book.php' method='get'>
Enter Email:<input type='text' name='name'>
</form>
<script>
function summary() {
var total = 0.0;
var table = document.getElementById('items-table');
var rows = table.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var rowNumber = row.getAttribute('data-rownumber');
var isChecked = document.getElementById('row-' + rowNumber).checked;
if (isChecked) {
var price = parseFloat(document.getElementById('price-' + rowNumber).value);
total += price;
}
}
alert("Price of seats = " + total);
return total;
}
</script>
<input type="button" onclick="summary()" value="check">
I need to set value of text box on change from select box created using jquery
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="<?php echo 'aaa'.$i ?>">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="<?php echo 'bbb'.$i ?>" id="bbb" name="<?php echo 'bbb'.$i ?>"/>
<input type="hidden" class="<?php echo 'ccc'.$i ?>" name="<?php echo 'ccc'.$i ?>" id="ccc" />
<?php } ?>
<?php } ?>
<script>
$('.aaa').change(function () {
var otherValue=$(this).find('option:selected').attr('data-xyz');
var someOtherValue=$(this).find('option:selected').attr('data-abc');
$('.bbb').val(otherValue);
$('.ccc').val(someOtherValue);
});
</script>
How to change value class bbb0-bbb5 in jquery without using loop in jquery
Do not update the class names in php-loop, classes need not be unique.
To select input:hidden elements, no need to specify ID attribute
$('.aaa').change(function() {
var otherValue = $(this).find('option:selected').attr('data-xyz');
var someOtherValue = $(this).find('option:selected').attr('data-abc');
$(this).siblings('.bbb').val(otherValue);
$(this).siblings('.ccc').val(someOtherValue);
});
<?php for($i=0;$i<5 ;$i++) { ?>
<select id="<?php echo 'aaa'.$i ?>" class="aaa">
<?php for($i=0;$i<5 ;$i++) { ?>
<option value="1112" data-xyz="dynamic_value " data-abc="dynamic_value">dynamic_value</option>
</select>
<input type="hidden" class="bbb" name="<?php echo 'bbb'.$i ?>" />
<input type="hidden" class="ccc" name="<?php echo 'ccc'.$i ?>" />
<?php } ?>
<?php } ?>
I am using jQuery .change to fill form input fields when an option is selected from a drop list within same form. It works fine in a standalone HTML document but when used in a WordPress widget administration, the fields do not dynamically fill when the option is selected. What is causing the failure? As far as I see with my coding, all related IDs match. Please review the following coding. The working function can be viewed at JSFiddle demo
This is the coding in use
function update( $new_instance, $old_instance ) {
$instance['postop'] = ($new_instance['postop']);
$instance['postopleft'] = ($new_instance['postopleft']);
$instance['postopright'] = ($new_instance['postopright']);
$instance['posmiddle'] = ($new_instance['posmiddle']);
$instance['posbottomleft'] = ($new_instance['posbottomleft']);
$instance['posbottomright'] = ($new_instance['posbottomright']);
$instance['posbottom'] = ($new_instance['posbottom']);
$instance['presets'] = esc_attr($new_instance['presets']);
return $instance;
}
function form( $instance ) {
$postop = isset($instance['postop']) ? ($instance['postop']) : '[titleh3]';
$postopleft = isset($instance['postopleft']) ? ($instance['postopleft']) : '[date]';
$postopright = isset($instance['postopright']) ? ($instance['postopright']) : '';
$posmiddle = isset($instance['posmiddle']) ? ($instance['posmiddle']) : '[image][text][br][readmore]';
$posbottomleft = isset($instance['posbottomleft']) ? ($instance['posbottomleft']) : '[comments]';
$posbottomright = isset($instance['posbottomright']) ? ($instance['posbottomright']) : '[category]';
$posbottom = isset($instance['posbottom']) ? ($instance['posbottom']) : '';
$presets = isset($instance['presets']) ? ($instance['presets']) : 'default';
//form field IDs
$fieldpresets = $this->get_field_id('presets');
$fieldpostop = $this->get_field_id('postop');
$fieldpostopleft = $this->get_field_id('postopleft');
$fieldpostopright = $this->get_field_id('postopright');
$fieldposmiddle = $this->get_field_id('posmiddle');
$fieldposbottomleft = $this->get_field_id('posbottomleft');
$fieldposbottomright = $this->get_field_id('posbottomright');
$fieldposbottom = $this->get_field_id('posbottom');
//inline jQuery
echo "
<script type=\"text/javascript\">
jQuery(document).ready(function(){
jQuery('#$fieldpresets').change(function() {
var curRowId = jQuery('#$fieldpresets').val();
jQuery('#$fieldpostop').val( jQuery('#' + curRowId + ' span.postop').text() );
jQuery('#$fieldpostopleft').val( jQuery('#' + curRowId + ' span.postopleft').text() );
jQuery('#$fieldpostopright').val( jQuery('#' + curRowId + ' span.postopright').text() );
jQuery('#$fieldposmiddle').val( jQuery('#' + curRowId + ' span.posmiddle').text() );
jQuery('#$fieldposbottomleft').val( jQuery('#' + curRowId + ' span.posbottomleft').text() );
jQuery('#$fieldposbottomright').val( jQuery('#' + curRowId + ' span.posbottomright').text() );
jQuery('#$fieldposbottom').val( jQuery('#' + curRowId + ' span.posbottom').text() );
});
});
</script>
";
?>
//the widget admin form select
<select id="<?php echo $presets; ?>" name="<?php echo $presets; ?>">
<option value="default" selected>Default</option>
<option value="Style2">Style2</option>
</select>
//this is the data to be filled dynamically into the input fields following
<ul>
<li id="default">
<span class="top">[title]</span>
<span class="topleft">[date]</span>
<span class="topright">[comments]</span>
<span class="middle">[image][text]</span>
<span class="bottomleft">[readmore]</span>
</li>
<li id="Style2">
<span class="top">[title]</span>
<span class="middle">[image][text]</span>
<span class="bottom">[date][comments]</span>
<span class="bottomleft">[readmore]</span>
</li>
</ul>
<input class="widefat" id="<?php echo $fieldpostop; ?>" name="<?php echo $this->get_field_name('postop'); ?>" type="text" value="<?php echo $postop; ?>" placeholder="Head" />
<input class="widefat" id="<?php echo $fieldpostopleft; ?>" name="<?php echo $this->get_field_name('postopleft'); ?>" type="text" value="<?php echo $postopleft; ?>" placeholder="Top Left" />
<input class="widefat" id="<?php echo $fieldpostopright; ?>" name="<?php echo $this->get_field_name('postopright'); ?>" type="text" value="<?php echo $postopright; ?>" placeholder="Top Right" />
<input class="widefat" id="<?php echo $fieldposmiddle; ?>" name="<?php echo $this->get_field_name('posmiddle'); ?>" type="text" value="<?php echo $posmiddle; ?>" placeholder="Middle" />
<input class="widefat" id="<?php echo $fieldposbottomleft; ?>" name="<?php echo $this->get_field_name('posbottomleft'); ?>" type="text" value="<?php echo $posbottomleft; ?>" placeholder="Bottom Left" />
<input class="widefat" id="<?php echo $fieldposbottomright; ?>" name="<?php echo $this->get_field_name('posbottomright'); ?>" type="text" value="<?php echo $posbottomright; ?>" placeholder="Bottom Right" />
<input class="widefat" id="<?php echo $fieldposbottom; ?>" name="<?php echo $this->get_field_name('posbottom'); ?>" type="text" value="<?php echo $posbottom; ?>" placeholder="Foot" />
<?php }//form $instance
Update:
I removed the $ from ready(function() and now the text fields are being populated when an option is selected, but each field is getting the same data 3 times
eg: [title][title][title]
Why would this happen?
I have a form which has some text fields. Text fields may increase or decrease according to database table. If there are 3 warehouses in database it will show 3 text boxes with available quantity as place holder. Now user have to enter quantity no more than given in placeholder in each box. How can I do validation if user enter a value more than available (which will be shown as place holder) ?. Problem is validation should be according to foreach loop. My code is below,
<?php
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php } }?>
Here as you see text boxes number is depending upon foreach loop. So how can I validate? Javascript or Ajax is ok.
I tried something like this,
<?php foreach ($ware_details as $data) {?>
<script>
function check()
{
var stock = document.getElementById('quantity').value;
var return_stock = document.getElementById('return_pro').value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro').focus();
return false;
}
//alert(return_stock);
return false;
}
But I know it is fully wrong. Any idea?
Try to use html5 required attribute. This set of code may help you.
<input type="number"
min="1"
max="<?php echo $data->wh_product_qty; ?>"
name="<?php echo $data->wh_warehouse_id;?>"
required="required"
placeholder="<?php echo $data->wh_product_qty; ?> Available" />
You cannot use an id multiple times in the document, it needs to be unique. Either use classes to identify/group elements, or enumerate the ids:
<?php
$i = 0;
if (!empty($ware_details)) {
foreach ($ware_details as $data) {
?>
<div class="form-group">
<label for="exampleInputEmail1"><?php echo $data->warehouse_name; ?></label>
<input type="number" id="return_pro<?php echo $i; ?>" class="form-control" base_url="<?php echo site_url(); ?>" name="<?php echo $data->wh_warehouse_id;?>" placeholder="<?php echo $data->wh_product_qty; ?> Available">
<div class="dataDrop"></div>
<input type="hidden" id="quantity<?php echo $i; ?>" value="<?php echo $data->wh_product_qty; ?>"/>
</div>
<?php
$i++;
} }?>
<script>
function check(i) {
var stock = document.getElementById('quantity'+i).value;
var return_stock = document.getElementById('return_pro'+i).value;
if (parseFloat(stock) < parseFloat(return_stock))
{
alert("Return product can't be more than total stock");
document.getElementById('return_pro'+i).focus();
return false;
}
//alert(return_stock);
return false;
}
// then in the validation trigger:
for (var i=0; i< <?php echo $i; ?>; i++)
check(i);