I'm trying to trigger the variationCheck function on select change, but is there a way I can select both select options first before the function is triggered?
A little like validating, but still able to trigger the function again and again if the user decides to change the select options after validating. I hope this makes sense.
Any help would be helpful! Thanks.
Screenshot
JS
$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){
var get_product_id = $(this).closest('form').data('product_id').replace('form_','');
variationCheck(get_product_id);
});
function variationCheck(get_product_id) {
for (var i = 0; i < variationArray.length; i++) {
if (variationArray[i].product_id === get_product_id) {
alert(get_product_id);
};
};
};
HTML
<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label">
<label for="covers">Covers</label>
</td>
<td class="value">
<select id="covers" class="" name="attribute_covers" data-attribute_name="attribute_covers">
<option value="" selected="selected">Choose an option</option>
<option value="5" class="attached enabled">5</option>
<option value="6" class="attached enabled" selected="selected">6</option>
<option value="7" class="attached enabled">7</option>
<option value="8" class="attached enabled">8</option>
<option value="9" class="attached enabled">9</option>
<option value="10" class="attached enabled">10</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label for="extras">Extras</label>
</td>
<td class="value">
<select id="extras" class="" name="attribute_extras" data-attribute_name="attribute_extras">
<option value="" selected="selected">Choose an option</option>
<option value="Fruit" class="attached enabled">Fruit</option>
<option value="Cake" class="attached enabled">Cake</option>
</select><a class="reset_variations" href="#" style="visibility: visible;">Clear</a> </td>
</tr>
</tbody>
</table>
One way I can think of is to check both Select element's values and call validation method if both are selected:
$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){
var get_product_id = $(this).closest('form').data('product_id').replace('form_','');
if($("select[name=attribute_covers]").val() != "" && $("select[name=attribute_extras]").val() != ""){
variationCheck(get_product_id);
}
});
function variationCheck(get_product_id) {
for (var i = 0; i < variationArray.length; i++) {
if (variationArray[i].product_id === get_product_id) {
alert(get_product_id);
};
};
};
Related
I have a list which contains some attribute data like letid,industrysize,industrytypeid. And I also have multiple select dropdowns.
What I want is that when I click on an item in the list, the dropdown will change according to the value in the list. I've made the javascript as below. But still can't. Can anyone help me?
$(document).ready(function(){
$('.table-autocomplete td').click(function () {
$("#select-ac").click();
});
$(document).on('click', '.table-autocomplete-value', function () {
let letidValue = $(this).data('letid');
let industrySize = $(this).data('industrysize');
let indsutrytypeid = $(this).data('industrytypeid');
if(letidValue === null || letidValue === ''){
console.log(letidValue)
console.log(industrySize)
console.log(indsutrytypeid)
$("select[name='account-industrySize']").val($(this).data('industrysize')).change();
$("select[name='account-industrySize']").prop("disabled", false);
$("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
$("select[name='account-industryType-id']").prop("disabled", false);
$("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
$("select[name='account-legalEntityType-id']").prop("disabled", false);
}else{
console.log(letidValue)
console.log(industrySize)
console.log(indsutrytypeid)
$("select[name='account-industrySize']").val($(this).data('industrysize')).change();
$("select[name='account-industrySize']").prop("disabled", true);
$("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
$("select[name='account-industryType-id']").prop("disabled", true);
$("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
$("select[name='account-legalEntityType-id']").prop("disabled", true);
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select-ac"></div>
<table class="table-autocomplete" id="racbe5de91fbfd94c89be790f1408638751">
<tbody>
<tr>
<td class="table-autocomplete-value" tabindex="22" data-key="22" data-industrysize="[10,100)" data-industrytypeid="13" data-letid="2">ABADI JAYA PACKING</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="324" data-key="324" data-industrysize="[101,300)" data-industrytypeid="11" data-letid="6">ABADI JAYA PACKING</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="23" data-key="23" data-industrysize="" data-industrytypeid="" data-letid="">ACER STORE</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="327" data-key="327" data-industrysize="[10,100)" data-industrytypeid="13" data-letid="2">ACER STORE</td>
</tr>
<tr>
<td class="table-autocomplete-value" tabindex="24" data-key="24" data-industrysize="[2,10)" data-industrytypeid="13" data-letid="5">ADIJAYA BUANA PERKASA</td>
</tr>
</tbody>
</table>
<select name="account-legalEntityType-id" id="legal-entity-type" onchange="this.style.color='black';" style="color: black;">
<option value="" style="display:none">Jenis Perusahaan</option>
<option value="11" style="color: black;">Lainnya</option>
<option value="1" style="color: black;">PT</option>
<option value="2" style="color: black;">CV</option>
<option value="3" style="color: black;">Firma</option>
<option value="4" style="color: black;">PD</option>
<option value="5" style="color: black;">UD</option>
<option value="6" style="color: black;">BUMN</option>
<option value="7" style="color: black;">BUMD</option>
<option value="8" style="color: black;">Lembaga</option>
<option value="9" style="color: black;">Yayasan</option>
<option value="10" style="color: black;">Koperasi</option>
</select>
<select name="account-industryType-id" id="company-classified" onchange="this.style.color='black';" style="color: black;">
<option value="" style="display:none">Klasifikasi Perusahaan</option>
<option value="11" style="color: black;">Pertambangan</option>
<option value="12" style="color: black;">Trading</option>
<option value="13" style="color: black;">Properti</option>
<option value="14" style="color: black;">Pertanian</option>
<option value="15" style="color: black;">Pertenakan</option>
<option value="16" style="color: black;">Transportasi & Gudang</option>
<option value="17" style="color: black;">Lainnya</option>
<option value="1" style="color: black;">Jasa</option>
<option value="2" style="color: black;">Kesehatan</option>
<option value="3" style="color: black;">Kesenian & Hiburan</option>
<option value="4" style="color: black;">Keuangan & Asuransi</option>
<option value="5" style="color: black;">Konstruksi</option>
<option value="6" style="color: black;">Manufaktur & Perakitan</option>
<option value="7" style="color: black;">Pemerintahan, Badan & BUMN</option>
<option value="8" style="color: black;">Pendidikan</option>
<option value="9" style="color: black;">Pengelolaan Limbah</option>
<option value="10" style="color: black;">Hotel, Restoran, Cafe</option>
</select>
<select name="account-industrySize" id="company-classified" onchange="this.style.color='black';" style="color: black;">
<option value="" style="display:none">Jumlah Karyawan</option>
<option value="[2,10)" style="color: black;">2-9</option>
<option value="[10,100)" style="color: black;">10-99</option>
<option value="[101,300)" style="color: black;">100-299</option>
<option value="[300,)" style="color: black;">>300</option>
</select>
You are referencing the wrong jQuery selector when retrieving the "data*" attributes
Your click function should look like this:
$(document).on('click', '.table-autocomplete-value', function () {
let letidValue = $(this).data('letid');
let industrySize = $(this).data('industrysize');
let indsutrytypeid = $(this).data('industrytypeid');
if(letidValue === null || letidValue === ''){
console.log(letidValue)
console.log(industrySize)
console.log(indsutrytypeid)
$("select[name='account-industrySize']").val($(this).data('industrysize')).change();
$("select[name='account-industrySize']").prop("disabled", false);
$("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
$("select[name='account-industryType-id']").prop("disabled", false);
$("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
$("select[name='account-legalEntityType-id']").prop("disabled", false);
}else{
console.log(letidValue)
console.log(industrySize)
console.log(indsutrytypeid)
$("select[name='account-industrySize']").val($(this).data('industrysize')).change();
$("select[name='account-industrySize']").prop("disabled", true);
$("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
$("select[name='account-industryType-id']").prop("disabled", true);
$("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
$("select[name='account-legalEntityType-id']").prop("disabled", true);
}
})
Notice I removed $('#select-ac').data and I put $(this).data
By using this code I am creating two drop down and one the basis of first ,trying to filter second ,
If I select Software issue in first drop down, in second drop down only two data I want, master data and App crash. same ins hardware only 2 printer and machine.
once select printer in second one then only one data print not coming in third drop down.
<tr>
<td>
<b>Issue</b>
<br>
</td>
<td>
<select name="select-native-1" id="store_issue" data-iconpos="left">
<option value="No Issue">No Issue</option>
<option value="Software Issue">Software Issue</option>
<option value="Hardware Issue">Hardware Issue</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Type</b>
<br>
</td>
<td>
<select name="select-native-2" id="store_issue_type" data-iconpos="left">
<option value="Master data">Master data</option>
<option value="crash">App Crash</option>
<option value="Printer">Printer</option>
<option value="Machine">Machine</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Details</b>
<br>
</td>
<td>
<select name="select-native-3" id="store_issue_details" data-iconpos="left">
<option value="data ussue">Data Isse</option>
<option value="App crash">App crash</option>
<option value="print not coming">Print not coming</option>
<option value="Machine not getting on">Machine not getting on</option>
</select>
<br>
</td>
</tr>
Below is my js code.. , but it's not vorking
<script>
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
</script>
You can dynamically add and remove options from other selects using jQuery easily. Just to give you an idea here is an example;
$(function() {
$('#store_issue').on('change', function() {
$('#store_issue_type').empty();
$('#store_issue_details').empty();
switch($(this).val()) {
case "Software Issue":
$('#store_issue_type')
.append($('<option value="Master data">Master data</option>'))
.append($('<option value="crash">App Crash</option>'));
break;
case "Hardware Issue":
$('#store_issue_type')
.append($('<option value="Printer">Printer</option>'))
.append($('<option value="Machine">Machine</option>'));
}
});
$('#store_issue_type').on('change', function() {
$('#store_issue_details').empty();
switch($(this).val()) {
case "Master data":
$('#store_issue_details')
.append($('<option data-sel="Master data" value="data ussue">Data Isse</option>'));
break;
case "crash":
$('#store_issue_details')
.append($('<option data-sel="crash" value="App crash">App crash</option>'));
break;
case "Printer":
$('#store_issue_details')
.append($('<option data-sel="Printer" value="print not coming">Print not coming</option>'));
break;
case "Machine":
$('#store_issue_details')
.append($('<option data-sel="Machine" value="Machine not getting on">Machine not getting on</option>'));
break;
}
});
});
select {
min-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<b>Issue</b>
<br>
</td>
<td>
<select name="select-native-1" id="store_issue" data-iconpos="left">
<option value="No Issue">No Issue</option>
<option value="Software Issue">Software Issue</option>
<option value="Hardware Issue">Hardware Issue</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Type</b>
<br>
</td>
<td>
<select name="select-native-2" id="store_issue_type" data-iconpos="left">
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Details</b>
<br>
</td>
<td>
<select name="select-native-3" id="store_issue_details" data-iconpos="left">
</select>
<br>
</td>
</tr>
Try to disable and enable options based on first dropdown selection. Check below snippet for reference. I just sampled with only two selects.
$('#select2 option').prop('disabled', true);
$('#select2').find('.'+ $('#select1').val()).prop('disabled', false);
$('#select1').change(function() {
$('#select2 option').prop('disabled', true);
$('#select2').find('.' + $(this).val()).prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="select2">
<option class="option1">Option 1</option>
<option class="option1">Option 1</option>
<option class="option1">Option 1</option>
<option class="option2">Option 2</option>
<option class="option2">Option 2</option>
<option class="option3">Option 3</option>
</select>
Try something like this:
$("#store_issue").change(function() {
var v = $(this).val().replace(" Issue", "")
$("#store_issue_type option").show().not("[data-sel=" + v + "]").hide();
$("#store_issue_type").val($("#store_issue_type option[data-sel=" + v + "]:first()").first().val())
})
$("#store_issue_type").change(function() {
var v = $(this).val()
$("#store_issue_details option").show().not("[data-sel='" + v + "']").hide();
$("#store_issue_details").val($("#store_issue_details option[data-sel='" + v + "']:first()").first().val())
})
Demo
$("#store_issue").change(function() {
var v = $(this).val().replace(" Issue", "")
$("#store_issue_type option").show().not("[data-sel=" + v + "]").hide();
$("#store_issue_type").val($("#store_issue_type option[data-sel=" + v + "]:first()").first().val())
})
$("#store_issue_type").change(function() {
var v = $(this).val()
$("#store_issue_details option").show().not("[data-sel='" + v + "']").hide();
$("#store_issue_details").val($("#store_issue_details option[data-sel='" + v + "']:first()").first().val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<b>Issue</b>
<br>
</td>
<td>
<select name="select-native-1" id="store_issue" data-iconpos="left">
<option value="No Issue">No Issue</option>
<option value="Software Issue">Software Issue</option>
<option value="Hardware Issue">Hardware Issue</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Type</b>
<br>
</td>
<td>
<select name="select-native-2" id="store_issue_type" data-iconpos="left">
<option data-sel="Software" value="Master data">Master data</option>
<option data-sel="Software" value="crash">App Crash</option>
<option data-sel="Hardware" value="Printer">Printer</option>
<option data-sel="Hardware" value="Machine">Machine</option>
</select>
<br>
</td>
</tr>
<tr>
<td>
<b>Details</b>
<br>
</td>
<td>
<select name="select-native-3" id="store_issue_details" data-iconpos="left">
<option data-sel="Master data" value="data ussue">Data Isse</option>
<option data-sel="crash" value="App crash">App crash</option>
<option data-sel="Printer" value="print not coming">Print not coming</option>
<option data-sel="Machine" value="Machine not getting on">Machine not getting on</option>
</select>
<br>
</td>
</tr>
</table>
If I select Yes, insert into query is taking as 11 in database:
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="11">Yes</option>
<option value="22">No</option>
</select>
</td>
Change options value to desired, in your case "Yes" & "No", like this:
(jQuery added only to confirm correct value is being captured)
$("#Offers_in_Hand_Id").change(function() {
var value = $("#Offers_in_Hand_Id").val();
$("#test").html(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td align="center">Offers in Hand :</td>
<td>
<select name="Offers_in_Hand" id="Offers_in_Hand_Id" style="width: 250px" Required>
<option selected></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<span id="test"></span>
I have a score card form with metrics on it. The metrics question is dynamically populated and pulled from a database. I am using Laravel, My code:
$agent_options = array('' => 'Choose One') + DB::table('agents')->lists('name','id');
$metrics = Metric::where('campaign_id','=',1)->orderBy('id', 'asc')->get();
return view('scorecard.create')->with(array('agent_options'=>$agent_options, 'metrics'=>$metrics));
Then in my view
#foreach($metrics as $key => $value)
<tr>
<td class="col-md-2">{{$value->criteria}}</td>
<td class="col-md-4">{!!$value->description!!}</td>
<td class="col-md-4">{!!$value->question!!}</td>
<td class="col-md-2">
<select class="form-control" name="tl_assessment[]">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</td>
<td class="col-md-3">{{$value->potential_points}}</td>
<td class="col-md-3"><input type="text" class="form-control" name="score[]"></td>
</tr>
#endforeach
As you can see I am creating also tl_assessment dropdowns that is for me to record if the metrics has been met by answering Yes, No, N/A. Then you can see the potential_points.
My requirement is if Yes and N/A is selected then value of the score is the same in the potential_points.
I am pretty new to jquery and I could do this if those fields are static. But I am confuse where to start.
Give the td where you have the potential a class called potential. Give the input with the name score[] a class of score.
It should end up looking like the following...
<tr>
<td class="col-md-2">Test</td>
<td class="col-md-4">Test</td>
<td class="col-md-4">Test</td>
<td class="col-md-2">
<select class="form-control ts_assessment" data-key="test" name="tl_assessment[]">
<option value="">Choose One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</td>
<td class="col-md-3 potential">35</td>
<td class="col-md-3"><input type="text" class="form-control score" name="score[]"></td>
</tr>
Then you should just need to add the following script.
<script>
$(document).ready(function() {
$('.ts_assessment').change(function() {
var val = $(this).val();
var parent = $(this).parents('tr');
if (val == 'Yes' || val == 'N/A') {
var potential = parent.find('.potential').text();
parent.find('.score').val(potential);
} else {
parent.find('.score').val('');
}
});
});
</script>
Situation I have a form where the user selects from a few options in a select box.
When the user select the option 'other' i want to select box to transform into an input box.
This is my code.
Head
<script>
function chargeother(select) {
if (select=="other") {
document.getElementById('chargeother').innerHTML= '<input type="text" name="type">';
}
}
</script>
Body
First Select Box
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this.value)">
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
Second Select Box
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this.value)">
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
I need this function twice on my page is it possible to add an 'id' into the onchange function call
You needed to specify a <table> and <tr> tag for <td> in the HTML, and use innerHTML on the element and make sure you comment out the double quotes for the attribute values
//CODE
<!DOCTYPE html>
<html>
<head>
<script>
function chargeother(ele){
switch(ele.parentNode.id){
case "inputtype":
if(ele.value === "other"){
document.getElementById("inputtype").innerHTML = "<input type=\"text\" name=\"type\">";
}
break;
case "inputhazard":
if(ele.value === "other"){
document.getElementById("inputhazard").innerHTML = "<input type=\"text\" name=\"type\">";
}
break;
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this)">
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this)">
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Try this example without target id:
var chargeother = function(el) { // note, its html element
if ('other' !== el.value) return;
el.parentNode.innerHTML = "<input type='text' name='" + el.name + "'/>";
};
<table>
<tr>
<td id="inputtype">
<select type="text" name="type" onchange="chargeother(this)"><!-- not just value -->
<option value="Labour and Material">Labour and Material</option>
<option value="Quoted">Quoted</option>
<option value="Labour Only">Labour Only</option>
<option value="Material Only">Material Only</option>
<option value="other">Other</option>
</select>
</td>
<td id="inputhazard">
<select type="text" name="hazard" onchange="chargeother(this)"><!-- not just value -->
<option value="No Significant Hazard">No Significant Hazard</option>
<option value="GC43 Attached">GC43 Attached</option>
<option value="other">Other</option>
</select>
</td>
</tr>
</table>
You can achieve it like this:
function chargeother ( select ) {
if (select == "other")
{
var elem = document.getElementById(" selectId ");
elem.parentElement.removeChild (elem);
var inputElem= document.createElement ('input');
inputElem. type='text';
document.getElementById (" chargeother").appendChild(inputElem);
}
}