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
Related
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
I'm usig div and id of css to check and uncheck in checkbox, but my source cannot as expected
step 1: as default checkbox is uncheck and listbox is disable
step 2: when i check checkbox, listbox is enable
step 3: back step 1, if i uncheck checkbox, listbox is disable
my souce:
$('#parnerCheck2').click(function() {
$('#partnerName').prop("checked", false).prop("disabled", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="parnerCheck2" name="parnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName">
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>
How to fix the problem as my description? thank a lot
You where almost there. You can set disabled property on the list box with the checked value of the checkbox, prefixed with the not operator ! to reverse the value, to get the result you want.
$('#parnerCheck2').click(function() {
$('#partnerName').prop("disabled", !$(this).prop("checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="parnerCheck2" name="parnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName" disabled>
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>
This would also work.
<body>
<script>
$(document).ready(function() {
//set initial state.
$('#partnerName').prop('disabled', true);
$('#partnerCheck').click(function() {
if ($('#partnerCheck').is(':checked')) {
$('#partnerName').prop('disabled', false);
}
});
});
</script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="partnerCheck" name="partnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName">
<option value="" selected >Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>
</body>
So far i have a dropdown which each has a corresponding number which works just fine. Each number also has a corresponding trait also which will be placed in the 4th column. So what i'm trying to ask is can the dropdown have two values attached to it (a number and a trait) or should I break it up into two parts (1: dropwdown displays a number & 2: number displays a trait)? and how to do that please and thanks you.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option value="1">0-4</option> //trait1
<option value="2">5-6</option> //trait2
<option value="3">7-9</option> //trait3
<option value="4">10-11</option> //trait4
<option value="5">12-14</option> //trait5
<option value="6">15-16</option> //trait6
<option value="7">17-18</option> //trait7
<option value="8">19-20</option> //trait8
<option value="9">21-22</option> //trait9
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
You can bind additional values to your DOM elements using data attributes. Here is how you do that.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
$('#warmthTrait').val($(this).data("trait"));
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option data-trait="trait1" value="1">0-4</option> //trait1
<option data-trait="trait2" value="2">5-6</option> //trait2
<option data-trait="trait3" value="3">7-9</option> //trait3
<option data-trait="trait4" value="4">10-11</option> //trait4
<option data-trait="trait5" value="5">12-14</option> //trait5
...
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
Hope it helps.
I have a page that I need to pop up an error message if the user leaves information in a box.
The user is selecting "Yes" from the Sale drop down and selecting a price (for example £10) from the New Product drop down. They are then changing the Sale drop down to "No" but leaving the price (£10) and this information is being submitted to the database.
How can I add code that warns the user that they have left the price (£10) when they have selected "No" in the Sale drop down?
<form name="test" onsubmit="return validateForm()" method="POST">
<table width="716">
<input name="CallType2" type="hidden" id="CallType2" value="Unfulfilled Sales"/></td>
</tr><tr>
<td style="text-align: left;">Mobile Number: </td>
<td colspan="2" style="text-align: left;"><input name="MobileNumber" type="text" id="MobileNumber" maxlength="11" /></td>
</tr>
<tr>
<td style="text-align: left;">Sale:</td>
<td colspan="2" style="text-align: left;"><select name="Sale" id="Sale" onchange="display(this,'Yes','No');" >
<option value=""></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select> </td>
</tr>
<tbody id="Yes" style="display: none;">
<tr>
<td class="title"><div align="left">New Product:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<select name="SaleProduct" id="SaleProduct">
<option value=""></option>
<option value="£10">£10</option>
<option value="£6.50">£6.50</option>
</select> </label>
</div></td>
</tr>
<tr>
</p>
</div></td>
</tr>
<tbody id="No" style="display: none;">
<tr>
<td class="title"><div align="left">Non Sale Reason:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<span style="text-align: left;">
<select name="CancelReason" id="CancelReason">
<option value=""></option>
<option value="Account changes incomplete">Account changes incomplete</option>
<option value="Customer Credit Rating">Customer Credit Rating</option>
<option value="Handset Ineligible Damaged">Handset Ineligible Damaged</option>
<option value="Handset Ineligible (Matrix)">Handset Ineligible (Matrix)</option>
<option value="Migration not yet complete">Migration not yet complete</option>
<option value="No transaction number">No transaction number</option>
<option value="Insurance already on account">Insurance already on account</option>
</select>
</span></label>
</div></td>
</tr>
</tbody>
</tr>
</tr>
<br>
</tr>
</table>
<p>
<input type="hidden" name="MM_insert" value="test">
<p align="center">
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</fieldset>
</body>
https://jsfiddle.net/hpowe25j/
There is already a validateForm() running on submit to check that other boxes (that I have removed from this example) are not left blank
Thank you
I don't think warning a user at that point is the right thing to do. They don't want to sale, why they should be getting a warning about the price. I think you should just remove the value in your validateForm function if Sale=No.
if(document.getElementById("Sale").value == undefined || document.getElementById("Sale").value == 'No')
document.getElementById('SaleProduct').value = "";
Or, if you really want to warn the user, change your 'display' function triggered from the onchange event. add this to the code
if(document.getElementById("Sale").value == 'No' && document.getElementById('SaleProduct').value != '')
alert('You should remove the price!'); // or make some div visible that contains the error message
You can also do this on validateForm.
hi frnds i am working with jsp and javascript. i had an input field name called as billno and the billno value is 1 and after clicking save it will save to database. my problem is after clicking save the billno should increase with +1 automatically and next time it should save with 2.whenever i opens the app it should show the next billno. so plz help me
<div class="reg-form">
<form method="post" name="sales" action="sales">
<table class="main">
<thead>
<tr>
<th>SALES
</th>
</tr>
</thead>
</table>
<table class="in-sec-small">
<tbody>
<tr>
<td class="label">
<label for="patient-type">PATIENT TYPE
</label>
</td>
<td>
<select id="patient_type" class="textfield-form-req-select" type="text" name="patient_type" required>
<option value="member">IP</option>
<option value="non-member">OP</option>
<option value="non-member">WIP</option>
</select>
</td>
<td class="label">
<label for="reg-type">REG TYPE
</label>
</td>
<td>
<select id="reg_type" class="textfield-form-req-select" type="text" name="reg_type" required>
<option value="member">Member</option>
<option value="non-member">Non Member</option>
</select>
</td>
<td class="label">
<label for="bill-no">BILL NO
</label>
</td>
<td>
<input id="bill_no" class="textfield-form-date-req" type="text" name="bill_no" required>
</td>
Include this in your javascript:
$(function() {
var t1=0;
$.ajax({type:'POST',url:'to_some_url.php'}).done(function(data){
t1=data;
t1=data+1;
$('#bill_no').val(t1);
});
});
Now to_some_url.php:
<?php
ini_set( "display_errors", 0);
gc_enable();
//Now Initialise yor db conncetion
$result_query=$mysqli->query("SELECT LAST(billno) FROM table_name");
$row=$result_query->fetch_array();
$biil_no=$row['billno'];
echo $bill_no;
?>
now you can modify your code according to your requirements