Form validation if user leaves drop down populated with text - javascript

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.

Related

How to make the select dropdown be responsive to the input box

Iam trying to make the select dropdown be responsive to the input box
So when there's sth being enter in the input box (can be anything), the select will change to closed, If nothing is being enter in the input box, the select will be open. Any idea what's wrong with the code.Thanks in advance
$('.input').change(function() {
if ($(this).val() === '') {
$('.msg').text('open');}
else {
$('.msg').text('closed');}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>
I would suggest three changes:
Change the event binding to $('.input').on("input",function() { - it will ensure that the dropdown changes with every keypress rather than on blur. So the user will be able to see the changes as they type in.
Change $(".msg") to $(this).parents("tr").find('.msg'). The former selects all elements in DOM that have .msg class, while the latter only affects the .msg elements belonging to the current tr.
Change .text('open') to .val("open") - this sets the value of the select element.
$('.input').on("input",function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
} else {
$(this).parents("tr").find('.msg').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
</table>
Use val() to change the value of the select and use keyup to trigger it if something is being pressed because if you use change it will only trigger if the focus is not already in the input.
$('.input').on('keyup',function() {
if ($(this).val() === '' ) {
$(this).parent().next().children('select').val('open');
}else {
$(this).parent().next().children('select').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>
As I commented on the question, use .val() function and introduce the same name as the value to select the value you want.
Take in mind that the code you provided, if there are many .msg dropdowns, it will change it for all of them.
Here is the snippet code.
$('.input').change(function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
}
else {
$(this).parents("tr").find('.msg').val('closed');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
</table>

Multiple values from a dropdown issue

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.

bringing the integer value from the database and add 1 to that value

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

Keeping a click button underneath a dev element after it is cereated

I have set an add button to add another div element onto the page when it is clicked. I am having a problem get the button to drop underneath the new div element after the div is created. The button stays in place and the new div is add underneath it when it is clicked, and if it is clicked again the button still stays in the same place and adds an additional div. Any help is greatly appreciated.
<fieldset id="college">
<legend id="namefields"><h2>College, University or Professional School</h2></legend>
<table width="834">
<tr>
<td width="439" height="61">
Name of School <input type="text"size="40" maxlength="50" name="college" id="college"/>
</td>
<td width="383">
Location <input type="text" name="location" size="40">
</td>
</tr>
</table>
<table width="834">
<tr>
<td width="272" height="54">
Start Date <input type="date" name="date" size="10"></td>
<td width="273" height="54">
End Date <input type="date" name="date" size="10"></td>
<td width="273" height="54">
Credit Hours <input type="text" name="creditHrs" size="10"></td>
</tr>
</table>
<table width="869">
<tr>
<td width="439" height="61">
Course of Study <input type="text"size="40" maxlength="50" name="college" id="college"/>
</td>
<td width="418">
<label for="degreeType" id="degreeType">Degree Earned (transcripts may be required)</label>
<select style="width: 310px;" id="degreeType" name="degreeType" tabindex="0">
<option value="select one">Select One</option>
<option value="associates">Associates</option>
<option value="bachelors">Bachelors</option>
<option value="certification">Certification</option>
<option value="masters">Masters</option>
<option value="doctorate">Doctorate</option>
<option value="inprogress"> In Progress</option>
<option value="0">Not Applicable</option>
</select>
</td>
</tr>
</table>
</fieldset>
<button id= "addSchool" onclick="addSchool()">Add another school</button>
<script>
var original = document.getElementById('college');
function addSchool()
{
var clone = original.cloneNode(true);
original.parentNode.appendChild(clone);
}
</script>
</fieldset>
</div>
without jQuery you can use insertBefore like this
var original = document.getElementById('college');
var button = document.getElementById('addSchool');
function addSchool(){
var clone = original.cloneNode(true);
original.parentNode.insertBefore(clone,button);
}
http://jsfiddle.net/Zg2cE/

Database populated chained drop down menu

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

Categories