I am completely new to JQuery / JSON requests. The code below is the result of 2 days work and I am completely stumped!
Basically I have a form asking for
Number of people
Size of painting
Color of painting (B,C) IE black/white or color
Esentially after selecting the dropdowns then clicking on the color radio button, it will send a JSON request to getdata.php?getIDandPrice=C
What I am trying to achieve is that it will make this request based on the previous entries:
getdata.php?getIDandPrice=1-2x2-C
(ie number of people - size - color)
Appreciate your help
<select id="howmanypeople" name="howmanypeople">
<option value="" selected="selected">Select how many people</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="size" name="size">
<option value="" selected="selected">Select size</option>
<option value="1x1">1x1</option>
<option value="2x2">2x2</option>
</select>
<label><input type="radio" name="getIDandPrice" value="B" id="method2"/>Black & White</label>
<label><input type="radio" name="getIDandPrice" value="C" id="method2"/>Color</label>
<label><input type="radio" name="getIDandPrice" value="B" id="method2"/>Black & White</label>
<div id="post_id"></div>
<div id="_regular_price"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=getIDandPrice]').click(function() {
MethodTwo();
});
});
//Method 2
document.getElementById('getIDandPrice').value = product(2, 3);
function MethodTwo()
{
$.getJSON("getdata.php?getIDandPrice=C", function(response) {
$('#post_id').html(response.post_id);
$('#_regular_price').html(response._regular_price);
});
}
</script>
Below is the final working code thanks to I Can Has Cheezburger
<!-- http://stackoverflow.com/questions/7191910/loading-json-data-with-jquery-php-and-mysql-for-radio-buttons -->
<select id="howmanypeople" name="howmanypeople">
<option value="" selected="selected">Select how many people</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="size" name="size">
<option value="" selected="selected">Select size</option>
<option value="1x1">1x1</option>
<option value="3x3">3x3</option>
</select>
<label><input type="radio" name="color" value="B" id="color"/>Black & White</label>
<label><input type="radio" name="color" value="C" id="color"/>Color</label>
<div id="post_id"></div>
<div id="_regular_price"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=color]').click(function() {
MethodTwo();
});
$('select[name=size]').click(function() {
MethodTwo();
});
$('select[name=howmanypeople]').click(function() {
MethodTwo();
});
});
//Method 2
function MethodTwo()
{
//getting the selected value of select#howmanypeople
var people_no = $('#howmanypeople').val();
//getting the selected value of select#size
var size = $('#size').val();
//getting the selected value of select#size
var color = $('#color:checked').val();
//concatenating the values for the URL to look as
//getdata.php?getIDandPrice=1-2x2-C
$.getJSON("getdata.php?getIDandPrice="+people_no+"-"+size+"-"+color, function(response) {
$('#post_id').html(response.post_id);
$('#_regular_price').html(response._regular_price);
});
}</script>
</body>
</html>
If I got it right, you want to pass the value C along with the two select options, you could do it like:
function MethodTwo()
{
//getting the selected value of select#howmanypeople
var people_no = $('#howmanypeople').val();
//getting the selected value of select#size
var size = $('#size').val();
//concatenating the values for the URL to look as
//getdata.php?getIDandPrice=1-2x2-C
$.getJSON("getdata.php?getIDandPrice="+people_no+"-"+size+"-C", function(response) {
$('#post_id').html(response.post_id);
$('#_regular_price').html(response._regular_price);
});
}
In the PHP side, you would have to do something like:
$var = $_GET['getIDandPrice'];
//explode() will break the text at the hyphen `-`
$var_arr = explode("-",$var);
//$var_arr[0] = 1, $var_arr[1] = 2x2, $var_arr[2] = C
Pass the values of the inputs you need to process on the backend:
$.getJSON("getdata.php?getIDandPrice=C",
{
howMany : $('howmanypeople').val(),
size : $('size').val(),
},
function(response) {
$('#post_id').html(response.post_id);
$('#_regular_price').html(response._regular_price);
});
The documentation has several examples:
http://api.jquery.com/jquery.getjson/
Related
I have a dropdown and a set of two radio buttons.
When a dropdown value alongwith a radio opotion is selected I need to show a table with the corresponding values fetched. The data is fetched from CouchCMS backend.
<select id='dd_icp'>
<option value="ET" >ET</option>
<option value="NGP" >NGP</option>
<option value="GCC" >GCC</option>
</select>
<label for="f_to_ho0">
<input type="radio" name="f_to_ho" id="f_to_ho0" value="0" checked="checked">T/O
</label>
<label for="f_to_ho1">
<input type="radio" name="f_to_ho" id="f_to_ho1" value="1"> H/O
</label>
<table>
...
</table>
$(document).ready(function() {
$("#dd_icp").change(function() {
var selectedValue = $(this).val();
// Radio???
// Table with data???
});
});
In my answer, to allow me to simply cut and paste an example, I changed the radio button to a selection box, but you would process the radio button in like manner.
Form
<select id="dd_icp">
<option value="" >Select ???</option> <!-- Forces Selection -->
<option value="ET" >ET</option>
<option value="NGP" >NGP</option>
<option value="GCC" >GCC</option>
</select>
<select id="f_to_ho" name="f_to_ho">
<option value="0" >T/O</option>
<option value="1" >H/O</option>
</select>
<div id="results"></div>
Notice the <div id="results"></div>
jQuery
$( "#dd_icp" ).change(function() {
var var_a = $(this).val();
var var_b = $('#f_to_ho').val();
var url = 'path-to-parse.php';
var postit = $.post( url, {var_a:var_a,var_b:var_b});
postit.done(function( data ) {$('#results').html(data);});
});
parse.php
<?php
$var_a = $_POST['var_a'];
$var_b = $_POST['var_b'];
// parse and echo filtered table here
?>
Hope this helps.
<select class="form-control" id="prodname" name="pname" >
<option value="0" disabled="disabled" selected="selected">-- Select Product --</option>
#{
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id">#product.Product_Name</option>
<option hidden>#product.Quantity</option>
}
}
</select>
I want to select this option.
<option hidden>#product.Quantity</option>
I have tried this selector but could not get text.
var productunitprice = $("#prodname option").find("hidden").text();
You can use var text = $("option:selected",this).next().text() Example below.
$("#prodname").change(function() {
var text = $("option:selected",this).next().text()
console.log(text)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="prodname">
<option value="1">1</option>
<option hidden>1.1</option>
<option value="2">2</option>
<option hidden>2.2</option>
</select>
As an alternative to adding many unused and hidden options.
You can add the unit price to the relevant option directly using a data attribute for example data-unit-price.
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id" data-unit-price="#product.Quantity">#product.Product_Name</option>
}
Then simply read it from the selected option. In my humble opinion it is cleaner and doesn't use additional hidden option elements as storage for data belonging to other options.
$(document).ready(function() {
$("#prodname").change(function() {
var productunitprice = $("option:selected", this).data('unitPrice')
console.log(productunitprice)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="prodname" name="pname">
<option value="1" data-unit-price="5.25">product 45</option>
<option value="2" data-unit-price="12.99">product 94</option>
</select>
i am trying to find SUM of some number based on check box and select option .
here is my code
<div class="container">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>
<input type="checkbox" value="10">10
</label>
</div>
<input id="total" placeholder="total" />
And my script is
function updateTotal(){
var total = 0;
$(".container input[type='checkbox']").each(function(){
if($(this).is(":checked")){
var multiplier = Number($(this).parent().prev().val());
var checkboxAmount = Number($(this).val());
total += multiplier * checkboxAmount;
}
});
$("#total").val(total);
}
$("select, input[type='checkbox']").on("change", updateTotal);
The above script is just working fine give html code . But when keep my checkbox first and select option next , then this script will not give any output
i wanted my HTML code like this , then script should be work fine for this
<div class="container">
<label>
<input type="checkbox" value="10">10
</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<input id="total" placeholder="total" />
any help , code coppied from here
Try this one-
function updateTotal() {
var total = 0;
$(".container").each(function () {
var checkbox = $(this).find("input[type='checkbox']");
var select = $(this).find("select");
if (checkbox.is(":checked")) {
total += Number($(this).find("input[type='checkbox']").val()) * Number(select.val());
}
});
}
Im trying to get value from checkbox that has been checked, but for some reason the value is shuffled in some weird pattern
here jsfiddle (try to check fruit and then click disable)
<input id="checkedTree" type="text"/>
<select id="test-select" onchange="getCheckedTree()">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
I need to know why is it happened, and how to fix it. i do know the other way to get proper value like this. But for my project case i need "for" method
Update 1-> update jsfiddle
Values shuffled because you are getting the input array index checkedText.value = selectobject[z].value; knowing that at the change event the order of your hidden inputs change which causes the wrong values . (you can check by setting test-select display :block after page loding )
Above a working snippet :
note that you can passe directly value (1,2,3.. ) to the checkedTree input to disable directly inputs .
$( document ).ready(function() {
var $select = $('#test-select');
$select.treeMultiselect({
enableSelectAll: true,
sortable: false,
searchable: true,
startCollapse: true
});
});
function getCheckedTree(){
var tempCtr=0;
var $checkedText = $("#checkedTree");
var selectobject = $("[id*=treemultiselect-0-]:checked");
$checkedText.val("");
for(i=0;i<selectobject.length;i++) {
if(tempCtr==0){
tempCtr=1;
$checkedText.val($(selectobject[i]).parent().data("value"));
}else{
$checkedText.val($checkedText.val() + $(selectobject[i]).parent().data("value"));
}
}
}
function funcDis(){
var $checkedText = $("#checkedTree");
if($checkedText.val().length>0) {
$checkedText.val().split("").forEach(function(val){
$(".tree-multiselect .item[data-value="+val+"] input").prop('disabled', true);
$("#test-select option[value="+val+"]").prop('disabled', true);
})
};
}
function enableAll(){
$(".tree-multiselect input").each(function(idx){
$(this).prop('disabled', false);
var val = $(this).parent().data("value");
$("#test-select option[value="+val+"]").prop('disabled', false);
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.css" rel="stylesheet"/>
<script src="//cdn.rawgit.com/patosai/tree-multiselect/v2.1.3/dist/jquery.tree-multiselect.min.js"></script>
<input id="checkedTree" type="text"/> <button onclick="funcDis()">disable</button><button onclick="enableAll()">enable all</button>
<select id="test-select" onchange="getCheckedTree()">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
PS:You can pass dirctly an array of value to funcDis and disable input at start up .
That's all ,I fiddle if you want.
I have a table rows (this is not real, this is only example for simple it):
id, cat, company, device.
for example some recordes:
1, computer, samsung, ativ
2, computer, lg, blabla
3, phones, samsung, s6
4, phones, sony, z5
I want that if I choose category (computer for example) this will open only the company that they have computer, In addition, when the user select the second select, this will give the option that remain.
I found here the answer for the first select but for the second I did find.
I dont want to do "if ..., if ..." because this is need to be from the database and automatic.
This is the example that i did:
http://jsfiddle.net/e464etcq/
HTML:
<select class="form-control" id="type" name="type">
<option value="">choose</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<input type="text" id="billing">
JQUERY:
jQuery(function($) {
var backupShipStates = $("#reason").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
});
do you have any suggition how to do it?
Thank you,
Omry.
If I've understand you, you could add a new change event to handle when the second select is changed.
So your code would be:
HTML
<select class="form-control" id="type" name="type">
<option value="">בחר</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<select class="form-control" id="third" name="third">
<option value="">choose</option>
<option value="1" class="1">Option3.1</option>
<option value="2" class="1">Option3.2</option>
<option value="3" class="2">Option3.3</option>
<option value="3" class="2">Option3.4</option>
</select>
<input type="text" id="billing">
jQuery
jQuery(function($) {
var backupShipStates = $("#reason").html();
var backupOption3 = $("#third").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
$("#reason").change(function(){
var reason = $(this).val();
var options = $(backupOption3).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == reason; });
$("#third").html(options);
});
});
Here is not necessary PHP.