I'm locked, i try to filter a html table when i change the dropdown value.
I want to refresh the table after select the value.
I work on a prestashop module, he use Smarty for the templating.
Example :
<tr>
<select name="valueType" id="select">
<option value="all" selected="selected" disabled>Select type of document</option>
<option value="0">Invoice 1</option>
<option value="1">Invoice 2</option>
<option value="3">Invoice 3</option>
</select>
<a type="button" class="btn" href="{$link->getModuleLink('invoice', 'myinvoices', array(), true)|escape:'html':'UTF-8'}">Voir tout</a>
</tr>
<tbody>
{if isset($invoices) && $invoices}
{foreach from=$invoices item=invoice}
<tr>
<td><a class="dl" href="{$invoice.link}" title="{l s='Download the invoice number' mod='aechistoryinvoice'} {$invoice.invoice_number}"><i class="icon-file-pdf-o left"></i> {l s='Download' mod='aechistoryinvoice'}</a></td>
<td class="align-center">{$invoice.invoice_number}</td>
<td class="align-center">{$invoice.invoice_date}</td>
<td class="align-right"><strong>{$invoice.total_amount_tax_excl}</strong></td>
<td class="align-right">{$invoice.total_amount_tax_incl}</td>
<td class="align-right">{$invoice.type_document}</td>
</tr>
{/foreach}
{else}
<tr>
<td colspan="5">{l s='No data yet' mod='invoice'}</td>
</tr>
{/if}
</tbody>
I've retrieve on the browser console the value when i select what i want. For this i've use :
<script type="text/javascript">
document.getElementById("select").addEventListener("change", function(e) {
console.log(e.target.value);
})
</script>
I don't know, how can i do the filter..
Thanx
Related
displaying an alert message when selecting an option jQuery
if any of the ports has selected(rate == "MAC"), an alert message should be displayed when selecting MAX in other ports
if any of the ports has selected(rate == "MAX") an alert message should be displayed when selecting MAC in other ports
If MAC is selected then you cannot select MAX in any of the other select boxes and vice versa. An alert message should be displayed
<table>
<thead>
<tr>
<th>Port</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td class="port">1</td>
<td>
<select class= rate>
<option value=""></option>
<option value="1">MAC</option>
<option value="2">MAX</option>
<option value="3">MIN</option>
</select>
</td>
</tr>
<tr>
<td class="port">2</td>
<td>
<select class= rate>
<option value=""></option>
<option value="1">MAC</option>
<option value="2">MAX</option>
<option value="3">MIN</option>
</select>
</td>
</tr>
<tr>
<td class="port">3</td>
<td>
<select class= rate>
<option value=""></option>
<option value="1">MAC</option>
<option value="2">MAX</option>
<option value="3">MIN</option>
</select>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$("select.rate").change(function() {
var rate = $(this).find("option:selected").text();
var this_ = $(this)
$("select.rate").not(this).each(function() {
var values = $(this).find("option:selected").text();
if (rate == 'MAC' && values == 'MAX') {
alert("Since you have selected MAC, you can't select MAX");
this_.val("")
return false;
}
})
});
});
You can .each loop to iterate through all select-boxes and check if the text of option is same or not depending on this show your message and reset that select-box.
Demo Code :
$(document).ready(function() {
$("select.rate").change(function() {
var rate = $(this).find("option:selected").text(); //get option text
var this_ = $(this)
//loop through other slects but not the one where change has occur
$("select.rate").not(this).each(function() {
var values = $(this).find("option:selected").text();
//compare...
if (rate == 'MAC' && values == 'MAX') {
alert("Since you have selected MAX, you can't select MAC");
this_.val("") //reset
return false; //break through loop
}
if (rate == 'MAX' && values == 'MAC') {
alert("Since you have selected MAC, you can't select MAX")
this_.val("")
return false;
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Port</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td class="port">1</td>
<td>
<select class="rate">
<option value=""></option>
<option value="1">MAC</option>
<option value="2">MAX</option>
<option value="3">MIN</option>
</select>
</td>
</tr>
<tr>
<td class="port">2</td>
<td>
<select class="rate">
<option value=""></option>
<option value="1">MAC</option>
<option value="2">MAX</option>
<option value="3">MIN</option>
</select>
</td>
</tr>
<tr>
<td class="port">3</td>
<td>
<select class="rate">
<option value=""></option>
<option value="1">MAC</option>
<option value="2">MAX</option>
<option value="3">MIN</option>
</select>
</td>
</tr>
</tbody>
</table>
I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.
Example:
Any advice how to hide the other options which are not used
if TV show only value device, tsignal, blackscreen, other
If Radio show only the value: device, rsignal, other
$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?
$('#test').change(function() {
const options = $('#new').find('option').show();
if ($(this).val() === 'tv') {
options.not('[value="device"]').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
Notice Hide option is not cross browser
For now I can get the selected values from the event onchange in my dropdown inside my table but it only works on the first row of my table. If I am going to change values from other rows it will still getting the value from the first row.
Here is my code:
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue()" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
}
</tbody>
</table>
And simple script to read the selected values:
function getSelValue() {
alert(document.getElementById("drpTechnical").value)
}
document.getElementById returns allways only the first element with this ID since IDs should be unique.
What you want is to get the id from that element that has been changed. So you need this
function getSelValue(this) {
alert(this.value)
}
And your table should look like this
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
i think you made a small mistake there, the id you set to the select tag is called "drpTechnical" but in the function you try to call element with id of "getSelValue"
Try change the codes like below
Code updates :
<td ALIGN="center">
<select onchange="getSelValue(this)" class="testerDrop"
style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
<script>
function getSelValue(obj) {
alert(obj.value)
}
</script>
function getSelValue(e) {
alert(e.value)
}
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
</tbody>
</table>
Try this.
Here's my code, my question will follow.
<tr>
<td><h5>Race:</h5></td>
<td class="top" colspan="2"><select name="race">
<option value="empty_r">*Choose</option>
<option value="Humans">Humans</option>
<option value="Orcs">Orcs</option>
</select><?php if (!empty($errors[7])) echo "$errors[7]"; ?>
</td>
</tr>
<tr>
<td><h5>Faction:</h5></td>
<td class="top" colspan="2"><select name="faction">
<option value="empty_f">*Choose</option>
<option value="Human_Faction1">Human Faction 1</option>
<option value="Orc_Faction1">Orc Faction 1</option>
</select><?php if (!empty($errors[8])) echo "$errors[8]"; ?>
</td>
</tr>
I want to make it so that when I choose humans as my race, only the human faction 1 will display in the faction select field. And if i choose Orcs as my race, only the orc faction 1 will display as an option. I tried to do this using just PHP but with no luck. I won't learn any javascript until this coming semester!
<script>
function human_faction()
{
document.getElementById("show").innerHTML=" <option value='empty_f'>*Choose</option> <option value='Human_Faction1'>Human Faction 1</option>";
}
function orcs_faction()
{
document.getElementById("show").innerHTML=" <option value='empty_f'>*Choose</option> <option value='Orc_Faction1'>Orc Faction 1</option>";
}
</script>
<tr>
<td><h5>Race:</h5></td>
<td class="top" colspan="2"><select name="race">
<option value="empty_r">*Choose</option>
<option value="Humans" onclick="human_faction()">Humans</option>
<option value="Orcs" onclick="orcs_faction()">Orcs</option>
</select>
</td>
</tr>
<tr>
<td><h5>Faction:</h5></td>
<td class="top" colspan="2"><select id="show" name="faction">
<option value="empty_f">*Choose</option>
</select>
</td>
</tr>
I have created this JSP page in which all the drop down menus are populated from database. This functionality works fine I've tested it. But now I need to add a function so the third drop down menu (which is Forecast ISC) only becomes visible when I select a certain field from first menu which is "Type" .So far I haven't created any java script because that's what i need help with! Any suggestions or comment will help!
<form:form action="/analysis/analysisSummary" modelAttribute="shipData"
method="POST" onChange = 'checkType()'>
<br>
<table width="100%">
<tr>
<td width="20%"></td>
<td width="20%">Type:<form:select id="type" path="type">
<form:option value="All">------ All ------ </form:option>
<form:options items="${analysisEvents}" itemLabel="description"
itemValue="code" />
</form:select>
</td>
<td width="20%">Forecast ISC:<form:select id="iscCode"
path="iscCode">
<form:option value="All">ALL</form:option>
<form:options items="${iscCodes}" />
</form:select>
</td>
<td width="30%"><div style="visibility: hidden">
Actual ISC: <form:select id="sctry"
path="iscCode">
<form:option value="All">ALL</form:option>
<form:options items="${iscCodes}" />
</form:select>
</div>
</td>
HTML:
<form id="shipData" onChange="checkType()" action="/analysis/analysisSummary" method="POST">
<br>
<table width="100%">
<tr>
<td width="20%"></td>
<td width="20%">Type:<select id="type" name="type">
<option value="All">------ All ------</option>
<option value="U">Unanalyzed</option><option value="H">Pending</option><option value="F">True Hit</option><option value="C">Return Reason</option><option value="S">Parcel Returned</option><option value="T">Long Term Pending</option><option value="Z">Value >2500</option>
</select>
</td>
<td width="20%">Forecast ISC:<select id="iscCode" name="iscCode">
<option value="All">ALL</option>
<option value="JFK">JFK</option><option value="LAX">LAX</option><option value="MIA">MIA</option><option value="ORD">ORD</option><option value="SFO">SFO</option>
</select>
</td>
<td width="30%"><div style="visibility: hidden">
Actual ISC: <select id="sctry" name="iscCode">
<option value="All">ALL</option>
<option value="JFK">JFK</option><option value="LAX">LAX</option><option value="MIA">MIA</option><option value="ORD">ORD</option><option value="SFO">SFO</option>
</select>
</div>
</td>
<td width="8%"></td>
</tr>
</table>
<br>
<table width="100%">
<tr>
<td width="20%"></td>
$(document).ready(function () {
$('#shipData').find('#type').change(function () {
if ($(this).val() == 'T') {
$('#shipData').find('#divIscCode').show(); //To show only drop down
//$('#shipData').find('#sctry').val('All'); //To initial value if required.
} else {
$('#shipData').find('#divIscCode').hide();
}
}).trigger('change');
});
For DEMO