We Keep Coding

Show Form Fields Based Upon User Selection but value won't Submitted

Im doing showing form based on user selection
the displays works well, but the value is not submitted on submit
this is my blade
<div class="form-group">
<label for="category1">Kategori</label>
<select id="category1" class="form-control" name="metas[kategori">
<option value="" disabled selected>-Pilih Kategori-</option>
<option value="motor-honda">Sepeda Motor Honda</option>
<option value="elektronik">Elektronik</option>
<option value="modal-kerja">Modal Kerja</option>
<option value="pendukung-operasional">Pendukung Operasional</option>
<option value="lainnya">Lainnya <br></option>
</select>
</div>
<div class="form-group" id="otherFieldDiv">
<label for="otherField">Isi Kategori</label>
<input type="text" class="form-control" id="otherField" name="metas[kategori]">
</div>
this is my js
<script>
$("#category1").change(function() {
if ($(this).val() == "lainnya") {
$('#otherFieldDiv').show();
$('#otherField').attr('required', '');
$('#otherField').attr('data-error', 'This field is required.');
} else {
$('#otherFieldDiv').hide();
$('#otherField').removeAttr('required');
$('#otherField').removeAttr('data-error');
}
});
$("#category1").trigger("change");
</script>
If i choose the "lainnya" value, submit function is success
but if i choose another value in the console it's returning this
metas.kategori: The metas.kategori must be a string.

How to show input and remove it based on select box?

I have two input I need to show one of them based on the select box:
html code:
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" name="Numeric">
</div>
<div id="input_type2">
<input type="text" name="Percentage">
</div>
jQuery code:
$('#type-price').on('change',function(){
if($(this).val()=== "numeric"){
$("#input_type1").show();
$("#input_type2").hide();
}else if ($(this).val()=== "percentage"){
$("#input_type1").hide();
$("#input_type2").show();
}
});
Now it's totally fine like that but my issue I have php request when I show input_type1 then hide input_type2 the request pick up second one which is null so I need to delete the hide one at all form Dom tree!

