I want to show hide form fields on the basis of Select Value. e.g my form has 5 text fields and 1 select option field In those fields 4 fields are depended on select value. if i select cloth then cloth type and cloth value remains, lether type and lether value hide. but when i select Bags lether type and lether value remain else hide. i am trying some condition and ng-class="{'hideCheck': isHideCheck}" model but it behaving abnormally.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>
use ng-hide to hide the element. ng-class is used to alter css.
I changed your code, it will hide element valus and type when option checking is selected, just an example for you, not implement your feather. you would like to read https://docs.angularjs.org/api/ng/directive/ngHide.
by the way , ng-repeat is a good way to do table things.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>
Related
I dynamically created a textbox on the event of click on a certain button and now I want to retrieve the text from the textbox to display on another php form page.
Following is my html code where I assign the name "c1", "c2" and "c3" to the dynamically created textboxes.
<script>
$(document).ready(function(){
$("#t11, #t12").click(function(){
var div = $("<div />");
div.html(GenerateTextbox("","c1"));
$("#TextBoxContainer").append(div);
var div = $("<div />");
div.html(GenerateTextbox("","c2"));
$("#TextBoxContainer").append(div);
var div = $("<div />");
div.html(GenerateTextbox("","c3"));
$("#TextBoxContainer").append(div);
});
});
function GenerateTextbox(value,name1) {
console.log(name1);
return '<input name = "'+ name1 + '" type="text" value = "' + value + '" /> ';}
</script>
My php code in another document:
<td>
<input type="<?php echo $_POST["t1"];?>"> <?php echo $_POST["c1"];?>
<input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c2"];?>
<input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c3"];?>
</td>
When the second php page is directed to, it say that c1, c2 and c3 are undefined indices. Everything else works fine but I cannot get this information from one page to the other.
Please help!
Full form html:
<table align="center">
<form action="output.php" method="post">
<tr>
<td>
Background color of page:<br/>
</td>
<td>
<input id="ex" type="color" name="bgcol" id="nbg">
</td>
</tr>
<tr>
<td>
Name of form:
</td>
<td>
<input type="text" name="titleform" id="titleform">
</td>
</tr>
<tr>
<td>
Font size:
</td>
<td>
<input type="text" name="fontsize" id="fontsz">
</td>
</tr>
<tr>
<td>
Font:
</td>
<td>
<input type="text" name="fontt" id="nbg">
</td>
</tr>
<tr>
<td>
Font color:
</td>
<td>
<input id="ex"type="color" name="fontt" id="nbg">
</td>
</tr>
<tr>
<td>
Background color of form:<br/>
</td>
<td>
<input id="ex" type="color" name="bgcolor" id="nbg" value="#FFFFFF">
</td>
</tr>
<tr>
<td>
Input #1:
</td>
<td>
<input type="text" name="input1" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t1" id="t1">
<option>text</option>
<option id="t11">radio</option>
<option id="t12">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
</td>
<tr>
<td>
Input #2:
</td>
<td>
<input type="text" name="input2" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t2">
<option>text</option>
<option id="t21">radio</option>
<option id="t22">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer2">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #3:
</td>
<td>
<input type="text" name="input3" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t2">
<option>text</option>
<option id="t31">radio</option>
<option id="t32">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer3">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #4:
</td>
<td>
<input type="text" name="input4" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t4">
<option>text</option>
<option id="t41">radio</option>
<option id="t42">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer4">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
Input #5:
</td>
<td>
<input type="text" name="input5" id="nbg">
</td>
<td>
Type:
</td>
<td>
<select name="t5">
<option>text</option>
<option id="t51">radio</option>
<option id="t52">checkbox</option>
</select>
</td>
<td>
<div id="TextBoxContainer5">
<!--Textboxes will be added here -->
</div>
</td>
</tr>
<tr>
<td>
<button type="submit" name="Create_form" id="form2" value="submit" onclick="return check()"> >Submit
</button>
</td>
</tr>
</form>
</table>
You need to attach your div to the DOM, and particularly as a child element of your form. Otherwise, the <input>s never get POSTed.
$("#myForm").append(div);
Also, since you used jQuery to manipulate your div and form in the first place, I would advise you continue with jQuery to build the inner inputs, rather than just provide inner HTML in your GenerateTextbox function.
Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.
Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>
I try to fill a json array dynamically after everytime i press a button. My goal is later to safe this array in a txt file, but this is an other story and for that i found examples at W3C-Page.
this is my code so far:
enter
<html>
<body>
<table>
<tr>
<td><label>Subject: <input id="subject" type="text" /></label></td>
<td><label>Semester: <input id="semester" type="text" /></label></td>
<td><label>Name: <input id="name" type="text" /></label></td>
</tr>
<tr>
<td>
<label>Question: <label>
</td>
<td colspan="2">
<textarea id="question" style="width:512px;height:100px"></textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 1: <label>
</td>
<td colspan="2">
<textarea id="Answer1" style="width:512px;height:100px"></textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 2: <label>
</td>
<td colspan="2">
<textarea id="Answer2" style="width:512px;height:100px"></textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 3: <label>
</td>
<td colspan="2">
<textarea id="Answer3" style="width:512px;height:100px"> </textarea>
</td>
</tr>
<tr>
<td>
<label>Answer 4: <label>
</td>
<td colspan="2">
<textarea id="Answer4" style="width:512px;height:100px"> </textarea>
</td>
</tr>
<tr>
<td></td>
<td><button onclick="saveInputInArray()">Save in Array</button></td>
<td></td>
</tr>
</table>
<script type='text/javascript'>
var quiz = {
question:[]
};
function saveInputInArray()
{
quiz.question.push({
"Subject" : document.getElementById("subject").value,
"Semester" : document.getElementById("semester").value,
"Name" : document.getElementById("name").value,
"Question" : document.getElementById("question").value,
"Answer1" : document.getElementById("Answer1").value,
"Answer2" : document.getElementById("Answer2").value,
"Answer3" : document.getElementById("Answer3").value,
"Answer4" : document.getElementById("Answer4").value
});
alert("Semester: " + quiz["question"]["semester"]);
}
</script>
</body>
</html>
Your code is good, just change this line:
alert("Semester: " + quiz["question"][0]['Semester']);
http://jsfiddle.net/ajpohzv3/
Considering this line of code that you wrote
alert("Semester: " + quiz["question"]["semester"]);
I'd do like such :
var quiz = {
question:[]
};
function saveInputInArray()
{
"subject semester name question Answer1 Answer2 Answer3 Answer4".split(" ").forEach(function(id){
quiz.question[id] = document.getElementById(id).value;
});
alert("Semester: " + quiz["question"]["semester"]);
}
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>
I want to pass some td values to ajax call when pressing the button "Delete"
How can I do that with jquery?
<table>
<tr>
<td class="datao">first column</td>
<td class="data1">first column</td>
<td class="data2">first column</td>
<td colspan="2"></td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">xzczxc</td>
<td class="data1">xzczxc</td>
<td class="data2">xzczxc</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
UPDATE:
Supposing that I want to grab the value of input type=text inside of the 's.
HTML Example:
<table>
<tr>
<td class="datao">
<select class="someclass">
<option value="asdsa">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="eqw" />
</td>
<td class="datao">
<input type="text" value="gfg" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="wq">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="hfd" />
</td>
<td class="datao">
<input type="text" value="vcv" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
<tr>
<td class="datao">
<select class="someclass">
<option value="cva">somevalue</option>
</select>
</td>
<td class="datao">
<input type="text" value="ewd" />
</td>
<td class="datao">
<input type="text" value="asad" />
</td>
<td>
<input type="button" class="deleteRow" value="Delete" />
</td>
</tr>
</table>
jquery's code:
Let's say I want to grab select's value each row of data...
$('input.deleteRow').live('click', function() {
var values = [];
$(this).closest('tr').find("select").each(function() {
values.push($(this).attr('value'));
});
//Confirm
//the ok stores true or false returned by confirm!
var ok = confirm("Are you sure...?");
//testing for true
if(ok){
$.post("phpscript.php", { someName:values[0] }, function(data) {
if(data == '1'){
alert("something");
location.reload();
}
else
alert("something else, error probably");
});
}
});
If you want to grab select and input type="text" just need to do: ...find("select, input[type=text]")...
This is my contribute to the community.
Anyway, I would like to find an elegant way of sending the data to the php script give a hand on it.
May use http://www.datatables.net/ - much easier than program all by your self?
You will want to attach an event handler to each of the input buttons that will go to the button's parent (<td>) and then go to that node's siblings (the other <td>s). For each of these you will get the inner HTML for the respective <td> and then figure out some way to pair these all together (delimited string maybe?)
$('input.deleteRow').live('click', function() {
var returnString = '';
$(this).parent().siblings().each(function() {
returnString += $(this).html();
});
$.ajax({
url: 'somephpurlhere.php',
data: returnString
}).success(function() {
//dosomething
}).fail(function() {
//dosomethingelse
});
});
You will need to modify the .ajax call to suit your needs as you haven't expressed how you are handling responses, etc.
If you want to check if a given DOM element contains a td or an input then you could replace the .each functionality as follows:
$(this).parent().siblings().each(function() {
if ($(this).find('td').length > 0)
resultString += $(this).find('td').html();
else if ($(this).find('input').length > 0)
resultString += $(this).find('input').val();
else
resultString += $(this).html();
});