How to get the selected dropdown value using jQuery - php

I want to get the selected value in dropdown for edit. But I got all the values in dropdown are selected.
function getinstruments() {
var model=$('#model').val();
var brand=$('#brand').val();
brand = brand.split('%') ;
model = model.split('%') ;
$.getJSON("{!! URL::route('appraisal.getinstrument') !!}", {brand: brand[0],model:model[0]}, function(data) {
if(data.success)
{
$('select[name="sub_model"]').find(":selected").html(data.sub_models_array);
$('select[name="color"]').find(":selected").html(data.colors_array);
$('select[name="top"]').find(":selected").html(data.top_array);
$('select[name="neck"]').find(":selected").html(data.neck_array);
}
});
}
Don't know what the problem with this code is. Reply of the question is highly appreciated
<div class="col-lg-6 col-xsm-6">
<h4>Enter Body wood details</h4>
<div class="form-group">
<label>Top Wood</label>
<select name='top_wood' class='form-control' placeholder ='Enter Top wood' id='top'>
<option value=''>Pick a topWood</option>
</select>
</div>
<div class="form-group">
<label>Back Woord</label>
<select name='back_wood' class='form-control' placeholder ='Enter Back wood' id='back'>
<option value=''>Pick a topWood</option>
</select>
</div>
<div class="form-group">
<label>Neck Wood</label>
<select name='neck_wood' class='form-control' placeholder ='Enter Neck wood' id='neck'>
<option value=''>Pick a NeckWood</option>
</select>
</div>
<div class="form-group">
<label>Select color</label>
<select name='color' class='form-control' id='color' >
<option value=''>Pick a color</option>
</select>
</div>
<div class="form-group">
<label>Frets</label>
<select name='frets' class='form-control' placeholder ='Enter Frets' id='frets'>
<option value=''>Pick a Fingerboard Material</option>
</select>
</div>
<div class="form-group">
<label>Turner</label>
<select name='turner' class='form-control' placeholder ='Enter Turner' id='turner'>
<option value=''>Pick a Fingerboard Material</option>
</select>
</div>
this is my view file where i want selected value of dropdaown

Related

If the son is yes then the dropdown from list 1 should come if the son dropdown is no then the drop down from list 2 must come

