Okay so I have a radio button on which my variable values get change through java-script.I am displaying that changed value in <h>Tag right.
Now I wants to post this <h> Tag value into database. I know <h>Tag is not a form element and other solution is using hidden input tag.
Here is my HTML Code:
<label><input type="radio" name="optradio" id="delivery1" value="normal" checked><span class="label label-success">Regular Delivery</span></label><label>If you choose regular Delivery, it will take atleast 4 days time to deliver your product.(There will be no extra charges applied)</label>
<label><input type="radio" name="optradio" id="delivery2" value="fast"><span class="label label-danger">One Day Delivery</span></label>
<label>If you choose One Day Delivery, product(s) will be delivered to you in 24 hours. (40 Rs Will be charged extra.) </label>
JS for that:
<script type="text/javascript">
$(document).ready(function(){
$('#delivery1,#delivery2').change(function(){
price = $('#price').text();
finals = $('#finals').text();
finals1 = $('#HIDDENPRICE').text();
if($('#delivery2').is(':checked')) {
price = (price)*1 + 40;
finals=price;
finals1=price;
} else {
price = (price)*1 - 40;
finals=price;
finals1=price;
}
$('#price').text(price);
$('#finals').text(price);
$('#HIDDENPRICE').text(price);
});
});
</script>
Displaying the value from radiobutton:
<h5><strong>Total</strong>
<h5 id="price" name="finalprice">
<?php
$finalprice=$item_total;
echo $finalprice;
?>
</h5>
</h5>
Now I want this Tag value to be posted in database. Any Solution?
Try with a hidden input field :
Look at this.
$(document).ready(function(){
$('#delivery1,#delivery2').change(function(){
price = $('#price').text();
if($('#delivery2').is(':checked')) {
price = parseInt(price) + 40;
} else {
price = parseInt(price) - 40;
}
$('#price').text(price);
$('#final_price').val(price);
});
});
https://jsfiddle.net/rijink121/5vcvt527/4/
You can use the ajax call for this.
$("button").click(function(){
$.post("test_post.php",{ finalprice: 'your final price',},
function(data){
alert(data); // the return data on success
});
});
In the test_post.php you can write the database operation and also you can get the value in the post variable like
$_POST['finalprice']
Related
I am working in wordpress and I have created a custom plugin.In which I have get multiple data from the database and my code is like this.
<?php
foreach($result as $res)
{
?>
<input type="hidden" class="status" value="<?php echo $res->review_status; ?>" />
<button class="aprove" value="<?php echo $res->review_id; ?>">Aprove</button>
<?php
}
?>
Now, I want to get hidden field value in jQuery. My jQuery code is like this:
jQuery(".aprove").click(function(){
var status = jQuery('.status').val();
alert(status);
});
When I click on button then it shows only first value of hidden field. For instance, the fist hidden value is 1 and second value is 0 then it display only fist value 1 for both button. So what shold I have to do to get different hidden value?
Try :
jQuery(".aprove").click(function(){
jQuery('.status').each(function(){
var status = jQuery(this).val();
alert(status);
});
});
.each will loop through all the classes and it will give alert every value of it.
JS Fiddel Demo
Updated
Updated Demo
Here is your answer. for each button the value taken would be from the input element before the button element
jQuery(".aprove").click(function(){
var status = jQuery(this).prev('.status').val();
alert(status);
});
var status = jQuery('.status').val();
alert(status);
this will get the value of element first found on page and will return the result,
if you want all the input values use
jquery each() - https://api.jquery.com/jquery.each/
jQuery('.status').each(function(){
alert($(this).val());
});
// this will give you all the values you want, one by one
you can use .map like this to get what you want:
$(document).ready(function(){
var status=[]
jQuery(".aprove").click(function(){
status = $(".status").map(function() {
return $(this).val();
}).get();
alert(status);//array of values
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" class="status" value="0" />
<input type="hidden" class="status" value="1" />
<button class="aprove" value="">Aprove</button>
Due to dianuj's great help I solved my Ajax looping issue yesterday.
Click here!
The solution helps me to send and get quantity variable (class="qty") every time I change the number in the input area.
Now I want to revise my Ajax and PHP loop a little bit to get the "total" variable (the quantity * the price).
I try to get the "price" variable by puting an "hidden" input area with price values.(please see the following script attached).The script get the variable of quantity (class="qty") and price (class="price") without problem.
However, when I put different quantity the script only picks the very first price and multiplies my changed quantity number.
For example, I have three items in the function with three differnt prices:
1. apple $1 x1
2. orange $10 x3
3. banana $2 x4
the script result will show $1 * (2+3+4) instead the correct $1*2+$10*3+$2*4
(the ajax script still gets the variable of price and quantity without problem).
My Ajax and PHP loops are as follows, it seems they can get and send the qty and price variable without problem (but only the fixed price of the very first item):
<script language="JavaScript">
$(document).ready(function() {
$("form").mouseleave( function() {
//get qty value and price value from the loop
var totalVal =0;
$( ".qty" ).each(function() {
totalVal += ($(this).val()*$(".price").val());
});
// get
$.ajax({
type: 'GET',
url: 'getSunBody.php',
data: {
//sent the total variable to php script (xml)
total : totalVal,
},
success: function(data) {
// get XML value
$('#result').html($(data).find('total').text());
$('#result1').html($(data).find('caution').text());
}
});
return false;
});
});
</script>
</head>
<body>
<div id="display">
<form action="sessionCartUpdate.php">
<table width="780" border="0" align="center" cellpadding="4" cellspacing="0">
<?php
foreach( $_SESSION["psn"] as $i => $data ){
?>
<input type="hidden" name="psn" value="<?php echo $_SESSION["psn"][$i];?>">
<tr>
<td bgcolor="#CCCCCC" font color="black"><?php echo $_SESSION["psn"][$i];?></td>
<td bgcolor="#CCCCCC"><?php echo $_SESSION["pname"][$i];?></td>
<td bgcolor="#CCCCCC"><?php echo $_SESSION["price"][$i];?></td>
<td bgcolor="#CCCCCC"><input type="text" class="qty" name="qty[]" value="<?php echo $_SESSION["qty"][$i];?>"></td>
<input type="hidden" class="price" value="<?php echo $_SESSION["price"][$i];?>" >
<td bgcolor="#CCCCCC"><input type="submit" name="btnUpdate" value="update" />
<input type="submit" name="btnDelete" value="delete" />
</td>
</tr><br />
<?php
}
?>
<tr><td colspan="5" align="center">the total:<div id="result" class="box" style="height=350px;"></div><div id="result1" class="box" style="height=350px;"></div>
<div id="result2" class="box" style="height=350px;"></div></td></tr>
</table>
</form>
I also include my php script as follows serving as xml for the ajax script above:
<?php
// XML
header("Content-Type: text/xml");
header("Content-Type:text/html; charset=utf-8");
//get total value ("qty * price") from the ajax
$total = (isset($_POST["total"]) ) ? $_POST["total"] : $_GET["total"];
echo "<?xml version=\"1.0\" ?>";
echo "<caculation>";
echo "<total>" . $total . "</total>";
if ($total==0)
echo "<caution>"."please put number!"."</caution>";
else if ($total<=500)
echo "<caution>"."You should buy more!"."</caution>";
echo "";
echo "</caculation>";
?>
I would be very grateful you could offer invaluble advice to help me fix the above bug!
There is a problem the .each loop is for qty not for the price so it is picking the first price because the loop is for qty not for the price you should do something like this
<script language="JavaScript">
$(document).ready(function() {
$("form").mouseleave( function() {
//get qty value and price value from the loop
var totalVal =0;
$( ".qty" ).each(function(i) {
totalVal += ($(this).val()*$(".price:eq("+i+")").val());
});
// get
$.ajax({
type: 'GET',
url: 'getSunBody.php',
data: {
//sent the total variable to php script (xml)
total : totalVal,
},
success: function(data) {
// get XML value
$('#result').html($(data).find('total').text());
$('#result1').html($(data).find('caution').text());
}
});
return false;
});
});
</script>
Use the index of .each loop and get the price placed at that index i have used the jquery selector :eq(index here) and i believe there will be price value for each quantity
I haven't confirmed the following code, but it should at least get you on the right track
var totalVal =0;
$('.qty').each(function() {
var price = $(this).closest('tr').find('.price').val();
totalVal += ($(this).val()*price);
});
This shows result on selected radio button. I have a problem, when the page is refreshed no div shows and no result displays. I want show the Carsbuy div on page refresh.
$(document).ready(function() {
$("input[name$='mode']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Cars" + test).show();
});
});
<input type="radio" name="mode" checked="checked" value="buy" />
<label>Buy</label>
<input type="radio" name="mode" value="rent" />
<Label>Rent</label>
<div id="Carsbuy" class="desc" style="display: none;">
Buy Cars Result Display Here On Select Buy
</div>
<div id="Carsrent" class="desc" style="display: none;">
Rent Cars Result Display Here On Select Rent
</div>
You can use following at the beginning of your js code to shoe specific DIV on page load:
$("#Carsbuy").show();
Edit:
for a specific DIV and radio button, use following:
var selected = 'rent';
$("div.desc").hide();
$("#Cars" + selected).show();
$('input[value="' + selected + '"]').attr('checked', true);
You can change the value of var selected to select a specific radio button and DIV
Demo
In the following code ,on page load check if a radio button is selected then its appropriate div is displayed . If condition is used to prevent if no radio button is selected
$(document).ready(function() {
var selected = $("input[type='radio']:checked").val();
if(selected !== 'undefined')
{
$("#Cars" + selected ).show();
}
$("input[type='checkbox']:checked").attr('id')
$("input[name$='mode']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Cars" + test).show();
});
});
As much i understand your requirement, you can do it as below.
HTML:
<input type="radio" name="mode" checked="checked" value="buy" />
<label>Buy</label>
<input type="radio" name="mode" value="rent" />
<Label>Rent</label>
<div id="CarsDetails" class="desc">
// include buy type cars initialy while page load.
</div>
JQuery:
$(document).ready(function() {
$('input[type="radio"]').click(function() { // detect when radio button is clicked
var carType = $(this).val(); // get the value of selected radio type
$.ajax({
url : "cartype.php", // link to file containing data of cars
type : "GET", // request type
data : "carType="+carType, // send the selected car type (buy or rent)
datatype : "html",
success : function(response){ // get the response
$('#CarsDetails').html(response); // put the response in div.
}
});
});
});
I have the following functionality I would like to build into a form using jQuery:
I have a list of values:
Invoice No: 110, Amount: 240.00
Invoice No: 111, Amount: 399.00
Invoice No: 112, Amount: 150.00
Next to each row there is a checkbox which is set to checked by default. Right at the bottom there is a textbox with the total 789.00 for the set of data. I would like to update the textbox when one of the checkboxes are de-selected & selected with the total of invoice amounts which checkboxs are checked.
The form will then be submitted to itself with the value of the textbox set.
Any suggestions welcome, as I'm a noob with jQuery.
Just answered similar question here: jQuery - Getting total depending on which checkboxes are selected
put some css class to your invoice total span, ex: <span class="inv-total">120<span>.
then put your checkbox inside of your invoice <div>:
<div>
<input type="checkbox" value="##inv if here ##" />
</div>
and then jQuery of course:
$(document).ready(function() {
$("input[type=checkbox]").click(function(event) {
var total = 0;
$("input:checked").each(function() {
total += parseInt($(this).parent().find('.inv-total').text().substring(1));
});
if (total == 0) {
$('#total').val('');
}
else {
$('#total').val('$' + total);
}
});
});
I haven't chanse to test it, but this is the idea.
Live example: http://jsfiddle.net/dH9Eb/2/
$('.checkbox').change(function () {
var text-box-val = $('.textbox').val();
if ($(this).attr("checked")) {
var new-val = $('.textbox').val() + $(this).attr('value');
$('.textbox').val(new-val);
}
else {
var new-val = $('.textbox').val() - $(this).attr('value');
$('.textbox').val(new-val);
}
});
Here is a solution with html table to update amount when you click on a checkbox:
HTML:
<table id="invoices">
<thead>
<tr>
<td>Invoice no</td>
<td>Total</td>
<td>include</td>
</tr>
</thead>
<tbody>
<tr>
<td class="invoiceId">112</td>
<td class="amount">10</td>
<td><input class="amountCheck" type="checkbox" checked="checked"/></td>
</tr>
</tbody>
</table>
jQuery:
$("#invoices .amountCheck").click(function() {
var amount = parseInt($(this).closest("tr").find(".amount").text());
if ($(this).is(":checked")) {
total += amount;
} else {
total -= amount;
}
$("#invoiceTotal").val(total);
});
Don't forget to check if the total is correct on server side.
Working solution : jsFiddle
i have two select box, now what i want is
i want to move option from one select box to another via a button
below is my code:
php
<table>
<tr>
<td>
<select size="5" id="suppliedMovies" name="suppliedMovies">
<option selected="selected" value="">Select Movie</option>
<option value="1">sholay</option>
<option value="3">Jism</option>
<option value="4">Rog</option>
<option value="5">Zeher</option>
<option value="6">Awarpan</option>
<option value="7">Paap</option>
<option value="8">paanch<option>
<option value="9">no entry</option>
</select>
</td>
<td>
<input type="button" id="toRight" value=">>"><br>
<input type="button" id="toLeft" value="<<">
</td>
<td>
<select size="5" id="accquiredMovies" name="accquiredMovies">
<option> No item right now</option>
</select>
</td>
</tr>
</table>
Jquery
jQuery(document).ready( function() {
function displayVals() {
var myValues = jQuery("#suppliedMovies").val();
return myValues;
}
jQuery('#toRight').click(function(){
var x=displayVals();
console.log(x);
var txt=jQuery("#suppliedMovies option[value='"+x+"']").text();
console.log(txt);
if(x!=''){
jQuery('#accquiredMovies').append("<option value='"+x+"' >"+txt+"</option>");
}
});
});
i m using above jQuery, that is working fine but, i want that
when one item is copy from one select box to another select box, then that item should be disable(or probably delete) from first select box (to prevent duplicate entry).
i also want to move item from right to left select box
please suggest me optimized jQuery .
Thanks.
UPDATE
if i want to use multiple select box on both side? then how do i use that?
more update
if i click on a item on rightselectbox and move it to left selectbox,
and go further(post) then on right selectbox, there is nothing selected items??
what i need is on right selectbox, there all items shoud be always selected ,
otherwise what i need to do? after i move an item from right to left ,i again have to select rest of items on right selectbox and go further
solution for my update part
i used below code, please take a look and suggest me if somebody finds any mistake/error in this. Thanking You
jQuery('form').submit(function() {
jQuery('#accquiredMovies option').each(function(i) {
jQuery(this).attr("selected", "selected");
});
});
You could use jQuery remove. Like:
$('#suppliedMovies option[value=' + x ']').remove()
..fredrik
EDIT:
You could optimize the function like this:
jQuery(document).ready( function() {
# Store the jQuery object return by the selector so that you don't need to
# make a new selector request next time a user press the #toRight
var suppliedSelect = jQuery('#suppliedMovies');
jQuery('#toRight').click(function () {
suppliedSelect.find(':selected').each(function (index, elem) {
var selectElem = $(elem);
if (selectElem.val()) {
selectElem.val.appendTo('#accquiredMovies');
}
});
});
});
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (var i=SS1.children().length - 1; i>=0; i--)
{
if (SS1.children()[i].selected == true)
{
SelID=SS1.children()[i].value;
SelText=SS1.children()[i].text;
SS2.append($("<option/>", {value: SelID, text: SelText}));
$(SS1.children()[i]).remove();
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
// alert("in secod "+(SelList.children().length-1))
var ID='';
var Text='';
for (var x=0; x < SelList.children().length-1; x++)
{
// alert(SelList.children()[x].text)
for (var y=x + 1; y < SelList.children().length; y++)
{
if ($(SelList.children()[x]).val() > $(SelList.children()[y]).val())
{
// Swap rows
alert("x "+SelList.children()[x].value +" y = "+SelList.children()[y].value)
ID=$(SelList.children()[x]).val();
Text=$(SelList.children()[x]).text();
$(SelList.children()[x]).val($(SelList.children()[y]).val());
$(SelList.children()[x]).text($(SelList.children()[y]).text());
$(SelList.children()[y]).val(ID);
$(SelList.children()[y]).text(Text);
// SelList.children()[x].text= SelList.children()[y].text;
// SelList.children()[y].value=ID;
// SelList.children()[y].text=Text;
}
}
}
}
This is also working for moving items from one multi select box to another without duplicating. I wana know how to make order of values same while moving items from one to another select box.
Here's a good example:
HTML:
<form>
<select id="t1available" size=10 multiple><option>Project 1</option><option>Project 2</option><option>Project 4</option></select>
<br />
<input id="t1add" type="button" value=">" />
<input id="t1addAll" type="button" value=">>" />
<input id="t1removeAll" type="button" value="<<" />
<input id="t1remove" type="button" value="<" />
<br />
<select id="t1published" size=10 multiple><option>Project 3</option></select>
</form>
Jquery:
<script type="text/javascript">
function moveSelectedItems(source, destination){
var selected = $(source+' option:selected').remove();
var sorted = $.makeArray($(destination+' option').add(selected)).sort(function(a,b){
return $(a).text() > $(b).text() ? 1:-1;
});
$(destination).empty().append(sorted);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#t1add').click(function(){
moveSelectedItems('#t1available', '#t1published');
});
$('#t1addAll').click(function(){
$('#t1available option').attr('selected', 'true');
moveSelectedItems('#t1available', '#t1published');
});
$('#t1remove').click(function(){
moveSelectedItems('#t1published', '#t1available');
});
$('#t1removeAll').click(function(){
$('#t1published option').attr('selected', 'true');
moveSelectedItems('#t1published', '#t1available');
});
});
</script>
This example is entirely from the following article, which, unfortunately for English speakers, is in German: Move selected items between checkboxes.
We can do like this:
$('div.buttons').on('click','#add',function(e){
e.preventDefault();
$("#sourceid option:selected").appendTo("#destinationid");
});