I'm trying to compute a value from 2 given values quantity and price. I used the keyup event in jquery to compute the total from the current value of the qty and price.
How will I be able to reference the current textbox which initiates the keypress event. And put the corresponding total to the assigned box.
Do you know of any jquery plugins that will make it easier for me to achieve the result.
<script type="text/javascript">
$(function(){
$('input[name^=qty]').keyup(function(){
var curprice=$('input[name^=price]').val();
var curqty=$('input[name^=qty]').val();
var curtotal=curprice * curqty;
$('input[name^=comp]').val(curtotal);
});
});
</script>
</head>
<body>
<?php
for($a=0;$a<=5;$a++){
?>
Price:<input type="text" name="<?php echo 'price'.$a; ?>" value="<?php echo $a; ?>"/>
Quantity:<input type="text" name="<?php echo 'qty'.$a; ?>" value="<?php echo $a; ?>"/>
Computed:<input type="text" id="<?php echo 'a'.$a; ?>" name="<?php echo 'comp'.$a ?>" value="" />
<?php
echo "<br/>";
}
?>
</body>
</html>
Heres a screenshot.
If you need more details, feel free to ask, thanks.
<script type="text/javascript">
$(function(){
$('input[name^=qty]').keyup(function(){
var parentDiv = $(this).closest('div');
var curprice=parentDiv.find('input[name^=price]').val();
var curqty= this.value;
var curtotal=curprice * curqty;
parentDiv.find('input[name^=comp]').val(curtotal);
});
});
</script>
</head>
<body>
<?php
for($a=0;$a<=5;$a++){
?>
<div>
Price:<input type="text" name="<?php echo 'price'.$a; ?>" value="<?php echo $a; ?>"/>
Quantity:<input type="text" name="<?php echo 'qty'.$a; ?>" value="<?php echo $a; ?>"/>
Computed:<input type="text" id="<?php echo 'a'.$a; ?>" name="<?php echo 'comp'.$a ?>" value="" />
</div>
<?php
echo "<br/>";
}
?>
</body>
</html>
notice all the changes against your current code.
Here's something else. It uses regex to get the number part of the element's name, and assumes that something named priceX and compX are the related inputs.
$("input[name^=qty]").keyup(function() {
var i = /^qty(\d+)$/.exec($(this).attr('name'))[1],
price = parseFloat($("input[name=price" + i + "]").val()),
qty = parseInt($("input[name=qty" + i + "]").val(), 10);
$("input[name=comp" + i + "]").val(price * qty);
});
Example: http://jsfiddle.net/AHUHu/
Related
standard input, select box and multiple select box can also get the desired value, it works.. but how can i get the value with jquery in this code snippet?
<script>
$(document).ready(function(){
jQuery('#checkboxesmarka').change(function(){
var id=jQuery('#checkboxesmarka').val();
alert(id);
});
});
</script>
<div id="checkboxesmarka">
<?php
while($markacek=$markasor->fetch(PDO::FETCH_ASSOC)) { ?>
<label for="<?php echo "marka".$markacek['marka_id'] ?>">
<input type="checkbox" id="<?php echo "marka".$markacek['marka_id'] ?>" name="marka_id[]" value="<?php echo $markacek['marka_id'] ?>" /><?php echo $markacek['marka_name'] ?> </label>
<? } ?>
</div>
$(function(){
$('#checkboxesmarka').click(function(){
var valSelected = [];
$(':checkbox:checked').each(function(i){
valSelected[i] = $(this).val();
});
console.log(valSelected);
});
});
In console all selected value
I'm adding three color pickers for three divs and added jquery for that. Here is my Code:
<script>
$(document).ready(function() {
$('#heading_color').blur(function() {
var headingcolor = $("#image_title_color").val();
$("#image_title").css("color", headingcolor);
});
$('#desc_color').blur(function() {
var desccolor = $("#image_description_color").val();
$("#image_description").css("color", desccolor);
});
$('#button_color').blur(function() {
var buttoncolor = $("#image_button_color").val();
$("#image_button_text").css("color", buttoncolor);
});
});
<input id="image_title" type="text" class="regular-text" name="image_title" value="<?php echo $edit_values->image_title; ?>" style="color:<?php echo $edit_values->image_title_color; ?>">
<?php $custom_color_title = $edit_values->image_title_color;
if( $custom_color_title!= '' ) { ?>
<input type="text" value="<?php echo $edit_values->image_title_color; ?>" class="custom_color" id="heading_color" name="heading_color" />
<?php } else { ?>
<input type="text" value="#000" class="custom_color" id="heading_color" name="heading_color" /> <?php } ?>
<input type="hidden" value="<?php echo $edit_values->image_title_color; ?>" class="hidden_color" id="image_title_color" name="image_title_color" />
<textarea rows="5" cols="37" id="image_description" class="regular-text" name="image_description" style="color:<?php echo $edit_values->image_description_color; ?>"><?php echo $edit_values->image_description; ?></textarea>
<?php $custom_color_desc = $edit_values->image_description_color;
if( $custom_color_desc!= '' ) { ?>
<input type="text" value="<?php echo $edit_values->image_description_color; ?>" class="custom_color" id="desc_color" name="desc_color" />
<?php } else { ?>
<input type="text" value="#000" class="custom_color" id="desc_color" name="desc_color" /> <?php } ?>
<input type="hidden" value="<?php echo $edit_values->image_description_color; ?>" class="hidden_color" id="image_description_color" name="image_description_color" />
</tr>
<input id="image_button_text" type="text" class="regular-text" name="image_button_text" value="<?php echo $edit_values->image_button_text; ?>" style="color:<?php echo $edit_values->image_button_color; ?>">
<?php $custom_color_button = $edit_values->image_button_color;
if( $custom_color_button!= '' ) { ?>
<input type="text" value="<?php echo $edit_values->image_button_color; ?>" class="custom_color" id="button_color" name="button_color" />
<?php } else { ?>
<input type="text" value="#000" class="custom_color" id="button_color" name="button_color" /> <?php } ?>
<input type="hidden" value="<?php echo $edit_values->image_button_color; ?>" class="hidden_color" id="image_button_color" name="image_button_color" />
And other jquery for color picker is:
jQuery(document).ready(function($){
var customOptions = {
// Declare a default color here,
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){
$("#image_button_text").css( 'color', ui.color.toString());*/
var head_color = $( '#heading_color' ).val();
var desc_color = $( '#desc_color' ).val();
var btn_color = $( '#button_color' ).val();
$( '#image_title_color' ).val( head_color );
$( '#image_description_color' ).val( desc_color );
$( '#image_button_color' ).val( btn_color );
$( "#image_title" ).css( 'color', head_color);
$( "#image_description" ).css( 'color', desc_color);
$( "#image_button_text" ).css( 'color', btn_color);
},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
history: true,
// show a group of common colors beneath the square
palettes: true
};
$('.custom_color').wpColorPicker(customOptions);
});
When I submit button after selecting color it can't update the color but again I click on submit button it refelcts changes. But again when I submit button it gives previous values of color.
I want to get rid of this issue and update the new color values when I update submit button.
Thanks.
this jquery script not work when im insert php tag into this,.. can i know what is the problem..
<script language="javascript">
$("#openmsg_<?php echo $id; ?>").click(function(){
$("#toggleText_<?php echo $id; ?>").toggle(800);
})
</script>
this is my jquery code to toggle
<form action="my_messages.php" method="POST" name="<?php echo $msg_title; ?>">
<input type="button" name="openmsg" id="openmsg_<?php echo $id; ?>" value="<?php echo $msg_title; ?>" onClick="javascript:toggle<?php echo $id; ?>();" />
<input type="submit" name="setopened_<?php echo $id; ?>" value="I have read this" />
</form>
<div id="toggleText_<?php echo $id; ?>" style="display:none;">
<?php echo $msg_body; ?>
</div>
Update your code like this :
$("#openmsg_"+).click(function(){
$("#toggleTextuserid_"+).toggle(800);
})
Try this:
<script language="javascript">
var id = <?php echo $id?>;
$("#openmsg_" + id + "").click(function(){
$("#toggleTextuserid_" + id + "").toggle(800);
})
</script>
I'm trying to make a form that is in a loop has a unique id.
The issue with this is only the first form is working and all the rest after is not triggering the jquery code.
Form:
<?php foreach( $tasks as $tasks ) : ?>
<tr>
<td><?php echo $tasks->title ?></td>
<td><?php echo $newDate; ?></td>
<td><?php echo $tasks->details ?></td>
<td><?php echo $tasks->category ?></td>
<td>
<form class="noclass">
<input class="hideit id" type="text" name="id" value="<?php echo $tasks->id ?>" />
<input type="checkbox" value="<?php echo $tasks->user ?>" name="value" id="checkbox-2-1" class="regular-checkbox big-checkbox" <?php echo $tasks->user ?> />
</form>
</td>
</tr>
<?php endforeach; ?>
Jquery:
<script>
$(function() {
$('#checkbox-2-1').click(function() {
var id = $(".id").val();
var value = $(".check").val();
var dataString = '?id=' + id + '&value=' + value + '&user=<?php echo $id ?>';
alert(dataString);
$.ajax({
type: "POST",
url: "http://example.com/process.php",
data: dataString,
cache: false,
});
})
})
return false;
</script>
You are using
var id = $(".id").val();
var value = $(".check").val();
and what $(".id") and `$(".check")' will return is object.
So you need to convert it into string of key value pair and then send it.
Also refer Gautam answer for foreach correction.
ONE MORE
You are repeating checkbox-2-1 id for checkbox evert-time loop gets execute and ID for each dom must be unique.
What i suggest
Use code as below.
for checkbox click event use
$('input:ckeckbox[name="value"]').on('change',function(){ });
and inside function(){ } write code for getting value of class id and check as below
$(this).closest('form.noclass').find('.id').val();
$(this).closest('form.noclass').find('.value').val()
Your first form is not closing....close like this
<form class="noclass">
<input class="hideit id" type="text" name="id" value="<?php echo $tasks->id ?>" />
</form>
<form class="noclass">
<input class="hideit id" type="text" name="id" value="<?php echo $tasks->id ?>" />
<input type="checkbox" value="<?php echo $tasks->user ?>" name="value" id="checkbox-2-1" class="regular-checkbox big-checkbox" <?php echo $tasks->user ?> />
</form>
And what is
<?php foreach( $tasks as $tasks ) : ?>
try to give another variable like
<?php foreach( $tasks as $task ) : ?>
and then change the symultanious
I have a drop down list which is dynamically generated using ajax on page load.
On the other hand I have a php variable which contains the value to be selected by default.
However, when Iam trying to do this it isn't selecting the value. Following is code:
HTML & PHP
<h1>Venue: Edit</h1>
<< Back to Venue List
<br />
<form method="post" id="venueEdit" action="<?php echo URL;?>venue/editSave/<?php echo $this->venue['id']; ?>">
<fieldset>
<p>
<label for="cvenue" class="main">Venue</label>
<input id="cvenue" class="required" type="text" name="venue" value="<?php echo $this->venue['name']; ?>" />
</p>
<p>
<label for="ccity" class="main">City</label>
<input id="ccity" class="required" type="text" name="city" value="<?php echo $this->venue['city']; ?>" />
</p>
<p>
<label for="ccountry" class="main">Country</label>
<select id="ccountry" class="required" name="country">
<option value="">-- Select Country --</option>
</select>
</p>
<p>
<label class="main"> </label><input type="submit" value="Save" />
</p>
</fieldset>
</form>
JS:
function populateCountryDropDown(url){
$.get(url, function(o) {
for(var i = 0; i < o.length; i++){
$('select[name="country"]').append('<option value="' + o[i].id + '">' + o[i].name + "</option>");
}
}, 'json');
}
$(document).ready(function(){
populateCountryDropDown('<?php echo URL; ?>' + 'country/xhrGetCountryList');
$('select[name="country"]').val('<?php echo $this->venue['countryid']; ?>');
$("#venueEdit").validate();
});
I tried to alert the php value and it's ok but if I alert the select option value it's always null as at that point it's still populating the drop down list. I don't know how to solve this. Would appreciate your guys help? Thanks.
You need to move your code to set the value into the callback, to trigger the value being set after the AJAX call fired off by $.get() returns.
function populateCountryDropDown(url){
$.get(url, function(o) {
for(var i = 0; i < o.length; i++){
$('select[name="country"]').append('<option value="' + o[i].id + '">' + o[i].name + "</option>");
}
$('select[name="country"]').val('<?php echo $this->venue['countryid']; ?>');
$("#venueEdit").validate();
}, 'json');
}
$(document).ready(function(){
populateCountryDropDown('<?php echo URL; ?>' + 'country/xhrGetCountryList');
});
This code here:
$('select[name="country"]').val('<?php echo $this->venue['countryid']; ?>');
Try changing to:
$('select[name="country"]').val('<?php echo $this->venue["countryid"]; ?>'); // Double quotes around countryid vs the single quote.