You can empty the div which contain the input and you will have only one input in your DOM. On each change of select, it will fill the concerne div by the input html.
Also you'd used wrong selector, the # selector is for id and you have used an class in your HTML code.
The JQuery class selector is ..
function removeAll() {
$("#input_type1").html('');
$("#input_type2").html('');
}
removeAll();
$('#type-price').on('change',function(){
removeAll();
if ($(this).val() === "numeric"){
$("#input_type1").append('<input type="text" value="numeric">');
} else if ($(this).val() === "percentage"){
$("#input_type2").append('<input type="text" value="percentage">');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="" disabled selected>Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div id="input_type1">
<input type="text" value="numeric">
</div>
<div id="input_type2">
<input type="text" value="percentage">
</div>

Here is an example with one field.
$(function() {
$("#type-price").change(function(e) {
$(".input-type").fadeIn("slow").find("input").attr("name", $(this).val().toLowerCase());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input-type" style="display: none;">
<input type="text">
</div>

Besides some syntax problem in your jQuery class selector, Thinking about performance, It's simply better to prevent the (non-visible) input from being sent.
Shorter coding and less dom manipulation.
$('#type-price').on('change',function(){
$('.input_type1').toggle($(this).val()=="numeric");
$('.input_type2').toggle($(this).val()=="percentage");
});
//To prevent the non-visible from being posted
//Eithr we check the form using submit handler or the button and prevent the
//from being sent do our stuff then send it...
$('#myForm').submit(function() {
$('input:hidden').attr('name', '');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<select id="type-price">
<option value="">Choose one...</option>
<option value="numeric">Numeric </option>
<option value="percentage">Percentage</option>
</select>
<div class="input_type1">
<input name="inp1" type="text" placeholder="1">
</div>
<div class="input_type2">
<input name="inp2" type="text" placeholder="2">
</div>
<input type="submit" value="Send">
</form>

How to hide select2 with options jQuery

I have select form with options, for search by keywords. I'm using select2 lib.
But my select form is created dynamically, and I want to hide and show some select form depending on user's choice.
Now the problem is that, if I choose something from the list:
For ex Production plant, it will appear new select form in which I have options. (it's working good)
If I again go to Production resources and choose another type:
Now I chose Production segment and prev select form is hidden, but in case if I want to go back to the Production plant, it will not appear:
My code:
$("#productionResources").change(function () {
var prodRes = $("#productionResources :selected").html();
$("#selectedProdRes").html(prodRes);
var id = $(this).val();
if (id != "") {
$('#' + id).select2().next().show();
}
idChanging(id);
});
function idChanging(id) {
$("#productionResources").change(function () {
$('#' + id).select2().next().hide();
});
}
HTML:
<div class="display-in-row">
<label>Production resources</label><br>
<select class="form-control" id="productionResources">
<option selected></option>
<option value="productionPlant">Production plant</option>
<option value="productionSegment">Production segment</option>
<option value="valueStream">Value stream</option>
<option value="workCenterGroup">Work center group</option>
<option value="workCenter">Work center</option>
<option value="station">Station"</option>
</select>
</div>
<div class="display-in-row">
<div class="col-12">
<label id="selectedProdRes"></label><br>
<select asp-for="ProductionPlantId" asp-items="Model.ProductionPlant" class="form-control content" id="productionPlant"></select>
<select asp-for="ProductionSegmentId" asp-items="Model.ProductionSegment" class="form-control content" id="productionSegment"></select>
<select asp-for="ValueStreamId" asp-items="Model.ValueStream" class="form-control content" id="valueStream"></select>
<select asp-for="WorkCenterGroupId" asp-items="Model.WorkCenterGroup" class="form-control content" id="workCenterGroup"></select>
<select asp-for="WorkCenterId" asp-items="Model.WorkCenter" class="form-control content" id="workCenter"></select>
<select asp-for="StationId" asp-items="Model.Station" class="form-control content" id="station"></select>
</div>
</div>

The problem comes from your function idChanging():
As soon as you change the 1st select, the event of idChanging() is set and remains. So everytime you select #productionResources, all the events defined by idChanging() will get triggered, so all the previously selected selects will be hidden.
The following should work:
I add a class secondary-select to all the secondary selects to facilitate, but this is not required:
<div class="display-in-row">
<div class="col-12">
<label id="selectedProdRes"></label><br>
<select asp-for="ProductionPlantId" asp-items="Model.ProductionPlant" class="form-control content secondary-select" id="productionPlant"></select>
<select asp-for="ProductionSegmentId" asp-items="Model.ProductionSegment" class="form-control content secondary-select" id="productionSegment"></select>
<select asp-for="ValueStreamId" asp-items="Model.ValueStream" class="form-control content secondary-select" id="valueStream"></select>
<select asp-for="WorkCenterGroupId" asp-items="Model.WorkCenterGroup" class="form-control content secondary-select" id="workCenterGroup"></select>
<select asp-for="WorkCenterId" asp-items="Model.WorkCenter" class="form-control content secondary-select" id="workCenter"></select>
<select asp-for="StationId" asp-items="Model.Station" class="form-control content secondary-select" id="station"></select>
</div>
</div>
$("#productionResources").change(function () {
// Define title
var prodRes = $("#productionResources :selected").html();
$("#selectedProdRes").html(prodRes);
// Make sure none of the 2nd select is visible
$('.secondary-select').select2().next().hide();
// Display the select according to the ID
var id = $(this).val();
if (id !== '') {
$('#' + id).select2().next().show();
}
});

Option not being selected

I'm trying to select a specific option of these two select:
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>
using the following code:
$(document).ready(function() {
$('#customer-state option[value="Italy"]').prop("selected", true);
$('#customer-region option[value="Liguria"]').prop("selected", true);
})
but no chance to get this working. I also created a JSFIDDLE.
$(document).ready(function() {
$('#customer-state option[value="Italy"]').prop("selected", true);
$('#customer-region option[value="Liguria"]').prop("selected", true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://country-regions.github.io/country-region-selector/crs.min.js"></script>
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>

That is probably because the crs.min.js plugin you've loaded relies on listening to the onchange event on the <select> element in order to update the region dropdown. Therefore, if you trigger/dispatch the onchange event manually on the parent <select> element, then it should work:
$(document).ready(function() {
$('#customer-state option[value="Italy"]').prop("selected", true).parent().trigger('change');
$('#customer-region option[value="Liguria"]').prop("selected", true);
})
<script src="http://country-regions.github.io/country-region-selector/crs.min.js" id="crs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>
Even better: You actually don't need to select the <option> element using jQuery: you can simply set the <select> element's value to the desired selected option, and the correct <option> will automatically be selected. I prefer this method because it makes your code a lot more readable, and slightly more performant as the browser does not have to traverse through all the nested <option> elements to match the attribute selector:
$(document).ready(function() {
$('#customer-state').val('Italy').trigger('change');
$('#customer-region').val('Liguria');
})
<script src="http://country-regions.github.io/country-region-selector/crs.min.js" id="crs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="crs-country form-control required" name="country" id="customer-state" data-region-id="customer-region"></select>
<select id="customer-region" name="region" class="form-control required"></select>

Selecting Option in Select2 - Disable / Enable action not triggering

I have a single select Select2 drop down box and a blank textbox next to it that is disabled by default.
When the user selects an option, namely "ServiceNow" I would like the text box to set disabled to false.
Currently, the functionality seems random. Two of the four available options enable the field, two disable it. Not even the one I want enables it. What am I doing incorrectly here?
The form HTML
<div>
<label for="feature">Feature</label>
<select class="form-control select2" style="width: 100%;" name="feature" id="feature">
<option selected="selected" disabled="disabled">-Select-</option>
<option name="ServiceNow" value="ServiceNow">Service Now</option>
<option>Epic Upgrade</option>
<option>Alarais Interop</option>
<option>Pyxis Upgrade</option>
</select>
</div>
<div class="col-xs-4">
<label for="serviceNowID">ServiceNow ID</label>
<input type="text" class="form-control" name="serviceNowID" id="serviceNowID" disabled="disabled" placeholder="ServiceNow ID (This doesn't work yet.)">
</div>
Related JS
<script>
//Get the ServiceNow thing to unlock on option select
//Evaluate if option is selected
$('#feature').on("select2:selecting", function(e) {
var choice = $(this).find('option').val();
if ($(this).val() == 'ServiceNow') {
document.getElementById("serviceNowID").disabled = false;
} else {
document.getElementById("serviceNowID").disabled = true;
}
});
</script>
Thanks!

When the user selects an option, namely "ServiceNow" I would like the text box to set disabled to false.
Maybe you should use the 'select' event instead of 'selecting'?
$('#feature').on("select2:select", function(e) {
...

Here is an example which may help you:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label for="feature">Feature</label>
<select class="form-control select2" style="width: 100%;" name="feature" id="feature">
<option selected="selected" disabled="disabled">-Select-</option>
<option name="ServiceNow" value="ServiceNow">Service Now</option>
<option>Epic Upgrade</option>
<option>Alarais Interop</option>
<option>Pyxis Upgrade</option>
</select>
</div>
<div class="col-xs-4">
<label for="serviceNowID">ServiceNow ID</label>
<input type="text" class="form-control" name="serviceNowID" id="serviceNowID" disabled="disabled" placeholder="ServiceNow ID (This doesn't work yet.)">
</div>
<script>
//Get the ServiceNow thing to unlock on option select
//Evaluate if option is selected
$('#feature').on("change", function(e) {
if ($(this).val() == 'ServiceNow') {
$("#serviceNowID").attr('disabled',false);
} else {
$("#serviceNowID").attr('disabled',true);
}
});
</script>