I am new in jquery and I got a very few knowledge I created an input field in which jquery grab a dropdown selected values if I put only one value in setting value field its working fine as I want to grab all var value in a single //Setting Value and also want only first two letters of the selected value: like if I choose dropdown value as Morning Class I want only "MO" and same for the rest variables as Section XI Class I am looking for only XI my code is given below:
Html Code
<form id="form1" method="post" enctype="multipart/form-data">
<div class="col-md-3">
<div class="form-group">
<select id="section_id" name="section_id" class="form-control" >
<option value="XI Class">XI Class</option>
<option value="XII Class">XII Class</option>
</select>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<select id="class_id" name="class_id" class="form-control" >
<option value="Morning Class">Morning Class</option>
<option value="Morning Class">Morning Class</option>
</select></div></div>
<div class="col-md-3">
<div class="form-group">
<input id="input" name="input" placeholder=""
type="text" class="form-control " value="" /></div></div>
</div>
</form>
jquery Code
$("#class_id,section_id").on("change",function(){
//Getting Value
var selValue = $("#class_id :selected").text();
var selValue1 = $("#section_id :selected").text();
//Setting Value
$("#input").val(selValue,selValue1);
});
Related
Trying to make the item to be auto fill when select the item. But the item is in looping with will result using the same id if jQuery, so what is the best method for me? like in the image where user pick the item, then the data will be autofill
$countItem = 0;
foreach($SopProcess AS $process)
{
$countItem++;
if($process["item_proc_det"]== 2){
echo '<div class="col-md-6 col-12">
<div class="mb-1">
<label class="form-label" >Activity:</label>
<input type="input" class="form-control" value="'.$process["name_process"].' '. $process["item_proc_num"].'" readonly/>
<input type="hidden" id="postcode" class="form-control" value="'.$process["item_proc_num"].'" readonly/>
</div>
</div>
<div class="col-md-6 col-12">
<div class="mb-1">
<label class="form-label" >Substance Use</label>
<fieldset>
<div class="input-group">
<select class="form-select" id="substance'.$countItem.'" name="item_media[]" required>
<option value="">Please Select</option>';
foreach($treat as $item_media){
$id = $item_media['media_treat_id'];
$name = $item_media['media_treat_brand'];
echo "<option value='$id'>$name</option>";
}
echo'
</select>
<input type="nu" id="valueitem'.$countItem.'" class="form-control" placeholder="Input amount use" aria-label="Amount" />
<select class="form-select" id="basicSelect" id="unititem'.$countItem.'" name="item_media[]" required>
<option value="">Select Unit</option>';
echo "
<option value='3'>ml</option>
<option value='2'>g</option>
<option value='7'>Unit</option>";
echo'
</select>
</div>
</fieldset>
</div>
</div>
';
}}
For Javascript
$$('#substance').on('change', function(){
var activityID = $('#substance').val();
if(itemId){
$.ajax({type:'POST',
url:'?syspath=ajax&controller=ajax&action=generateItemValue',
data: { 'activitiyNum': itemNumID, 'sraID': sraID, 'seasonID':seasonID,'DetAct': actID },
success:function(html){
$('#valueitem').html(html);
$('#unititem').html(html);
}
});
}else{
('#itemName').html('<option value="">Select Activity number first</option>');
}
})
I am expecting, the data on the valueitem and unititem will be filled based on the item that were select by the user, but I think am using the wrong way as ID must be unique. I need some help a proper way to use the js or query in which the data will be auto fill even the object are in looping
I have this dropdown, I need the value to be passed to a hidden modal form using a javascript. I'm currently stuck here. Any ideas on the script.
<!-- Adress dropdown-->
<div class="col-md-3">
<div class="panel-heading">
<select class="form-control" name="adress" id="adress">
<option value="">Select Adress</option>
<option value="1">HRA</option>
<option value="2">Lavington</option>
<option value="3">Krishna Plaza</option>
</select>
</div>
</div>
here is my hidden input field on my modal form
<!--hidden input-->
<input type="text" name="adress1" id="adress1" class="id" value=""/>
var hiddenInput = document.querySelector("#adress1");
var select = document.querySelector("#adress");
hiddenInput.value = select.value;
This question already has answers here:
jQuery select change show/hide div event
(10 answers)
Closed 2 years ago.
I have an HTML form with multiple select fields... I want to display/hide a div based on a user's selection of a previous field.
Specifically, if a user selects "Before" or "After" on the select field, I want to hide the #Length-div... the odd thing is that I have already gotten this to work for the #Yes div, and I don't know what the difference is between these two.
<div class="required">
<label class="control-label" for="before_after">When?</label>
<select class="form-control" id="before_after" name="before_after" required="">
<option selected="" value="Until the prayer after">Until the prayer after</option>
<option value="Before">Before</option>
<option value="After">After</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="recurring">Recurring</label>
<select class="form-control" id="recurring" name="recurring" required="">
<option selected="" value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div name="Length-div" id="Length-div" style="display:none;">
{{ wtf.form_field(form.length)}}
</div>
<div name="Yes" id="Yes" style="display: none;">
{{ wtf.form_field(form.frequency)}}
{{ wtf.form_field(form.end)}}
</div>
My Jquery scripts:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
$(document).ready(function(){
$("#recurring").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue=="No"){
$("#Yes").hide()
} else{
$("#Yes").show();
}
}).change();
$("#before_after").change(function(){
$(this).find("option:selected").each(function(){
var optionValue2 = $(this).attr("value");
if(optionValue2=="Until the prayer after"){
$("#Length-div").show();
} else{
$("#Length-div").hide();
}
}).change();
});
});
});
</script>
Could you please let me know why my code works for the #Yes div but not for the #Length-div ? Thank you in advance!
Your code structure is not proper otherwise it is working fine see below example
$(document).ready(function(){
$("#recurring").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue=="No"){
$("#Yes").hide()
} else{
$("#Yes").show();
}
})
});
$("#before_after").change(function(){
debugger
$(this).find("option:selected").each(function(){
var optionValue2 = $(this).attr("value");
if(optionValue2=="Until the prayer after"){
$("#Length-div").show();
} else{
$("#Length-div").hide();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="required">
<label class="control-label" for="before_after">When?</label>
<select class="form-control" id="before_after" name="before_after" required="">
<option selected="" value="Until the prayer after">Until the prayer after</option>
<option value="Before">Before</option>
<option value="After">After</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="recurring">Recurring</label>
<select class="form-control" id="recurring" name="recurring" required="">
<option selected="" value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div name="Length-div" id="Length-div" style="display:none;">
{{ wtf.form_field(form.length)}}
</div>
<div name="Yes" id="Yes" style="display: none;">
{{ wtf.form_field(form.frequency)}}
{{ wtf.form_field(form.end)}}
</div>
I'm trying to include in the option, that if the user chooses/clicks the Other please specify option, he gets an option to give input. The characters thus input will instantly show relevant nationalities in a dropdown bar.
For a javascript function based solution for this, how can I make a call to that function in my html code or in dropdown. Thanks! :D
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
</div>
Check the below code
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required>
<option></option>
<option value="" disabled selected>Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code" />
</div>
Below is the full implementation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="status" class="control-label col-xs-4">
<p class="left">Nationality</p>
</label>
<select name="status" id="status" required="required">
<option></option>
<option value="" disabled="disabled" selected="selected">Filipino</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide
$("#status").on('change', function() {
var selected_option = $('#status option:selected').eq(0);
if (selected_option.val() == 'other') {
code.show();
code.val(''); //empty the field every-time selecting the option
console.log(selected_option.val());
} else {
code.hide();
}
console.log(selected_option.val());
});
</script>
</body>
</html>
Try this:
You need to have a listener for your select and take the action as per the selected value..
var inputLabel = $('#inputLabel');
var onOptionChange = function() {
if (this.value == 'other') {
inputLabel.fadeIn(100);
} else {
inputLabel.fadeOut(100);
}
};
$('#status').on('change', onOptionChange);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label for="status" class="control-label col-xs-4">Nationality</label>
<select name="status" id="status" required>
<option value="" disabled selected>Select your Nationality</option>
<option value='Filipino'>Filipino</option>
<option value='American'>American</option>
<option value='Japanese'>Japanese</option>
<option value='French'>French</option>
<option value='Sweden'>Sweden</option>
<option value='other'>Others please specify.</option>
</select>
<label for="input" id="inputLabel" style="display: none">Other:
<input type="text" id="input">
</label>
</div>
I am building a web app that is used to select drugs and details associated with drugs. There are some sections that allow for options, but the 'other' option requires the input of text as opposed to selecting one of the other options. I am trying to add a text box after a 'other' option is selected.
Here is the entire code that I have been working on. I have tried using javascript and some jquery, but I am unable to get it to work. Any help would be great please.
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Frequency:</label>
<div class="col-xs-3">
<select id="Regime" name="regime" class="form-control" required="">
<option value="" selected="" disabled="">Please select A regime...</option>
<option value="Once A Day">Once A Day</option>
<option value="BD">BD</option>
<option value="TDS">TDS</option>
<option value="QDS">QDS</option>
<option value="Other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date of Prescription:</label>
<div class="col-xs-3">
<input class="form-control" type="date" name="prescription" placeholder="(yyyy-mm-dd)" required>
</div>
</div>
Look please this jsfiddle example
$('textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('textarea').show();
});
So here are some explanations :
$('textarea').hide(); // hide the textarea by default
$('#Quantity').change(function(){ }); // when the user select an option in the #quantity select tag
var o = $(this).find('option:selected').val(); // get the current value of the option selected
if(o=='other') $('textarea').show(); // if the variable o is equal to "other" then show the textarea