i have a problem in my Symfony2.4 project .i have 2 selects and 2 radiobuttons
i want to disable the first and make second enabled on each click here is my code
<div class="row">
<div class="col-lg-3 col-md-3 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<input type="radio" name="group1" value="mensuelle" checked="checked"style="opacity: 1!important;" /> Mensuelle
</span>
</div>
<div class="col-lg-3 col-md-7 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<input type="radio" name="group1" value="trimestre"style="opacity: 1!important;" /> Trimestre
</span>
</div>
<div class="col-lg-3 col-md-3 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<select id="mois" name="mois" class="form-control" size="1">
<option value="Janvier">Janvier</option>
<option value="Fevrier">Fevrier</option>
<option value="Mars">Mars</option>
<option value="Avril">Avril</option>
<option value="Mai">Mai</option>
<option value="Juin">Juin</option>
<option value="Juillet">Juillet</option>
<option value="Aout">Aout</option>
<option value="Septembre">Septembre</option>
<option value="Octobre">Octobre</option>
<option value="Novembre">Novembre</option>
<option value="Decembre">Decembre</option>
</select>
</span>
</div>
<div class="col-lg-3 col-md-4 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<select id="trimest" name="trimest" class="form-control" size="1">
<option value="1er Trimestre">1er Trimestre</option>
<option value="2eme Trimestre">2eme Trimestre</option>
<option value="3eme Trimestre">3eme Trimestre</option>
<option value="4eme Trimestre">4eme Trimestre</option>
</select>
</span>
</div>
and this is the script :
<script type="text/javascript">
document.getElementById('trimest').disabled=true;
$('input:radio[name="group1"]').change(function() {
if ($(this).val() === 'mensuelle') {
// append stuff
document.getElementById('trimest').disabled=true;
document.getElementById('mois').disabled=false;
}
else {
document.getElementById('trimest').disabled=false;
document.getElementById('mois').disabled=true;
}
});
</script>
i have no problems here but when i include this file file in my page the script don't works
https://drive.google.com/file/d/0B9iqIn8LtQ7gdmdZYmlhYVM1alE/view?usp=sharing
Perhaps the JS Code is executed before the DOM is completely setup.
Try the follwing:
$(document).ready(function() {
//Your Code
});
When you use that, your script will be executed, after the DOM is setup, and all the inputs etc. can be accessed by jQuery
See http://learn.jquery.com/using-jquery-core/document-ready/ (good idea #sebnukem)
Assuming that JQuery has been properly loaded.
A page can't be manipulated safely until the document is "ready." Make sure the JS code is running once the DOM is ready:
<script type="text/javascript">
$(function() { // add this
document.getElementById('trimest').disabled=true;
$('input:radio[name="group1"]').change(function() {
console.log('radio button clicked'); // do you see this?
if ($(this).val() === 'mensuelle') {
// append stuff
document.getElementById('trimest').disabled=true;
document.getElementById('mois').disabled=false;
} else {
document.getElementById('trimest').disabled=false;
document.getElementById('mois').disabled=true;
}
});
); // and this
</script>
See http://learn.jquery.com/using-jquery-core/document-ready/
What does your console say?
Related
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="checkbox-group-1661439693440_3_0" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
i'm just starting to work with javascript i'm trying them all but i can't modify this function, i need that when i deselect the "right eye" checkbox the select is disabled, unfortunately it's a wordpress plugin that allows you to do this operation only with show and hide but i need to disable, can someone help me please i'm really trying them all with null results, i'm looking for them online and all the ones i try are definitely not working i'm wrong something. thanks
I don't know how you could inject js code to your wordpress plugins but the basic code for this purpose goes like this. Make sure the id you are passing to the checkbox is unique.
function check()
{
if (document.getElementById('myCheckbox').checked)
{
document.getElementById("mySelect").disabled = false;
} else {
document.getElementById("mySelect").disabled = true;
}
}
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="myCheckbox" value="occhio-destro" type="checkbox" checked="checked" onclick="check()">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select id='mySelect' name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
<html>
<head><title>disable "select" when the checkbox is unchecked</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="myCheckbox" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select id='mySelect' name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
<script>
$('#myCheckbox').on('change', function(event){
if($(this).prop("checked") == true)
{
$("#mySelect").prop('disabled',false);
}
else
{
$("#mySelect").prop('disabled',true);
}
});
</script>
</body>
</html>
This adds the ID's and event dynamically
var checkbox = $("input[type=checkbox]");
$(checkbox).attr('id', 'myCheckbox');
var select = $(".gradazione_os_od")[0];
$(select).attr('id', 'mySelect');
console.log(select);
function check(){
if ($('#myCheckbox').prop("checked"))
{
$("#mySelect").prop("disabled", false);
} else {
$("#mySelect").prop("disabled", true);
}
}
$('#myCheckbox').on( "change", function() {
check();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_checkbox-group wcpa_form_id_9547 eye_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-checkbox-group-1661439693440" data-type="checkbox-group">
<div class="checkbox-group eye_od "data-validation="{"label":"checkbox-group-1661439693440"}">
<div class="wcpa_checkbox">
<input name="checkbox-group-1661439693440[0]" id="checkbox-group-1661439693440_3_0" value="occhio-destro" type="checkbox" checked="checked">
<label for="checkbox-group-1661439693440_3_0">
<span class="wcpa_check"></span>Occhio Destro</label>
</div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_select wcpa_form_id_9547 gradazione_os_od_parent wcpa-col-2 wcpa_validate_field " id="wcpa-select-1661440462701" data-type="select">
<label for="select-1661440462700">gradazione OD<span class="required_ast">*</span></label>
<div class="select">
<select name="select-1661440462700" class="gradazione_os_od " required="required" data-validation="{"label":"gradazione OD","required":true,"requiredMessage":"Field is required"}">
<option value="">- scegli -</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<div class="select_arrow"></div>
</select>
</div>
</div>
They are both valid solutions because I see that they work here but not on my page.
I answer the reflection on how I can insert javascript in a plugin ... Actually not directly in the plugin, but in the functions.php page in the child theme, through a script that I found online I can insert the javascript in the header or in the footer that communicates with the plugin, in fact I had found a script to try to enable the checkboxes inside the plugin when reloading the page and it worked so it can be done, but what you wrote for me does not take them, it does not assign me the id inside the elements and therefore the script does not work.
I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop
You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
while adding a record if i select the one of the value from dropdown then some of the divs are hiding and while insertion the data is inserting successfully into database.
Here the problem is while editing the same record which i have inserted by default it is showing the fields which i have added.
For Example: when user selects open plots from dropdown then i am hiding these two divs total_bathrooms and car_parking but when i edit if the dropdown value is open plots it should not display these two divs total_bathrooms and car_parking but here it is displaying.
Inserting A Record:
<select class="custom-select-box" name="property_type" id="property_type"required>
<option>Property Type</option>
<option value="1-BHK">1 BHK</option>
<option value="2-BHK">2 BHK</option>
<option value="3-BHK">3 BHK</option>
<option value="Villas-Duplex">Villas-Duplex</option>
<option value="Houses">Houses</option>
<option value="Open-Plots">Open Lands</option>
</select>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="total_bathrooms">
<div class="field-label">Total Bathrooms</div>
<input type="text" name="total_bathrooms" id="total_bathrooms" placeholder="Total Bathrooms" maxnumber="1"><span id="errmsgs"></span>
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="car_parking">
<div class="field-label">Car Parking</div>
<label class="radio-inline">
<input type="radio" name="car_parking" value="Available">Available
</label>
<label class="radio-inline">
<input type="radio" name="car_parking" value="Unavailable" >Unavailable
</label>
</div>
jquery:
$(document).ready(function(){
$('#property_type').on('change', function() {
if ( this.value == 'Open-Plots')
{
$("#total_bathrooms").hide();
$("#car_parking").hide();
}
else
{
$("#total_bathrooms").show();
$("#car_parking").show();
}
});
});
Editing a Record:
<select class="custom-select-box" name="property_type" required="" id="property_type">
<option value="1-BHK">1 BHK</option>
<option value="2-BHK">2 BHK</option>
<option value="3-BHK">3 BHK</option>
<option value="Villas-Duplex">Villas-Duplex</option>
<option value="Houses">Houses</option>
<option value="Open-Plots" selected="selected">Open Lands</option>
</select>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="total_bathrooms">
<div class="field-label">Total Bathrooms</div>
<input type="text" name="total_bathrooms" id="total_bathrooms" value="" maxnumber="1" required=""><span id="errmsgss"></span>
</div>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="car_parking">
<div class="field-label">Car Parking</div>
<input type="radio" name="car_parking" value="Available">Available
<input type="radio" name="car_parking" value="Unavailable">Unavailable
</div>
jquery is same for both adding and editing
Do your check on when the page loads as well. Your current code only checks when the select list is changed.
$(document).ready(function(){
showHide();
$('#property_type').on('change', function() {
showHide();
});
function showHide(){
if ( $("#property_type").val() == 'Open-Plots')
{
$("#total_bathrooms").hide();
$("#car_parking").hide();
}
else
{
$("#total_bathrooms").show();
$("#car_parking").show();
}
}
});
I have two select boxes which loads contacts and groups of contacts, how do I show one div at a time, switching between them by checking or unchecking the checkbox?
The code below show one at off state and show both two when checked instead of hiding the first one and showing the second one.
code snippet
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
if (checkbox.attr('checked') !== undefined){
dependent.show();
dependent2.hide();
} else {
dependent2.show();
dependent.hide();
}
checkbox.change(function(e){
dependent.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>
You are not toggling the second box in your change function.
checkbox.change(function(e){
dependent.toggle();
dependent2.toggle();
});
check if the checker is checked :
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
dependent2.hide();
checkbox.change(function(e){
if(this.checked){
dependent.hide();
dependent2.show();
}else
{
dependent.show();
dependent2.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>
I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>