I have a table where I generate reports. I need to write javascript validation for this one report. Unfortunately, my javascript is very weak. I have the server side validation in place, but I also need to have javascript validation. My page is as follows...
<tr>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1' onSubmit="ValidateForm(this.form);">
<td nowrap="nowrap">
Medicaid Residents
</td>
<td style="width: 5%;">
<table style="width: 5%;">
<tr>
<td style="width: 5%;"><br><br>
<input type="radio" name="choice" value='1' onClick="check_radio()";>All<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='3' onClick="check_radio()";>Communities
</td>
<td style="width: 5%;">
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.State_Code#">#Medicaid_States.State_Code#</option>
</cfloop>
</select>
</td>
<td style="width: 10%;">
<select name="houseprompt1" multiple="multiple" size="10" id="T2">
<cfloop query="Medicaid_Houses">
<option value="#Medicaid_Houses.iHouse_ID#">#Medicaid_Houses.Community# </option>
</cfloop>
</select>
</td>
</tr>
</table>
</td>
<td>
<table style="width: 5%;">
<tr>
<td>
From
</td>
</tr>
<tr>
<td>
<input type="text" id="txtFromDate" name="dateprompt1">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
To
</td>
</tr>
<tr>
<td>
<input type="text" id="txtToDate" name="dateprompt2">
</td>
</tr>
</table>
</td>
<td>
<input type="Submit" name="Go" value="GO" style="font-size: 12; color: navy; height: 20px; width: 60px;">
</td>
</form>
</tr>
The javascript I wrote is...
<script LANGUAGE="JavaScript">
function ValidateForm(form){
if ( ( form.choice[0].checked == false ) && ( form.choice[1].checked == false ) && ( form.choice[2].checked == false ) )
{
alert ( "Please first select a radiobutton" );
return false;
}
elseif ( ( form.choice[1].checked == True ) && ( document.getElementById("T1").value==""))
{
alert ( "Please select a State" );
return false;
}
elseif ( ( form.choice[2].checked == True ) && ( document.getElementById("T2").value==""))
{
alert ( "Please select a House" );
return false;
}
elseif ( ( document.dateprompt1.value =="") && ( document.dateprompt2.value==""))
{
alert ( "please select 'From' and 'To' dates" );
return false;
}
}
</script>
...but it doesn't work. I know the javascript is poorly writen. I would appreciate any help in getting it to work!
Rather than have a series of else statements just have the if statements because they will stop it with the return false, and the green/passed path/action is at the bottom.
function ValidateForm(){
var a = document.forms["MedicaidResidents"]["choice"].value;
var b = document.forms["MedicaidResidents"]["stateprompt1"].value;
var c = document.forms["MedicaidResidents"]["houseprompt1"].value;
var d = document.forms["MedicaidResidents"]["dateprompt1"].value;
var e = document.forms["MedicaidResidents"]["dateprompt2"].value;
if (a == null || a == "") {
alert("Please first select a radiobutton");
return false;
}
if (b == null || b == "") {
alert("Please select a State");
return false;
}
if (c == null || c == "") {
alert("Please select a House");
return false;
}
if (d == null || d == "" && e == null || e == "") {
alert("please select 'From' and 'To' dates");
return false;
}
return true;
}
<tr>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1' onSubmit="return ValidateForm();">
<td nowrap="nowrap">
Medicaid Residents
</td>
<td style="width: 5%;">
<table style="width: 5%;">
<tr>
<td style="width: 5%;"><br><br>
<input type="radio" name="choice" value='1' onClick="check_radio()">All<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()">States<br><br>
<input type="radio" name="choice" value='3' onClick="check_radio()">Communities
</td>
<td style="width: 5%;">
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.State_Code#">#Medicaid_States.State_Code#</option>
</cfloop>
</select>
</td>
<td style="width: 10%;">
<select name="houseprompt1" multiple="multiple" size="10" id="T2">
<cfloop query="Medicaid_Houses">
<option value="#Medicaid_Houses.iHouse_ID#">#Medicaid_Houses.Community# </option>
</cfloop>
</select>
</td>
</tr>
</table>
</td>
<td>
<table style="width: 5%;">
<tr>
<td>
From
</td>
</tr>
<tr>
<td>
<input type="text" id="txtFromDate" name="dateprompt1">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
To
</td>
</tr>
<tr>
<td>
<input type="text" id="txtToDate" name="dateprompt2">
</td>
</tr>
</table>
</td>
<td>
<input type="Submit" name="Go" value="GO" style="font-size: 12; color: navy; height: 20px; width: 60px;">
</td>
</form>
</tr>
https://jsbin.com/kawewerisu/1/edit?html,js,output
Related
I have a form and i am validating it by checking if there is no empty field left by putting an alert and returning false so that it remains on the same page and doesn't go to the next page. Although i am getting the alert but still it proceeds to next page.
function fnOnSubmit() {
$('#dataTable input,select').each(function() {
var id = $(this).attr('id');
var val = $(this).val();
if (val == '' || val == 'undefined') {
alert('Please fill all the fields');
return false;
}
});
var flag = '';
$('#dataTable input:not([type=button]),#dataTable select').each(function () {
flag = flag + (this.value) + '~';
quicklink = flag;
});
document.frmmain.quicklink.value = quicklink;
SendTxnRequest('02','QWC');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)">
<option value="">Select</option>
<xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
<xsl:sort order="ascending" select="description" />
<option value="#{description}">
<xsl:value-of select="description" />
</option>
</xsl:for-each>
</select>
</div>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="45" value="" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>
I'm trying to calculate two numbers and display them but when I click Calculate Total nothing happens and no numbers are displayed. I've been looking for a solution for hours now and just can't figure out why nothing happens when I click the button. If someone could help me out a little bit I'd be very grateful!
function calcTotal() {
var intValue1 = parseInt(document.GetElementById('Value1').value);
var intValue2 = parseInt(document.GetElementById('Value2').value);
var strOper = document.GetElementById('operators').value;
if (strOper === '+') {
document.GetElementById('Total').value = intValue1 + intValue2;
else if (strOper === '-') {
document.GetElementById('Total').value = intValue1 - intValue2;
} else if (strOper === '*') {
document.GetElementById('Total').value = intValue1 * intValue2;
} else {
document.GetElementById('Total').value = intValue1 / intValue2;
}
}
document.getElementById('submit').onclick = calcTotal();
<table class="table1">
<tr>
<td class="label">
<label id="lblValue1" for="txtValue1">Value 1:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value1" name="txtValue1" required>
</td>
</tr>
<tr>
<td>
<select name="dropdown" id="operators">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label id="lblValue2" for="txtValue2">Value 2:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value2" name="txtValue2" required>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="label">
<label id="lblTotal" for="txtTotal">Total:</label>
</td>
<td class="control">
<input class="textview" type="text" id="Total" name="txtTotal">
</td>
</tr>
</table>
<table>
<tr>
<td class="label">
<input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" onclick="calcTotal();">
</td>
</tr>
</table>
Thanks in advance!!!!
Your logic behind this code is actually working just fine. You just had a few syntax errors.
There was no closing brackets (}) for the if statement.
Also, you had .GetElementById(). You should've had .getElementById() (the g is supposed to be lowercase).
Also, you don't need to have a .onclick event in the javascript, if you already have on in the html. I removed that for you.
It's fixed in the snippet for you.
function calcTotal() {
var intValue1 = parseInt(document.getElementById('Value1').value);
var intValue2 = parseInt(document.getElementById('Value2').value);
var strOper = document.getElementById('operators').value;
if (strOper === '+') {
document.getElementById('Total').value = intValue1 + intValue2;
} else if (strOper === '-') {
document.getElementById('Total').value = intValue1 - intValue2;
} else if (strOper === '*') {
document.getElementById('Total').value = intValue1 * intValue2;
} else {
document.getElementById('Total').value = intValue1 / intValue2;
}
}
<table class="table1">
<tr>
<td class="label">
<label id="lblValue1" for="txtValue1">Value 1:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value1" name="txtValue1" required>
</td>
</tr>
<tr>
<td>
<select name="dropdown" id="operators">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label id="lblValue2" for="txtValue2">Value 2:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value2" name="txtValue2" required>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="label">
<label id="lblTotal" for="txtTotal">Total:</label>
</td>
<td class="control">
<input class="textview" type="text" id="Total" name="txtTotal">
</td>
</tr>
</table>
<table>
<tr>
<td class="label">
<input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" onclick="calcTotal();">
</td>
</tr>
</table>
There are some error in your code:
Missing {} for if block
Uppercase GetElementById method, note that all function with uppercase are difference, also with css and Id and class.
Redundant //document.getElementById('submit').onclick = calcTotal();
If you want keep last line you can edit to
document.getElementById('submit').addEventListener("click", calcTotal);
and remove onclick="calcTotal();" on button
function calcTotal() {
var intValue1 = parseInt(document.getElementById('Value1').value);
var intValue2 = parseInt(document.getElementById('Value2').value);
var strOper = document.getElementById('operators').value;
if (strOper === '+') {
document.getElementById('Total').value = intValue1 + intValue2;
}
else if (strOper === '-') {
document.getElementById('Total').value = intValue1 - intValue2;
} else if (strOper === '*') {
document.getElementById('Total').value = intValue1 * intValue2;
} else {
document.getElementById('Total').value = intValue1 / intValue2;
}
}
document.getElementById('submit').addEventListener("click", calcTotal);
<table class="table1">
<tr>
<td class="label">
<label id="lblValue1" for="txtValue1">Value 1:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value1" name="txtValue1" required>
</td>
</tr>
<tr>
<td>
<select name="dropdown" id="operators">
<option value="+" selected>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td class="label">
<label id="lblValue2" for="txtValue2">Value 2:</label>
</td>
<td class="control">
<input class="formFields" type="text" id="Value2" name="txtValue2" required>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="label">
<label id="lblTotal" for="txtTotal">Total:</label>
</td>
<td class="control">
<input class="textview" type="text" id="Total" name="txtTotal">
</td>
</tr>
</table>
<table>
<tr>
<td class="label">
<input id="submit" class="button" name='cmdCalcTotal' type="button" value="Calculate Total" >
</td>
</tr>
</table>
NOTHING IS WORKING! I added onSubmit = "validate()" to my register button in the form, and I made the function and the alert if the fields are left empty. But NOTHING IS WORKING!
No alerts no errors in console. No hope!
<head>
<title>WHAT THE TECH!</title>
<script type="text/javascript">
function validate() {
let fullname = document.getElemenyByname("full_name").value;
let email = document.getElemenyById("email").value;
let pass = document.getElemenyById("password").value;
let add = document.getElemenyById("address").value;
if (fullname == "" || fullname.length == 0) {
alert("Enter Full Name");
document.getElemenyById("full_name").focus;
return false;
} else if (email == "" || email.length == 0) {
alert("Enter Email Address!");
document.getElemenyById("email").focus;
return false;
}
}
</script>
</head>
<body>
<div class="mainwrap">
<div class="content">
<div class="SignUp">
<div class="Formup">
<div class="title">New here? Register!</div>
<form name="register">
<table>
<tr>
<td>Full Name: </td>
<td><input type="text" id="full_name">
</td>
</tr>
<tr>
<td>Email: </td>
<td><input type="text" id="email">
</td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" id="password">
</td>
</tr>
<tr>
<td>Country: </td>
<td>
<select>
<option value="U.A.E">U.A.E</option>
<option value="K.S.A">K.S.A</option>
<option value="Qatar">Qatar</option>
</select>
</td>
</tr>
<tr>
<td>Gender: </td>
<td>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</td>
</tr>
<tr>
<td>Address: </td>
<td><input type="text" id="address">
</td>
</tr>
<tr>
<td>
<input type="submit" value="Register" class="registerbutton" name="register" onSubmit="validate()">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
You should use document.getElementsByName if you want to fetch the value using name attribute. I would recommend to do it by "id" attribute.
function submitFunction() {
var firstName = document.getElementsByName("first_Name")[0].value;
if (firstName == "" || firstName == null || firstName.length == 0) {
alert("First Name is required");
return false;
}
}
Also add return to the onsubmit event to avoid page refresh.
<form name="Register" onsubmit="return submitFunction() " method="post">
Option 2 : Using HTML5
The required attribute will do the validation check and you can skip javascript.
<input type="text" name="first_Name" required>
I have designed a table below using HTML. I have validated for only one row, but for the 2nd row it was not validated. Below UI have given submit that validates entire table.
Condition is that at least one checkbox should be selected from each row.
Using pure js: https://jsfiddle.net/v8mghww9/1/
function validate(form)
{
var rows = document.getElementsByTagName('tr');
var isTableValid = true;
for(var i=0;i<rows.length;i++) {
var checkboxs=rows[i].getElementsByTagName("input");
var okay=false;
for(var j=0;j<checkboxs.length;j++)
{
console.log('here' + checkboxs[j].checked);
if(checkboxs[j].checked)
{
okay=true;
break;
}
}
if(!okay && checkboxs.length > 0) {
isTableValid = false;
break;
}
}
if(isTableValid)
return true;
else
{
alert("Please select atleast one item for male patients");
return false;
}
}
Your code was fine but you weren't writing the jsfiddle the right way, this is a live snippet showing that your code works fine:
function validate(form) {
var checkboxs = document.getElementsByName("m1");
var okay = false;
for (var i = 0, l = checkboxs.length; i < l; i++) {
if (checkboxs[i].checked) {
okay = true;
break;
}
}
if (okay) return true;
else {
alert("Please select atleast one item for male patients");
return false;
}
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 0.5em;
line-height: 1.5em;
}
#color {
background-color: lightblue;
}
.adjust {
text-align: left;
}
input[type="checkbox"] {
margin-left: 47%;
}
<table border="1" width="100%">
<tr>
<th rowspan="3">OAB Patient Types</th>
<th colspan="6" id="color">Therapy of First Choice</th>
</tr>
<tr>
<th colspan="4" id="color">Muscarinic Antagonists</th>
<th style="background-color:lightblue">Beta-3 Adrenergic Agonist</th>
<th style="background-color:lightblue">Other Therapies</th>
</tr>
<tr>
<th>Detrol LA
<br>(tolterodine)</th>
<th>Enablex
<br>(darifencian)</th>
<th>Toviaz
<br>(festoridine)</th>
<th>VESIcare
<br>(solifencian)</th>
<th>Myrbetriq
<br>(merabergan)</th>
<th>Other</th>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">General Patient Types</th>
</tr>
<tr>
<td>Male Patients</td>//
<form name=form1>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>
<td>
<input type="checkbox" name=m1>
</td>//</form>
</tr>
<tr>
<td>Female Patients</td>
<form name=form2>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<td>
<input type="checkbox" name=f1>
</td>
<!-- <td><input type="submit" value="submit"></td> -->
</form>
</tr>
<tr>
<th colspan="7" id="color" class="adjust">Line of Therapy</th>
</tr>
<tr>
<td>First-line (newly daignosed OAB patients on their first course of therapy)</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Second-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
<tr>
<td>Third-line</td>
<form>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</form>
</tr>
</table>
<br>
<br>
<center>
<input type="button" value="Submit" onclick='return validate()'>
</center>
Note:
The button Submit should be of type button and not submit.
First thing because it's not inside any form to be submitted
Second thing is that you have many forms in your page (which is strange here), so you may have a conflict in submitting which form of them wityh this submit button?
give the same name on all the checkboxes of each row and then give it a class to all which you want to validate.
function validate() {
var flag = true;
var array = [];
$(".js-validate-required-radio").each(function () {
array.push($(this).prop('name'));
});
var uniqueNames = $.unique(array);
for (var i = 0; i < uniqueNames.length; i++) {
if ($('input:checkbox[name=' + uniqueNames[i] + ']:checked').val() == undefined) {
if (flag) {
flag = false;
}
}
}
if(!flag){
alert('select atleast one radio on each row');
}
else{
alert('yeee');
}
return flag;
}
here is fiddle
I have this form in which, when the order type selected is a market order the stop price and limit price should have value zero and should be readonly.
when i select limit order it should make stop price 0 and read only.
when i select stop order it should make limit price 0 and read only.
i m trying to use simple if-else in js. What am i doing wrong?
please try to avoid jquery. School project please. Thanks in advance...
I have my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ETcss.css" />
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="header">
<h1 style="font-family: Cambria; color: #F0F0F0;" align="center">Welcome User</h1>
<br>
</div>
<div class="sidemenu">
<ul>
<li>
Home
</li>
<li>
Create Order
</li>
</ul>
</div>
<div class="mainmenu">
<h1>Create Equity Order</h1>
<form action="">
<table>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Symbol :</td>
<td>
<input type="text" name="symbol" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Secutrity name :</td>
<td>
<input type="text" name="securityName" value="sapient" placeholder="sapient" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Side :</td>
<td>
<select>
<option>buy</option>
<option>sell</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Order Type :</td>
<td>
<select id="orderType">
<option value="market" selected>market</option>
<option value="limit">limit</option>
<option value="stop">stop</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Order Qualifiers :</td>
<td>
<select>
<option>day order</option>
<option>gtc</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Trader :</td>
<td>
<select>
<option>trader1</option>
<option>trader2</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Account Type :</td>
<td>
<select>
<option>cash</option>
<option>margin</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Portfolio :</td>
<td>
<select>
<option>p1</option>
<option>p2</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Stop Price :</td>
<td>
<input type="text" id="stopprice" name="stopprice" readonly="readonly" onfocus="this.blur()" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Limit Price :</td>
<td>
<input type="text" id="limitprice" name="limitprice" readonly="readonly" onfocus="this.blur()" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Qty :</td>
<td>
<input type="text" name="qty" />
</td>
</tr>
<tr>
<a href="pmHome.html">
<td colspan="2" align="center">
<input type="submit" onclick="display_alert()" value="Create Equity Order" />
</a>
</td>
</tr>
</table>
</form>
</div>
</body>
<script>
function updatePrice(el, priceLog, priceLog1, priceList) {
var e = document.getElementById("orderType");
var pricevalue = e.options[e.selectedIndex].text;
if (pricevalue.toLowerCase() == "market") {
priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
.toLowerCase()];
priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
.toLowerCase()];
}
alert(pricevalue);
else if (pricevalue.toLowerCase() == "limit") {
document.getElementByName('limitprice').readOnly = false;
priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
.toLowerCase()];
priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
.toLowerCase()];
} else if (pricevalue.toLowerCase() == "stop") {
document.getElementByName('stopprice').readOnly = false;
priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
.toLowerCase()];
priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
.toLowerCase()];
}
}
var stopPrices = {
'market' : 0,
'limit' : 1,
'stop' : 2,
};
var limitPrices = {
'market' : 0,
'limit' : 1,
'stop' : 2,
};
var select = document.getElementById('orderType'), hidden = document
.getElementsByName('stopprice')[0];
hidden1 = document.getElementsByName('limitprice')[0];
select.addEventListener('change', function() {
updatePrice(select, hidden, hidden1, stopPrices);
});
</script>
</html>
Problems
Between if and else you have put an alert() - SYNTAX ERROR
el, e, and select are all same and have the value - document.getElementById('orderType').
onfocus="this.blur()" !!!, I am stopping here.
Hope this code will fix your issues -
<html>
<head>
<link rel="stylesheet" type="text/css" href="ETcss.css" />
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="header">
<h1 style="font-family: Cambria; color: #F0F0F0;" align="center">Welcome User</h1>
<br>
</div>
<div class="sidemenu">
<ul>
<li>
Home
</li>
<li>
Create Order
</li>
</ul>
</div>
<div class="mainmenu">
<h1>Create Equity Order</h1>
<form action="">
<table>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Symbol :</td>
<td>
<input type="text" name="symbol" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Secutrity name :</td>
<td>
<input type="text" name="securityName" value="sapient" placeholder="sapient" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Side :</td>
<td>
<select>
<option>buy</option>
<option>sell</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Order Type :</td>
<td>
<select id="orderType">
<option value="market" selected>market</option>
<option value="limit">limit</option>
<option value="stop">stop</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Order Qualifiers :</td>
<td>
<select>
<option>day order</option>
<option>gtc</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Trader :</td>
<td>
<select>
<option>trader1</option>
<option>trader2</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Account Type :</td>
<td>
<select>
<option>cash</option>
<option>margin</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Portfolio :</td>
<td>
<select>
<option>p1</option>
<option>p2</option>
</select>
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Stop Price :</td>
<td>
<input type="text" id="stopprice" name="stopprice" readonly="readonly" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Limit Price :</td>
<td>
<input type="text" id="limitprice" name="limitprice" readonly="readonly" />
</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Qty :</td>
<td>
<input type="text" name="qty" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" onclick="display_alert()" value="Create Equity Order" />
</td>
</tr>
</table>
</form>
</div>
</body>
<script>
var select = document.getElementById('orderType');
var priceLog = document.getElementsByName('stopprice')[0];
var priceLog1 = document.getElementsByName('limitprice')[0];
var stopPrices = {
'market' : 0,
'limit' : 1,
'stop' : 2,
};
var limitPrices = {
'market' : 0,
'limit' : 1,
'stop' : 2,
};
select.addEventListener('change', updatePrice);
function updatePrice() {
var select = document.getElementById("orderType");
var selectedIndex = select.selectedIndex;
var pricevalue = select.options[selectedIndex].text.toLowerCase();
var selectedValue = select.options[selectedIndex].value.toLowerCase();
if (pricevalue == "market") {
priceLog.disabled = "disabled";
priceLog1.disabled = "disabled";
priceLog.value = 0;
priceLog1.value = 0;
} else if (pricevalue == "limit") {
priceLog1.disabled = "disabled";
priceLog.removeAttribute("disabled");
priceLog1.value = 0;
} else if (pricevalue == "stop") {
priceLog.disabled = "disabled";
priceLog1.removeAttribute("disabled");
priceLog.value = 0;
}
}
</script>
</html>
Correctly said by Moazzam Khan, there is a syntax alert as well as no of parameter :
select.addEventListener('change', function(){
updatePrice(document.getElementById('orderType'), document.getElementsByName('stopprice')[0], document.getElementsByName('limitprice')[0], stopPrices);
},false);
Use the following script code:
<script>
function updatePrice (el, priceLog, priceLog1, priceList) {
try{
var e = document.getElementById("orderType");
var pricevalue = e.options[e.selectedIndex].text;
if(pricevalue.toLowerCase() == "market"){
priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}
else if(pricevalue.toLowerCase() == "limit"){
document.getElementByName('limitprice').readOnly = false;
priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
priceLog1.value =priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}
else if(pricevalue.toLowerCase() == "stop"){
document.getElementByName('stopprice').readOnly = false;
priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}
}
catch(err)
{
}
}
var stopPrices = {
'market' : 0,
'limit' : 1,
'stop' : 2,
};
var limitPrices={
'market' : 0,
'limit' : 1,
'stop' : 2,
};
var select = document.getElementById('orderType'),
hidden = document.getElementsByName('stopprice')[0];
hidden1= document.getElementsByName('limitprice')[0];
select.addEventListener('change', function(){
updatePrice(document.getElementById('orderType'), document.getElementsByName('stopprice')[0], document.getElementsByName('limitprice')[0], stopPrices);
},false);
</script>