I have following code
<div class="form-group">
<select class="form-control" name="persons">
<option value="1">{{Lang::get('user')}}</option>
<option value="0">{{Lang::get('admin')}}</option>
</select>
</div>
I want something like this if is selected the option with value = 1 to show an input like this
<div class="form-group">
{{ Form::text('name','',['required', 'class'=>'form-control', 'placeholder'=>Lang::get('user_name')]) }}
</div>
else if the value is 0
<div class="form-group">
{{ Form::text('admin','',['required', 'class'=>'form-control', 'placeholder'=>Lang::get('admin_name')]) }}
</div>
I'm new in Laravel and I don't know how to show inputs by value.
acually this is DOM issues
$('#persons').on('change', function(){
var value = $(this).val();
$('.form').find('div').addClass('hide');
if(value === 1){
$('.form').find('.one').remove('hide')
$('.form').find('.one').addClass('show')
}else{
$('.form').find('.two').remove('hide')
$('.form').find('.two').addClass('show')
}
});
enter code here
i made example . refer i update code
https://jsfiddle.net/channasmcs/5fmmLqax/
thanks
refre on change JQ
jQuery select change show/hide div event
Related
I have added this checkbox to my form:
<div class="row">
<div class="form-group col">
<input type="checkbox" name="prd_presell" id="product_presell"
onclick="presellTXT()" value="TRUE" #if(!empty($product)) #if($product->prd_presell == 'TRUE') checked #endif #endif>
<label for="presell_product">Presell Product</label>
</div>
</div>
So there is an onClick function named presellTXT() which goes like this:
function presellTXT() {
var presell_checkbox = document.getElementById("product_presell"); // get checkbox
var presell_text = document.getElementById("show_presell_text"); // text div
var presell_text_input = document.getElementById("presell_product_text"); // text input
if (presell_checkbox.checked == true){
presell_text.style.display = "block";
} else {
presell_text_input.value = "";
presell_checkbox.value = "";
presell_text.style.display = "none";
}
}
So when the checkbox is checked, it basically shows the element with an id of show_presell_text:
<div class="row" id="show_presell_text">
<div class="col-lg-12">
<div class="form-group">
<label>Product Presell Text:</label>
<input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
</div>
</div>
</div>
So when the page loads, it should not be showing the Product Presell Text unless the checkbox is checked.
Now if you take a look at jsfillde example, you can see as soon as the page loads, the text input appears however the checkbox is not checked at all!
So how to hide the text input when the page loads and the checkbox is not checked?
Note: I don't want to use CSS for this because I need to determine correctly if prd_presell is checked on page loads (because of #if($product->prd_presell == 'TRUE') which retrieves data from the DB) then it has to show the Product Presell Text text input.
UPDATE:
I tried adding this:
#show-presell-text.hidden {
display: none !important;
}
And adding this to the div:
<div class="row" id="show_presell_text" class="#if(!empty($product)) #if($product->prd_presell != 'TRUE') hidden #endif #endif">
But does not work and hide the element.
to hide/show the elements on load then this can be easily done by adding an if statement like so
#if (!empty($product))
<div class="row" id="show_presell_text">
<div class="col-lg-12">
<div class="form-group">
<label>Product Presell Text:</label>
<input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
</div>
</div>
</div>
#endif
This will completely omit the element you want at page load if empty and you can add it via JS code. However, If you want to just hide it using CSS classes you can do this:
<div class="row" id="show_presell_text" class="#if (empty($product)) hidden #endif">
<div class="col-lg-12">
<div class="form-group">
<label>Product Presell Text:</label>
<input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
</div>
</div>
</div>
If the product is empty the class will not be present and you can use CSS to set the element to display: none if the class is absent. Let me know if I can clarify further or if I got something wrong.
Edit: A better alternative for the second code block would be to add a hidden class as suggested below if the product is empty and then use it to hide it via CSS. You can then simply add or remove this class via JS as needed.
#show-presell-text.hidden {
display: none;
}
You can try out something like this.
<div class="row" id="show_presell_text" style="display: none">
By default set the display as none and based on the condition in function set it as block/ none.
i am trying to pop a notification (alert) when i click on disable option.
First i have this component.html:
<div class="col-lg-6 col-md-6">
<div class="from-group">
<label for="vehicle"> Vehicle </label>
<select
type="text"
class="form-control"
formControlName="vehicle_index"
(click)="showAlert()"
>
<option value="">--Select a Vehicle--</option>
<option
*ngFor="let vehicle of vehicles; let i = index"
value="{{ i }}"
[disabled]="vehicle.id == 8"
>
{{vehicle.model}} - {{vehicle.plate_number}}
</option>
</select>
</div>
</div>
As we see i disable from option when id = 8.
function showAlert() :
showAlert(){
if (this.plannedRouteForm.get("vehicle_index").value.disabled == true) {
alert(" Disabled");
}
}
what i am thinking about is when i click on value in option i check if is disable? then show alert.
But unfortunately NOT WORK.
What i do wrong?
mat select item disabled can't clicked...
material.angular.io/components/select/overview
Try to add a custom CSS, you can change [disabled] with [class.nameyourclass]="vehicle.id ==8" try to add a background red only for test.
I have a javascript function that takes a value from a select and append its to the end of a textarea field (mask) whenever a new selection is made from the select
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value;
document.getElementById(mask).append(" + "+selectedValue);
}
This function is used by two different elements on the same page as follows:
<div class="form-group">
<label for="edit_filename_mask_mask" id="edit_filename_mask_masklabel">
Mask
</label>
<textarea type="text" id="edit_filename_mask_mask" name="edit_filename_mask_mask"
aria-describedby="edit_filename_mask_masklabel" class="form-control" rows="10" cols="80"></textarea>
</div>
<div class="form-group">
<label for="editMaskVarList" id="editMaskVarListlabel">
Mask Fields
</label>
<select class="mb-2 form-control custom-select" id="editMaskVarList" onchange="addToEditMask('editMaskVarList', 'edit_filename_mask_mask');">
<option>
acoustic (Acoustic)
</option>
.....
and
<div class="form-group">
<label for="add_filename_mask_mask" id="add_filename_mask_masklabel">
Mask
</label>
<textarea type="text" id="add_filename_mask_mask" name="add_filename_mask_mask"
aria-describedby="add_filename_mask_masklabel" class="form-control" rows="10" cols="80"></textarea>
</div>
<div class="form-group">
<label for="addMaskVarList" id="addMaskVarListlabel">
Mask Fields
</label>
<select class="mb-2 form-control custom-select" id="addMaskVarList" onchange="addToEditMask('addMaskVarList', 'add_filename_mask_mask');">
<option>
acoustic (Acoustic)
</option>
......
In each case the select and the mask are both within a Bootstrap modal dialog. But it only works for the second case (add_filename_mask_mask) not the first case (edit_filename_mask_mask)
I added some debugging to ensure
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value;
document.getElementById(mask).append(" + "+selectedValue);
alert('Adding to mask:'+mask+':'+scriptvar+':'+document.getElementById(mask).value);
}
that the function was actually being called in both cases and all the variables a renamed correctly. Yet although there are no webconsole errors and the append() method doesnt report any error the value of mask doesnt change for edit_filename_mask_mask
I cannot create a SSCE since there seems to be no difference between the working and non working version. The only difference of note is that when modal dialog is first displayed edit_filename_mask_mask has a value but add_filename_mask_mask does not. However edit_filename_mask_mask continues to fail if I blank out edit_filename_mask_mask , and add_filename_mask_mask when has value.
What happens if you try some safety checks ?
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value || "";
var textarea = document.getElementById(mask);
textarea.value = (textarea.value || "") + " + " + selectedValue;
}
Variable name is "selectedValue" and you call to "selectValue"
I want to select the first option in a select box by default. The challenge here is that the page might have multiple select boxes as they are created dynamically.
You will understand what I am trying to achieve by looking at my code.
HTML :
<form class="form-inline">
<div class="form-group form-group-grid" ng-repeat="fields in selectedTabData.requiredField" ng-switch="fields.paramType">
<label>{{fields.paramName}}<span class="asterisk" ng-if="fields.mandatory==true">*</span></label>
<input type="text" class="form-control" ng-switch-when="Text" ng-model="fields.fieldValue" ng-attr-id="{{fields.paramName}}Id">
<select class="form-control" ng-switch-when="DropDown" ng-options="field.paramKey as field.paramValue for field in fields.paramData" ng-model="fields.fieldValue" ng-attr-id="{{fields.paramName}}Id">
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary form-inline-grid-button" ng-click="getReport()">Run Report</button>
</div>
</form>
The selected data is available under the model $scope.selectedTabData.requiredField
In Controller I push the selected values in to a variable like :
$scope.selectedTabData.requiredField.forEach(function(item)
{
paramValue.push(item.fieldValue);
paramName.push(item.paramName);
})
I tried doing this :ng-init="fields.fieldValue = fields.paramData[0]"
<select class="form-control" ng-switch-when="DropDown" ng-options="field.paramKey as field.paramValue for field in fields.paramData" ng-model="fields.fieldValue" ng-init="fields.fieldValue = fields.paramData[0]" ng-attr-id="{{fields.paramName}}Id">
</select>
I am not sure how it will work. Can anyone help me out with this?
you can make it possible by ng-repeat inside tag
<select ng-model="fields.fieldValue">
<option ng-repeat="field in fields.paramData" value="{{field.paramKey}}">
{{field.value}}
<option>
</select>
and in controller add this line
$scope.fields.fieldValue = x;
and in this example, x is "field.value" that you want as default selected option.
This is the plunkr for your problem
https://plnkr.co/edit/mahONdv5xQBa5eUZJSoX
I'm making a website and there's a form in it... now what im trying to do is very simple but i just dont know how anymore so im asking you guys. In this form you can select whether or not you want custom text on the clothing you buy. you can select yes and no with the select statement. and next to it there's a input text where you can fill in this text. What i want to do is that when the value of the select is no or still default, the input text gets disabled and when the value is yes it gets enabled.
Screenshot of output
http://prntscr.com/4ym079
My Code:
<div class="form-group col-md-6" style="margin-bottom: 25px; padding:0;">
<label class="col-md-12 control-label" for="producttext">Eigen text op product *</label>
<div class="col-md-12">
<select id="producttext" name="producttext" class="form-control" required="">
<option class="active" value="default" selected disabled>Eigen text op product</option>
<option value="nee">Nee</option>
<option value="Ja">Ja(+€3,50)</option>
</select>
</div>
</div>
<script>
</script>
<div class="form-group col-md-6" style="margin-bottom:0;">
<label class="control-label" for="product_text">Uw eigen text*</label>
<input id="product_text" name="product_text" placeholder="Indien Ja" class="form-control input-md" type="text">
</div>
If you still have any questions, please ask me.
DeusGladio
Attach a onchange function and enable/disable the input:
document.getElementById("producttext").onchange = function() {
document.getElementById("product_text").disabled = (this.value == "nee" || this.value == "default");
}
document.getElementById("producttext").change(); //to trigger on load
Or with jQuery:
$("#producttext").change(function() {
var disabled = (this.value == "nee" || this.value == "default");
$("#product_text").prop("disabled", disabled);
}).change(); //to trigger on load
Fiddle: http://jsfiddle.net/covq84f7/
Using jQuery:
$('#producttext').change(function () {
if ($(this).find('option:selected').text() != 'nee') {
$('#product_text').prop('disabled', false);
} else {
$('#product_text').prop('disabled', true)
}
});
Please write onchange javascript event on select option and try below code to get value
var e = document.getElementById("selectId");
var selectedValue = e.options[e.selectedIndex].value;
if(selectedValue == "yes")
{
//ur code
}else
{
//ur code
}
DEMO
Here is the jQuery code you need. You can listen to the change event and change the state of the input based on the value of the select. In order for this to work when the page loads, trigger the change event using, .change().
$(function() {
$('#producttext').on('change', function() {
$('#product_text').prop('disabled', this.value != 'Ja');
})
.change();
});