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();
}
}
});
Related
First of all this question might be noob because i only have basic in JS.
The question is, i already create Category data in Thrust's page which only have 4IR and DEB. Which mean in Thrust DB, it have category_id.
So in this page, when i select Thrust, it should show Category that link with Thrust.
But for this case, when i select Thrust, the Category does not appear. Am i doing something wrong here? Im so lost right now
$("#pilih1").change(function() {
var thrus_id = $(this).val();
var thrusts = #json($thrusts->toArray());
$("#pilih2").html(``);
thrusts.forEach(thrust => {
console.log(thrusts);
if (thrust.thrus_id == thrus_id) {
$("#pilih2").append(`
<option value="` + thrust.id + `">` + thrust.category + `</option>
`);
}
});
});
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="namaStrategy">Strategy Name</label>
<div class="col-sm-10" style="width:30%">
<input class="form-control" type="text" name="namaStrategy" />
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="thrus_id">Thrust</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="thrus_id" id="pilih1">
<option selected disabled hidden>PLEASE CHOOSE</option>
#foreach ($thrusts as $thrust)
<option value="{{ $thrust->id }}">{{ $thrust->namaThrust }}</option>
#endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="">Category</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="category" id="pilih2">
<option selected disabled hidden>PLEASE CHOOSE</option>
<option value="DEB">DEB</option>
<option value="4IR">4IR</option>
</select>
</div>
</div>
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>
When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>
Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;
Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks
I'm creating a web form with 3 select boxes with multiple questions. If I select 1st Question from 1st select drop-down that question will not appear in the 2nd select drop-down. It will repeat same as 3rd select drop-down.
Note: The main purpose is if user select any questions from select drop-down that question will not appear in another select drop-down.
Demo Code:
.margin-top-10 { margin-top: 1.0em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-30 { margin-top: 3.0em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 1</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 2</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="form-group">
<label class="control-label col-sm-12 col-xs-12" for="">Question 3</label>
<div class="col-sm-11 col-xs-12">
<select class="form-control" id="sel1">
<option selected="">Choose your question</option>
<option>Select question 1</option>
<option>Select question 2</option>
<option>Select question 3</option>
<option>Select question 4</option>
</select>
</div>
<div class="col-sm-11 col-xs-12 margin-top-10">
<input type="text" class="form-control" placeholder="Type your answer">
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-xs-6 text-right">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back
</div>
<div class="col-xs-6"><a class="btn btn-primary" role="button" href="Registration-Complete.html" name="btnGlassContactInfo">Register <span class="glyphicon glyphicon-ok"></span></a></div>
</div>
</div>
</div>
</div>
</div>
The first thing you might want to do if change the select elements in your code so that each of them has a unique ID. They are all sel1 at the moment :)
Then you need to bind the onchange event to the select options that will remove the option being selected. Here is an example:
$('select').on('change', function() {
var elem = this;
var option = this.value;
$('.form-control option').each(function() {
if ($(this).html() === option && $(elem).attr('id') !== $(this).parent().attr('id')) {
$(this).remove();
}
});
})
You would probably want to disable the user from using the same selection element, or store the removed options and add them back should the user change his / her mind.
I have disabled them in my example, which you can view here.
https://jsfiddle.net/martiensk/jwfeqrx0/
I've done some research but haven't been able to find and answer.
I have 1 text input and 1 selectbox.
If the selected value of the selectbox is 2, I 'd like the textbox to be hidden
If the selected value of selectbox is 1, the textbox should appear.
Here is my code:
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" class="form-control">
</div>
</div>
You can assign an id to the form-group then use that to hide/show that element
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" name="fiyatlandirma">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group" id="fiyat-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="fiyat" class="form-control"/>
</div>
</div>
then
//dom ready handler - wait for the element to load
jQuery(function($){
//change event handler to trigger when the select is changed
$('select[name="fiyatlandirma"]').change(function(){
//hide or display the group element based on the value of select
$('#fiyat-group').toggle(this.value == '2')
}).change();//to set the initial display state
})
http://learn.jquery.com/
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/change
http://api.jquery.com/toggle
Try this:
$(document).ready(function(){
$("select.form-control").change(function(){
if($(this).val()=="1")
$("input[name=fiyat]").hide();
else
$("input[name=fiyat]").show();
});
});
You can give id to all three fields: select, input label and input box
$(document).ready(function () {
$("#pricing").change(function () {
if ($(this).val() == "1") {
$("#textbox").hide();
$("#textLabel").hide();
} else {
$("#textbox").show();
$("#textLabel").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing" id="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" id="textbox" class="form-control">
</div>
</div>
using java script
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" id="select" name="fiyatlandirma" onclick="hide()">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2" >Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" id="fiyat" name="fiyat" class="form-control">
</div>
</div>
<script>
function hide(){
var select = document.getElementById("select").selectedIndex;
var input = document.getElementById("fiyat");
if(select == 1)
input.style.visibility= "hidden";
else if(select == 2)
input.style.visibility= "visible";
}
</script>