I am setting up a conditional dropdown.
<div class="form-group">
<label asp-for="son" class="control-label"></label>
<select name="son" id="son">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>Yes</option>
<option>No</option>
</select>
<span asp-validation-for="son" class="text-danger"></span>
</div>
Here is the dropdown for son, if it is NO then then the below 1st dropdown must come.
<div id="fatherNo" style="display: none" class="form-group">
<label asp-for="NO" class="control-label"></label>
<select name="NO">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>Not_Applicable</option>
</select>
<span asp-validation-for="No" class="text-danger"></span>
</div>
If it is Yes in the son dropdown then then the below 2nd dropdown must come.
<div id="fatheryes" style="display: none" class="form-group">
<label asp-for="fatheryes" class="control-label"></label>
<select name="fatheryes">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>working</option>
</select>
<span asp-validation-for="fatheryes" class="text-danger"></span>
</div>
as you mention jQuery in your tags, it is implemented by jQuery. Please use a dropdown
library for convenient.
Any way check snippet below:
(function ($){
'use strict';
$(function() {
var
namespace = 'customNamespace',
//-----
son = $('select[name="son"]'),
ddYes = $('#fatherNo'),
ddNo = $('#fatherYes');
var selected;
son.on('change.' + namespace, function () {
selected = $(this).find(':selected');
if(selected.val().toLowerCase() == 'yes') {
ddYes.show();
ddNo.hide();
} else if(selected.val().toLowerCase() == 'no') {
ddYes.hide();
ddNo.show();
} else {
ddYes.hide();
ddNo.hide();
}
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label asp-for="son" class="control-label"></label>
<select name="son" id="son">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<span asp-validation-for="son" class="text-danger"></span>
</div>
<div id="fatherNo" style="display: none" class="form-group">
<label asp-for="NO" class="control-label"></label>
<select name="NO">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>Not_Applicable</option>
</select>
<span asp-validation-for="No" class="text-danger"></span>
</div>
<div id="fatherYes" style="display: none" class="form-group">
<label asp-for="fatheryes" class="control-label"></label>
<select name="fatheryes">
<option value="none" class="a" selected="selected"> -- choose one --</option>
<option>working</option>
</select>
<span asp-validation-for="fatheryes" class="text-danger"></span>
</div>
$("#son").change(function(){
var selected=$(this).children("option:selected").text();
if(selected.includes("Yes")){
$("fatheryes").css("display","block");
$("fatherNo").css("display","none");
}
else{
$("fatheryes").css("display","none");
$("fatherNo").css("display","block");
}
});
When son select is change, This function be play

How to push action form with variable of select?

I want to take value from select in html and push it into action url.
So when users select something value of action buyoption will be the value of the selection
I would prefer to do it with php if there is no option to do it with html.
This is my test buy it doesn't change the buyoption to selection variable..
please help
<form action="<?php echo URLROOT; ?>/trades/trade/buyoption/selloption" method="POST">
<div class="row">
<div class="col-md-9 register-right" >
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">TRADE</h3>
<div class="row register-form">
<div class="col-md-12">
<label for="buy"><b>YOU SEND:</b></label>
<div class="form-group">
<select class="form-control" name="buyoption" id="buyoption">
<option class="hidden" selected disabled>Please select what you want to sell</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">LITECOIN (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div>
<label for="buy"><b>YOU RECEIVE:</b></label>
<div class="form-group">
<select class="form-control" name="selloption" id="buyoption">
<option class="hidden" selected disabled>Please select what you want receive</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">Litecoin (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div>
<input type="submit" class="btnRegister" value="Proceed"/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
There must not be multiple elements in a document that have the same id value.
You can watch for change event of select element and on Change, manipulate the Action URL.
let buyoption = document.getElementById('buyoption');
let selloption = document.getElementById('selloption');
let postForm = document.getElementById('postForm');
let action = postForm.getAttribute('action');
let replacerFn = function() {
let temp = action;
if (buyoption.value) {
temp = temp.replace('buyoption', buyoption.value);
}
if (selloption.value) {
temp = temp.replace('selloption', selloption.value);
}
postForm.setAttribute('action', temp);
console.log('Action Attribute=> ', postForm.getAttribute('action'));
};
buyoption.addEventListener('change', function() {
replacerFn();
});
selloption.addEventListener('change', function() {
replacerFn();
});
<form action="/trades/trade/buyoption/selloption" method="POST" id="postForm">
<div class="row">
<div class="col-md-9 register-right">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">TRADE</h3>
<div class="row register-form">
<div class="col-md-12"> <label for="buy"><b>YOU SEND:</b></label>
<div class="form-group">
<select class="form-control" name="buyoption" id="buyoption">
<option class="hidden" selected disabled value="">Please select what you want to sell</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">LITECOIN (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div><label for="buy"><b>YOU RECEIVE:</b></label>
<div class="form-group">
<select class="form-control" name="selloption" id="selloption">
<option class="hidden" selected disabled value="">Please select what you want receive</option>
<option value="btc">Bitcoin (BTC)</option>
<option value="ltc">Litecoin (LTC)</option>
<option value="eur">NATIONAL BANK TRANSFER (EUR/USD/HRK)</option>
</select>
</div><input type="submit" class="btnRegister" value="Proceed" /> </div>
</div>
</div>
</div>
</div>
</div>
</form>

how to get the value from select2 and use it for the next select2

<div class="form-group col-sm-6">
<label for="" class="control-label">Skill</label> <br>
<select name="skill[]" class="select-skill-only form-control" id="req-skill" multiple="multiple" required>
#foreach ($skill2 as $skill)
<option value="{{$skill->skill_id}}">{{$skill->skill_name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-6">
<label for="" class="control-label">Skill Priority</label> <br>
<select name="priority[]" class="select-skill-only form-control" id="req-priority" multiple="multiple" required>
#foreach ($skill2 as $priorityskill)
<option value="{{$priorityskill->skill_id}}">{{$priorityskill->skill_name}}</option>
#endforeach
</select>
</div>
set a listener for change any select and get value it after any change.
for this you give id to selects.
for example :
let skills = [];
$('#skill-select').on('change', function(){
skills = $(this).val();
$('#priority-select > option').each(function() {
if(!skills.includes($(this).val())){
$(this).prop('disabled', true)
}
});
});
and use skills selected array everywhere

Fetch Dynamic data with jquery

I am trying to fetch Data when we select value.
Here Is Jquery and html code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
Now Here is Html.And This Code is working .
<select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>
But when I am trying to use this with dynamic PHP code this is not Working.
<div class="form-group">
<label for="address"> Select Product Kit</label>
<select class="form-group" name="product kit" id="colorselector">
#foreach($product as $productDeatails)
<option value='{{$productDeatails->id}}'>{{$productDeatails->title}}
</option>
#endforeach
</select>
<div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}
</div>
#endforeach
</select>
<div id="{{$productDeatails->id}}" class="colors" style="display:none">{{$productDeatails->price}}
As you can see, the foreach has ended before you could print the hidden div HTML. Due to this, $productDeatails is out of scope now and is no longer available.
A solution is to run the foreach again to print the hidden divs in HTML like below:
<div class="form-group">
<label for="address"> Select Product Kit</label>
<select class="form-group" name="product kit" id="colorselector">
#foreach($product as $productDetails)
<option value='{{ $productDetails->id }}'>{{ $productDetails->title}}</option>
#endforeach
</select>
#foreach($product as $productDetails)
<div id="{{ $productDetails->id}}" class="colors" style="display:none">{{ $productDetails->price}}
</div>
#endforeach
</div>

get the dynamically created multiple select box values using jquery

I have been reviewing a lot of pages about this and can't seem to figure out why this isn't working.
And I have a doubt in the section of,if i have multiple dynamically created select box and this selected values to be passed to the text box with some calculation before using jQuery. please help me i have tortured in this section.
In the below line of input.php have the html code of get the input.
function addMore() {
$("<DIV>").load("input.php", function() {
$("#product").append($(this).html());
});
}
function deleteRow() {
$('DIV.product-item').each(function(index, item){
jQuery(':checkbox', this).each(function () {
if ($(this).is(':checked')) {
$(item).remove();
}
});
});
}
$(document).ready(function() {
$('.product-item').change(function()
{
var option1 =$(this).find('.orderbox1 option:selected').val();
var option2 = $(this).find('.orderbox2 option:selected').val();
option1 *= $(".orderbox3").val();
option2 *= $(".orderbox3").val();
$(".orderbox4").val(option1-option2);
});
});
</SCRIPT>
</HEAD>
<BODY>
<FORM name="frmProduct" method="post" action="">
<DIV id="outer">
<DIV id="header">
<DIV class="float-left" style="margin-left:150px;"> </DIV>
<DIV class="float-left col-heading">Choose Currency</DIV>
<DIV class="float-left col-heading">Choose Product</DIV>
<DIV class="float-left col-heading">Forex Amount</DIV>
<DIV class="float-left col-heading">Rupee Amount</DIV>
</DIV>
<DIV id="product">
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>
<DIV class="float-left"> Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select></DIV>
<DIV class="float-left"> Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" id="orderbox3" class="orderbox3"/></DIV>
<DIV class="float-left"><input type="text" name="item_price[]" id="orderbox4" class="orderbox4"/></DIV>
</DIV>
</DIV>
<DIV class="btn-action float-clear">
<input type="button" name="add_item" value="Add More" onClick="addMore();" />
<input type="button" name="del_item" value="Delete" onClick="deleteRow();" />F
<span class="success"><?php if(isset($message)) { echo $message; }?></span>
</DIV>
<DIV class="footer">
<input type="submit" name="save" value="Save" />
</DIV>
</DIV>
</FORM>
Firstly, it looks like you are trying to attach a change handler to a div. This is not possible. From the documentation -
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.
To get it to work you can change this -
$('.product-item').change(function() {
to -
$('.product-item select, .product-item input').change(function() {
Secondly, to handle dynamic rows you you need to use event delegation. Using .on you can apply the function to dynamic elements. You will need to change the function to -
$("#product").on('change', '.product-item select, .product-item input', function() {
var $line = $(this).parents('.product-item');
var option1 = $line.find('.orderbox1').val();
var option2 = $line.find('.orderbox2').val();
option1 *= $line.find(".orderbox3").val();
option2 *= $line.find(".orderbox3").val();
$line.find(".orderbox4").val(option1 - option2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV id="product">
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left">
<input type="checkbox" name="item_index[]" />
</DIV>
<DIV class="float-left">Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select>
</DIV>
<DIV class="float-left">Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select>
</DIV>
<DIV class="float-left">
<input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
</DIV>
<DIV class="float-left">
<input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
</DIV>
</DIV>
<DIV class="product-item float-clear" style="clear:both;">
<DIV class="float-left">
<input type="checkbox" name="item_index[]" />
</DIV>
<DIV class="float-left">Choose Currency:
<select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;">
<option selected="selected">Select</option>
<option value="66">United States</option>
<option value="75">European</option>
<option value="12">Philippines</option>
<option value="17">Qatar</option>
</select>
</DIV>
<DIV class="float-left">Choose Product:
<select name="item_size[]" id="orderbox2" class="orderbox2">
<option value="1" selected="selected">Select</option>
<option value="10">Forex Card</option>
<option value="20">Currency Notes</option>
</select>
</DIV>
<DIV class="float-left">
<input type="text" name="item_name[]" id="orderbox3" class="orderbox3" />
</DIV>
<DIV class="float-left">
<input type="text" name="item_price[]" id="orderbox4" class="orderbox4" />
</DIV>
</DIV>
</DIV>
</DIV>
Here I'm creating a variable ($line) to represent the row. I can then use find to get the orderboxes for that row.

Categories