<form id="form1">
<table style="border:1px solid black ; font-family : Arial">
<tr>
<td>
First Number
</td>
<td>
<input id="Text1" type="text"/>
</td>
</tr>
<tr>
<td>
Second Number
</td>
<td>
<input id="Text2" type="text"/>
</td>
</tr>
<tr>
<td>
Resut
</td>
<td>
<input id="ResultArea" type="text"/>
</td>
</tr>
<tr>
<td>
<input id="AddButton" type="button" value="Add" onclick="add()" />
</td>
</tr>
</table>
</form>
I am making simple program through JavaScript in which user are able to input 2 numbers and by clicking add button he will get the sum of those two inputs.
For this purpose i have two input fields for first and second input, one input field is for display the result after sum and also have one add button.
So here it is my java script function.
function add() {
var FirstNumber = document.getElementById("Text1").Value
var SecondNumber = document.getElementById("Text2").Value
document.getElementById("ResultArea").Value = FirstNumber + SecondNumber;
}
I don't know whats the problem but it is not working anyways . when give input and click on add button , there is no response , no error , nothing ..
typo change value instead of Value .V not in caps .Because JavaScript case sensitive .And you need parse the string using parseFloat() .Then only its performing the addition
function add() {
var FirstNumber = document.getElementById("Text1").value
var SecondNumber = document.getElementById("Text2").value
document.getElementById("ResultArea").value = parseFloat(FirstNumber)+ parseFloat(SecondNumber);
}
<form id="form1">
<table style="border:1px solid black ; font-family : Arial">
<tr>
<td>
First Number
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>
Second Number
</td>
<td>
<input id="Text2" type="text" />
</td>
</tr>
<tr>
<td>
Resut
</td>
<td>
<input id="ResultArea" type="text" />
</td>
</tr>
<tr>
<td>
<input id="AddButton" type="button" value="Add" onclick="add()" />
</td>
</tr>
</table>
</form>
function add() {
var FirstNumber = document.getElementById("Text1").value
var SecondNumber = document.getElementById("Text2").value
document.getElementById("ResultArea").value = Number(FirstNumber) + Number(SecondNumber);
}
Related
I have a jsp page where i am displaying value from data base .
Now i need to edit the table value in click of that particular row and that selected row value should get set into respective input text .
My java script function is getting called but clicked value is not getting displayed into respective input type .
The java script function name is onRowClick
I am adding code for that .
Please suggest .
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1" import="java.sql.*"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script>
function onRowClick(){
var table = document.getElementById("hoteltable"),rIndex;
for(var i = 0; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
rIndex = this.rowIndex;
document.getElementByName("hId").value = this.cells[0].innerHTML;
document.getElementByName("hName").value = this.cells[1].innerHTML;
document.getElementByName("hArea").value = this.cells[2].innerHTML;
document.getElementByName("hNumOfRooms").value = this.cells[3].innerHTML;
document.getElementByName("hImgUrl").value = this.cells[4].innerHTML;
hideButton();
showDelete();
showEdit();
};
}
}
</script>
</head>
<body>
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form:form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td><form:input name="hId" path="hotelId"></form:input></td>
<td><form:errors path="hotelId" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelName:</td>
<td><form:input name="hName" path="hotelName"></form:input></td>
<td><form:errors path="hotelName" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelArea:</td>
<td><form:select name="hArea" path="hotelArea">
<form:option value="Marthalli">Marathalli</form:option>
<form:option value="SilkBoard">SilkBoard</form:option>
</form:select></td>
<td><form:errors path="hotelArea" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td><form:input name="hNumOfRooms" path="hotelNumOfRooms"></form:input></td>
<td><form:errors path="hotelNumOfRooms" cssClass="error"></form:errors></td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td><form:input name="hImgUrl" path="hotelImgUrl"></form:input></td>
<td><form:errors path="hotelImgUrl" cssClass="error"></form:errors></td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"></input> <br> <br>
<input type="submit"value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"></input><br> <br>
<input type="reset"value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form:form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td><h4>hotelId</h4></td>
<td><h4>hotelName</h4></td>
<td><h4>hotelArea</h4></td>
<td><h4>hotelNumOfRooms</h4></td>
<td><h4>hotelImageUrl</h4></td>
</tr>
<c:forEach var="hotels" items="${hotelList}">
<tr onclick="onRowClick()">
<td >${hotels.hotelId}</td>
<td>${hotels.hotelName}</td>
<td>${hotels.hotelArea}</td>
<td>${hotels.hotelNumOfRooms}</td>
<td>${hotels.hotelImgUrl}</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
If you look in the web console, you'll find an error message. There is no document.getElementByName function in the DOM. There's getElementsByName (plural), but not a singular, and that one wouldn't really help you since it would give you a collection of all of the elements with that name, anywhere on the page. (Although if the only ones with those names are the ones you want, you could use it and then use [0] to get the only entry in the resulting collection.)
There's a different problem, though: Your click="onRowClick()" doesn't pass on any information about which row was clicked, and the function itself just hooks up event handlers on the rows rather than actually doing what you want done on click.
Instead, hook click on the table, and check to see if the click passed throug a row; if it did, fill in the information in the first table. See comments:
// Hook click on the table, rather than individual rows
document.getElementById("hoteltable").addEventListener("click", function(e) {
// Make sure the click passed through a row in this table
var row = e.target.closest("tr");
if (!row || !this.contains(row)) {
return;
}
// Get the form we're filling in
var form = document.querySelector("form[action=hotelaction]");
// Fill in the various inputs
// Note: I'd recommend giving each cell a data-name attribute or something
// and using those rather than using `row.cells[0]` and such. That way
// when (not if ;-) ) you change the source table, the cell references
// aren't messed up
form.querySelector("[name=hId]").value = row.cells[0].innerHTML;
form.querySelector("[name=hName]").value = row.cells[1].innerHTML;
form.querySelector("[name=hArea]").value = row.cells[2].innerHTML;
form.querySelector("[name=hNumOfRooms]").value = row.cells[3].innerHTML;
form.querySelector("[name=hImgUrl]").value = row.cells[4].innerHTML;
/*
hideButton();
showDelete();
showEdit();
*/
});
<h2>Welcome to Admin Page</h2>
<div id="sub-left">
<form action="hotelaction" method="post" modelAttribute="hotel">
<table>
<tr>
<td>hotelId</td>
<td>
<input name="hId" path="hotelId">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelName:</td>
<td>
<input name="hName" path="hotelName">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelArea:</td>
<td>
<select name="hArea" path="hotelArea">
<option value="Marthalli">Marathalli</option>
<option value="SilkBoard">SilkBoard</option>
</select>
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelNumberOfRooms:</td>
<td>
<input name="hNumOfRooms" path="hotelNumOfRooms">
</td>
<td>
<span class="error"></span>
</td>
</tr>
<tr>
<td>hotelImgUrl:</td>
<td>
<input name="hImgUrl" path="hotelImgUrl">
</td>
<td>
<span class="error"></span>
</td>
</tr>
</table>
<div id="sub-right">
<input type="submit" value="Add" name="action" id="btn1" class="glass2"><br> <br>
<input type="submit" value="Edit" name="action" id="btn2" class="glass2" /><br> <br>
<input type="submit" value="Delete" name="action" id="btn3" class="glass2"><br> <br>
<input type="reset" value="Reset" name="reset" onClick=showButton(); class="glass2" />
</div>
</form>
</div>
<div class="myTable">
<table id="hoteltable" border="1" width=100%>
<tr>
<td>
<h4>hotelId</h4>
</td>
<td>
<h4>hotelName</h4>
</td>
<td>
<h4>hotelArea</h4>
</td>
<td>
<h4>hotelNumOfRooms</h4>
</td>
<td>
<h4>hotelImageUrl</h4>
</td>
</tr>
<tr>
<td>1</td>
<td>Savoy</td>
<td>Marthalli</td>
<td>300</td>
<td>https://via.placeholder.com/150?text=Savoy</td>
</tr>
<tr>
<td>2</td>
<td>Marriott</td>
<td>SilkBoard</td>
<td>450</td>
<td>https://via.placeholder.com/150?text=Marriott</td>
</tr>
<tr>
<td>3</td>
<td>Premier Inn</td>
<td>Marthalli</td>
<td>150</td>
<td>https://via.placeholder.com/150?text=Premier+Inn</td>
</tr>
</table>
</div>
Note that I removed from JSP- or template-isms from the HTML in that, so it used standard form inputs. I assume what gets delivered to the browser uses standard form elements.
I can't get the value property from input[type='text'] #page-name and #page-url, it shows up undefined :
eventsDispatcher: function() {
var self = this;
$(".b-row a").click(function() {
var tileId = ("this").id;
$("#tile-edit").css("display", "block");
$("#tile-edit-save").click(function() {
self.pageList[tileId].name = $("#page-name").val(); // -> here
self.pageList[tileId].url = $("#page-url").val(); // -> here
console.log(self.pageList[tileId].name);
});
});
},
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tile-edit">
<form>
<table>
<tr>
<td>
<label for="page-url">Adress</label>
</td>
<td>
<input type="text" name="page-url" id="page-url" class="">
</td>
</tr>
<tr>
<td>
<label for="page-name">Name</label>
</td>
<td>
<input type="text" name="page-name" id="page-name" class="">
</td>
</tr>
<tr>
<td>
<input type="button" id="tile-edit-save" value="save">
</td>
</tr>
</table>
</form>
</div>
The rest of the script is working fine, like the both .click functions, just can't figure out why it doesn't get the #page-name and #page-url values ??
I'm just guessing, but ("this").id should be undefined. You might want to change it for:
var tileId = $(this).attr('id');
I believe you have special characters in your HTML. I copied and pasted it to/from a plain text editor and it works fine. Try copying and pasting the form HTML here.
$('#tile-edit-save').on('click',function() {
console.log($("#page-name").val())
console.log($("#page-url").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><label for="page-url">Adress</label></td>
<td><input type="text" name="page-url" id="page-url" class=""></td>
</tr>
<tr>
<td><label for="page-name">Name</label></td>
<td><input type="text" name="page-name" id="page-name" class=""></td>
</tr>
<tr>
<td><input type="button" id="tile-edit-save" value="save"></td>
</tr>
</table>
</form>
This is my html code for form
<form action="add.php" method="post">
<table style="border: 1px solid black;padding:20px;" cellspacing="1px">
</br>
</br>
<tr>
<td>Issue No:</td>
<td>
<input name="issueno" type="text" id="issueno" />
</td>
<td>Issue Date:</td>
<td>
<input name="issuedate" type="date" id="issuedate" />
</td>
</tr>
</br>
</br>
<tr></tr>
<tr>
<td>Item Code:</td>
<td>
<input name="itemcode" type="text" id="itemcode" />
</td>
<td>Description:</td>
<td>
<input name="des" type="text" style="width:250px; height:23px" id="desc" />
</td>
<td>Bal Quantity:</td>
<td>
<input name="bal" type="text" id="bal" />
</td>
</tr>
</br>
<tr>
<td>Issue Quantity:</td>
<td>
<input name="issuequ" type="text" id="issuequ" />
</td>
</tr>
</br>
<tr></tr>
<tr>
<td>Remark:</td>
<td>
<input name="remark" type="text" style="width:250px; height:23px" id="remark" />
</td>
</tr>
</br>
<tr>
<td colspan="6">
<center>
<input type="submit" value="submit">
</center>
</td>
</tr>
</table>
</form>
So I want to disable submit button if issue quantity is more than bal quantity and remain enable if issue quantity is less than bal quantity. And I am getting bal quantity on change of item code from ajax call. So how Do I do it??
<script>
/**
* the submit handler...
*/
function checkBeforeSubmit() {
// build your own condition ... :)
if(CONDITION == false) {
alert("You can not submit...");
}else {
// all is good ? so we submit the form ....
document.myForm.submit();
}
}
</script>
<form name="myForm" action="add.php" method="post">
...
<!-- i have changed the type from submit to button and add a handler to execute basic JavaScript function-->
<input type="button" value="submit" onClick="checkBeforeSubmit();">
</form>
Why not you try yo Add/remove disabled attribute to the submit button on qtty change.
This is my working code...
$('#issuequ').blur(function(){
var issueqty = $(this).val();
var bal = $('#bal').val();
if(issueqty > bal){
$('input[type="submit"]').attr('disabled','disabled');
} else if (issueqty < bal){
$('input[type="submit"]').removeAttr('disabled');
}
});
I am here disabling submit on change of issuequ otherwise remain active.
I am trying to create a simple ATM program with 5 buttons ($20, $60, $100, Other Amount, and Withdrawal). I need to create a confirm box when the money buttons are pressed and have the amount deducted from a text box when the withdraw button is pressed. Here is my code:
<form action="" >
<table>
<tr>
<td>
<input type="button" value="$20" onclick='accept())'/>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" value="Withdrawal" onclick=''/>
</td>
</tr>
<tr>
<td>
<input type="button" value="$60" onclick='accept()'/>
</td>
<td>Current Balance
</td>
<td>
<input type="Current Balance" value="5000.00" onchange=''/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="$100" onclick='accept()'/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="Other Amount" onclick=''/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
var balance=50000;
function withdraw(amount)
{
var sure = confirm("Are You Sure You Want To Withdraw This Amount?");
if(true)
{
balance = balance - amount;
}else
{
alert("No Withdrawal Made");
}
alert("Your Balance Is "+balance);
function
</script>
Please help! This is driving me crazy. Thanks!
Ok Lets have a look at some of the issues;
Indent your code properly, it will help you spot errors more easily.
Use an editor like notepad++ or better still an IDE that will show your syntactical errors
Don't use tables in your markup for layout purposes, learn css
<form action="" >
<table>
<tr>
<td>
<input type="button" value="$20" onclick='accept())'/> // you have an extra closing brace here
</td>
<td>
</td>
<td>
</td>
<td>
<input type="button" value="Withdrawal" onclick=''/>
</td>
</tr>
<tr>
<td>
<input type="button" value="$60" onclick='accept()'/>
</td>
<td>Current Balance
</td>
<td>
<input type="Current Balance" value="5000.00" onchange=''/> //Current balance is not a valid type
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="$100" onclick='accept()'/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="Other Amount" onclick=''/>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<script type="text/javascript">
var balance=50000;
function withdraw(amount) //this function should be called accept not withdraw
{ //you didn't close this brace
var sure = confirm("Are You Sure You Want To Withdraw This Amount?");
if(true) //should be if (sure)
{
balance = balance - amount;
}else{
alert("No Withdrawal Made");
}
alert("Your Balance Is "+balance);
function //this shouldn't be here
</script>
I didn't get the question clearly, but I think you need to confirm an amount for your "Other Amount" button, of your ATM application. You are suppose to use "prompt", usage of it is just like an alert box.
<input type="button" value="Get" onclick="prompt('How Much Amount, you want to withdraw?')">
your code can be something, like shown above.
I am trying to read the length of a textbox from my register form. I have tried using document.getElementById() and textbox.value.length. Is there something very simple I'm am missing. I alert the result to the screen to show the textbox length. Thanks in advance.
Here is my last attempt:
function Register(){
Alert(RegisterForm.txt_Password.value.length);
}
TextBox structure:
<form id="RegisterForm" name="RegisterForm" method="POST" action="RegisterInsert.php" onsubmit="return Register(RegisterForm)">
<table border="0" align="center" width="100%">
<tr>
<td width="15%">Email Address:</td>
<td width="85%"><input type="text" name="txt_Email" id="txt_Email"/> </td>
</tr>
<tr>
<td width="15%">Username:</td>
<td width="85%"><input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<span class="check" ></span></td>
</tr>
<tr>
<td width="15%">Password:</td>
<td width="85%"><input type="password" name="txt_Password" id="txt_Password" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btn_Register" id="btn_Register" value="Register"></td>
</tr>
<tr>
</table>
<p> </p>
</form>
I use the submit button to call the Register function.
You need to get a reference to the element first:
function Register() {
var RegisterForm = document.getElementById('RegisterForm');
alert(RegisterForm.elements['txt_Password'].value.length);
}
check out this code:
var textBox = document.getElementById("myTextBox");
var textLength = textBox.value.length;
alert(document.getElementById('txt_Password').value.length);