I have a PHP Query that returns MYSQL table results in the form of Checkbox Inputs as such...
<input type="checkbox" name="deli_meat[]" id="<? echo $rows['itemname']; ?>" value="<? echo $rows['label']; ?>" />
In addition, each checkbox has an associated SELECT box that becomes visible anytime one of the checkboxes in checked.
<select id="<? echo $rows['itemname']; ?>" class="weight" style="display:none"><option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
I do this with jquery like this
$("input[name$='deli_meat[]']").change(function() {
var e = $(this).val();
$(this).is(":checked") ? $(".weight[id='" + e + "']").show() : $(".weight[id='" + e + "']").hide()
}),
My Goal
I am would to make it so, when someone clicks a checkbox and it's associated select box becomes visible, that they MUST make a selection before clicking ANY other checkbox. Any ideas how I can accomplish this.
Related
I have a table "tb_seri" in MySQL, with columns "id_seri", "nm_seri" and "value_seri"
So, I want to select "nm_seri" in the select option, and then "value_seri" will appear in the textbox afterwards based on "nm_seri" selected
Here is the code to select "nm_seri" from the database
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<?php
$qu="Select DISTINCT nm_seri from tb_seri";
$res=$koneksi->query($qu);
while($r=mysqli_fetch_row($res))
{
echo "<option data-value='$r[1]' value='$r[0]'> $r[0] </option>";
}
?>
</select>
And I've tried various codes from here, but I'm still confused.
And this textbox code to display "value_seri"
<input type="text" name="value_seri" id="value_seri" value="" disabled><br></td>
<script>
function myFunction()
{
var value_seri = $('#value').find(':selected').data('nm_seri');
$('#value').val(value_seri);
}
</script>
In your current js code there is no value it should be nm_seri .Then , you are getting data attribute using data('nm_seri') it should be data('value') and show this value inside input box using $('#value_seri').val(value_seri); .Also ,your function name should match with onchange="myfunction()" so change that as well.
Demo Code :
function myfunction() {
var value_seri = $('#nm_seri').find(':selected').data('value');
$('#value_seri').val(value_seri);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<option data-value='1' value='soemthing'> soemthing</option>
<option data-value='2' value='soemthing2'> soemthing2</option>
<option data-value='3' value='soemthin3g'> soemthing3</option>
</select>
<input type="text" name="value_seri" id="value_seri" value="" disabled><br>
I have one dropdown box and one textbox. I want when I select the dropdown value then, it will fill the matching database textbox value automatically based on the database drop-down selection.
Here is my code:-
Dropdown and Textbox:-
<select name="product" required>
<option value=""></option>
<?php
while($productRow = mysqli_fetch_assoc($productResult)){?>
<option value="<?php echo $productRow['ID'];?>">
<?php echo $productRow['Category']; ?></option><?php } ?>
</select>
<input placeholder="Phone Number" name="phoneNumber" id="pnum" type="text">
Script :-
<script>
$(document).ready(function(){
$('select[name="product"]').change(function()
{
$('#pnum').val($('select[name="product"] option:selected').data('Mobile'));
}
);
});
</script>
Now textbox fills the empty value in every time when dropdown value change.
pls help a lot.
You need to change the html to
<select name="product[]" size=20 multiple required>
<?php
while($productRow = mysqli_fetch_assoc($productResult)){?>
<option value="<?php echo $productRow['ID'];?>">
<?php echo $productRow['Category']; ?></option><?php } ?>
</select>
Then remove the script because it is no longer required. All the selection of items is done in the <select> element.
On the server-side you will pickup the values in the product array.
I currently have a javascript function, which changes a select option to 1 if a checkbox is checked. What I can't seem to figure out, is how to automatically check the box if the user fails to tick the checkbox and just chooses a value (other than 0) from the select dropdown. The script has ID's and names that are generated with php array values.
Thank you for taking the time to look at this.
function quantityChangeHandler(source) {
var qtyElem = document.getElementById(source.getAttribute('rel'));
if (source.checked) {
if (qtyElem.value == 0)
qtyElem.value = 1;
}
else
qtyElem.value = 0;
}
<input type="checkbox" onclick="quantityChangeHandler(this)"
name="prodid[<?php echo $prodid;?>][]" rel="prodqty_<?php echo $prodid . '_' . $contactid; ?>"
value="<?php echo $contactid; ?>" /><br />
Qty
<select id="prodqty_<?php echo $prodid . '_' . $contactid; ?>"
name="prodqty[<?php echo $prodid; ?>][<?php echo $contactid; ?>]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
You should add a similar handler and rel attribute to the select tag, and set source.checked based on the value of the select element.
Add this to your Javascript:
function selectChangeHandler(source) {
var checkboxElem = document.getElementById(source.getAttribute('rel'));
checkboxElem.checked = source.value != 0;
}
Example changes to HTML:
<input id="checkbox_0" ... />
...
<select ... rel="checkbox_0" onchange="selectChangeHandler(this)">
...
Working JSFiddle
From my understanding manually trigger the checkbox selection is by triggering the click event.
say you checkbox id = "mychkbox"
then using the jquery you can do by $('#mychkbox').trigger('click');
this makes the check box selected selected.
and your check condition for if checkbox is selected or not.
I have two dropdown boxes for car makes and models, when a make is selected i need all its models to show in the next box. As of now using the following code the models show up when the dropdown is clicked.
window.onmousedown = function(e){
this.id = e.target.id;
if(this.id == "vehicle_makes"){
var make = document.getElementById("vehicle_makes").value;
ajaxCall(make);
}
}
However i need the javascript to trigger when an option from the dropdown is selected rather than when the drop down is opened.
here also is the html - with some php
<div class="vehicle-search-wrap">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<select id="vehicle_makes" name="s">
<?php
foreach($makes as $make){ //put all makes in dropdown
echo "<option value='". $make ."'>". $make ."</option>";
}
?>
</select>
<select id="model_drop" name="vmodels">
<?php
//nothing to start
?>
</select>
<input type="submit" value="Search Vehicle" />
</div>
</form>
</div>
use the onchange event of selectbox.
here is a demo
Try this:
<select name="Pizza" size="5"
onchange="myFunctionHere()">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Roma</option>
</select>
i have two select options but i found little complication between them in the javascript.
here is my javascript code :
function displayVals() {
var singleValues = $("select option:selected").text(); //to stay slected
$("#hiddenselect").val(singleValues); //hidden field of second select option
$("samp").html("" + singleValues); // this to insert text between samp tags
$("select > option:first").prop("disabled", "disabled") // this to disable first option
}
$(document).ready(function(){
$("select").change(function() {
displayVals();
});
displayVals();
$("select#menucompare").change(function() {
$("#aform").submit(); // second select options to submit
});
$("select#infmenu").change(function() {
$("#infform").submit(); // first select options to submit
});
});
now what i expect is :
- only the first select options ( the first option is disabled), need the second select option also (the first option be disabled)
here is my html code
my first select option :
<form action="" id="infform" method="post">
<select id="infmenu" name ="infmenu" size="1" class="select" onchange="submitinfform()" >
<option value="0" >Please Select your country</option>
<option value="<?php echo $row9['id'] ;?>" <?php if ($_SESSION['infmenu'] == $row9['id']) { echo " selected='selected'"; } ?> ><?php echo $row9['name'] ;?></option><?php } ?>
</select>
<input type="hidden" name="hiddenselect" value="<?php echo $infmenu; ?>" />
</form>
this the second select options
<form id="aform" method="post">
<select id="menucompare" name ="menucompare" size="1" class="select" onchange="submitaform()">
<option value="0">Select one</option>
<option value="west" <?php if ($menucompare == "west") { echo " selected='selected'"; } ?> >West</option>
<option value="est" <?php if ($menucompare == "est") { echo " selected='selected'"; } ?> >Est</option>
</select>
<input type="hidden" name="hiddenselect" value="<?php echo $menucompare ; ?>" />
</form>
i have spent on this many days no luck
thanks for your time
Not able to understand you code well. Here is little help for you to try:
To get selected value (value attribute) of the first select element use:
$("#infmenu").val();
To get selected value (value attribute) of the first select element use:
$("#menucompare").val();
To disable first option in first select called "infmenu":
$("option", "#infmenu").first().attr("disabled", "disabled");
To disable first option in second select called "infmenu":
$("option", "#menucompare").first().attr("disabled", "disabled");
To get displayed text of the first select element use:
$("option:selected", "#infmenu").text();
To get displayed text of the second select element use:
$("option:selected", "#menucompare").text();
The jQuery selector that you're using is $("select option:selected"). This means "find all <option> tags that are selected and are children of a <select> element."
You have two <select> elements, so your selector is matching both of them. If you want to match a specific one, you'll need to refine your selector. Since you already have an ID attribute on the second one, try using $("#menucompare option:selected").
Change:
var singleValues = $("select option:selected").text(); //to stay slected
To:
var singleValues = $("#menucompare option:selected").text(); //to stay slected
You want to choose the second select tag. so you have to change your jquery selector in line 2:
var singleValues = $("select:nth-child(2) option:selected").text();