I have buttons in my form and above it I have tables that I will set them to block and not blocking(Javascript)
when I click the link the relative table will show the content my problem is that by clicking the links the position of buttons will change I want them to be fixed what should I do?
(I have 2 form tags in a page this form is second one)
Thanks in Advance
<form name="ruleSaveSettingForm" method="POST" onsubmit="return applySave();">
<input type="hidden" name="rule_id">
<input type="hidden" name="rule_value">
<input type="hidden" name="openerhref">
<table align="right" border="0" cellpadding="0">
<tr>
<td class="tdaction"> <input type="submit" id="Save" value="Save" class="but"></td>
<td class="tdaction"> <input type="button" id="Reset" value="Reset" class="but" onclick="resetForm();return false;"></td>
<td class="tdaction"> <input type="button" id="Close" value="Close" class="but" onclick="window.close();"></td>
</tr>
</table>
</form>
Its better to move the buttons out of the out of the table , if its
placed inside it.
Move your table to a div and give it the style
property
min-height:50px;
This will remain the height of the div to 50 px even if the table is made hidden using java script.
Hope this will solve ur problem
<div style='min-height:150px;' id='yourID'>
<table border='1'>
<tr>
<td>data1</td>
<td>data1</td>
<tr>
<tr>
<td>data1</td>
<td>data1</td>
<tr>
<tr>
<td>data1</td>
<td>data1</td>
<tr>
</table>
</div>
<div>
<table>
<tr>
<td>button1</td>
<td>button2</td>
<td>button3</td>
<tr>
</table>
</div>
In the above sample , you need to place the buttons in anew div.You are free to use div or table.
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.
In a webpage, when a button is click, a table hidden is shown within another table. However, each time, when the hidden table is toggled, the width of the outside table would resize itself. The fiddle demo is here: http://jsfiddle.net/bEK8f/5/
I hope the initial width of the outer table would take into account of the size of the inner table. Therefore, the outer table width should not change by showing/hiding the inner table.
As cebirci showed below, fixing the width of the outer table and using the fixed layout would work. Note sure if the width of the outer table can be decided based on the hidden table. In this way, there is no need to manually set the outer table width.
Thank you very much!
I also include my code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(e){
e.preventDefault();
$('#cat1').toggle();
});
$("#calculate").click(function(e){
var diff = $('#diff').val();
var sd = $('#sd').val();
var effect = diff/sd;
$('#es').val(effect.toFixed(2));
$('#cat1').toggle();
});
});
</script>
<style>
table{border: 1px solid black;}
</style>
</head>
<body>
<table style="width:500px;table-layout: fixed;">
<tr class="row2">
<th class="col0">Effect size <button id="show">Show</button></th><td class="col1"><input type="text" id="es" value="0.1"></td>
</tr>
<tr class="cat1" id='cat1' style="display:none">
<th class="col0" id='test'></th>
<td class="col1">
<table>
<tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
<tr><td>Difference</td> <td> <input type="text" id="diff" value=".1"> </td></tr>
<tr><td>sd</td> <td> <input type="text" id="sd" value="1"> </td></tr>
<tr><td></td> <td> <button id="calculate">Calculate</button> </td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should use th tag for only header row of your table. In your table using td is better because you dont have any header row for titles etc..
In your html, your new table is appearing in a cell, and the cell is small for your table so it resizes. You can use colspan for merging two cells of your second row.
Your html code can be like that:
<table style="width:340px;table-layout: fixed;">
<tr class="row2">
<td class="col0">Effect size <button id="show">Show</button></td>
<td class="col1"><input type="text" id="es" value="0.1" /></td>
</tr>
<tr class="cat1" id='cat1' style="display:none">
<td class="col1" colspan="2">
<div style="display:inline"><table style="width:100%">
<tr><th class="col0 centeralign" colspan="2"> Effect size calculation </th></tr>
<tr><td>Difference</td> <td> <input type="text" id="diff" value=".1" /> </td></tr>
<tr><td>sd</td> <td> <input type="text" id="sd" value="1" /> </td></tr>
<tr><td></td> <td> <button id="calculate">Calculate</button> </td></tr>
</table></div>
</td>
</tr>
</table>
And jsfiddle link is http://jsfiddle.net/bEK8f/2/
I had a situation where the Submit Button would not work if you clicked on it in Firefox and Chrome, but it worked as it should in Internet Explorer.
Even odder, I found that I could "tab" to the button and hit enter and it would work. This was a portion of the form code:
<form id="product_form" name="product_form" method="post" onsubmit="return validateProductForm();" action="product-photo-mail.php" enctype="multipart/form-data">
<table width="100%" border="0">
<tr>
<td class = "left_side" width="30%">Quantity:</td>
<td class = "right_side" width="60%">
<select name = "quantity_cards">
<option>50</option>
<option>75</option>
<option>100</option>
<option>125</option>
<option>150</option>
<option>more</option>
</select>
</td>
</tr>
.
.
.
<tr>
<td colspan="2" align="center">You're almost done!</td>
</tr>
<tr>
<td colspan="2" align="center"><br />After you submit your order we will send over your digital proof for approval!</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="button1" id="button1" class="formbutton" value="Submit My Order" />
</td>
</tr>
</table>
</form>`
When I moved the button above the text, it worked on all browsers as I would expect. I have no idea why this would happen. I spent hours trying to get this to work and the only thing I could get to work is swapping the order:
.
.
<tr>
<td colspan="2" align="center">
<input type="submit" name="button1" id="button1" class="formbutton" value="Submit My Order" />
</td>
</tr>
<tr>
<td colspan="2" align="center">You're almost done!</td>
</tr>
<tr>
<td colspan="2" align="center"><br />After you submit your order we will send over your digital proof for approval!</td>
</tr>
</table>
</form>
I would like to have the text first and the submit button, but I am at my wits end here. Has anyone experienced this before?
Is it not possible to provide a link?
Is there not perhaps an hidden element that is covering your submit button? That would explain why you can tab to the button, but not click it.
Try to use <button> tag instead of <input>.
In my html page, there exists a link to sign up and a div which holds the signup form.
<img src="images/logo2.png" alt="LOGO">
<div>
<form method="POST" action="signup.php">
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname"></input></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname"></input></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email"></input></td>
</tr>
<tr>
<td>Re-enter Email</td>
<td><input type="text" name="remail"></input></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="pwd"></input></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="text" name="cpwd"></input></td>
</tr>
<tr>
<td>Birthday</td>
<td><input type="text" name="bday"></input></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="text" name="sex"></input></td>
</tr>
<tr>
<td><input type="submit" value="Signup"></input></td>
<td><input type="button" value="Cancel"></input></td>
</tr>
</table>
</form>
</div>
I need to scroll down to the div when the user clicks on the signup link.
Can somebody plz explain how to do that.
Thanx in advance....
To use just HTML, you can use an anchor tag.
<div><a id='form'></a>
<form method="POST" action="signup.php">
...
</div>
Then your link will be the following: Click here to sign up
Explanation: That link goes to the a anchor tag with the id of form.
Use the following,
<img src="images/logo2.png" alt="LOGO">
Sign Up
<div id="test">
<form method="POST" action="signup.php"> ... </form>
</div>
By using simple HTML,using anchor tag you can scroll page to your SignUp div.
"#" in href is used to redirect within the page.
Hope this helps
Sign Up
<div id="mySignUpDiv">
</div>
I am trying to add an type upon clicking the button.
Here is my jquery script:
$(function(){
$("#add").click(function(){
$("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name' /></td></tr>");
})
});
Then my HTML markup:
<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table cellpadding="0" cellspacing="0" style="text-align:center;">
<thead>
<tr>
<th colspan="7">Add subject on the list of available subjects</th>
</tr>
</thead>
<tbody id="inputboxes">
<tr class="dark">
<td colspan="7">
<input type="button" id="add" value="Click to add a subject" />
</td>
</tr>
</tbody>
<tbody>
<tr class="dark">
<td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>
#on page top
if(isset($_GET['submit']) print_r($_GET); // the only entry of array is the [submit'] => "Submit"
I can successfully generate an box, however it seems that whenever I hit submit, the box doesn't seem to be passed. Also how can I generate an increment in the name="" of generated box.
For the record, I found the workaround for this, moved the form tag outside of the table. Thanks everyone.
For the submit button to work, you need to put your inputs in a form. You can add an increment in the name if you want to, but it is not necessary. If you submit inputs with the same name, they will be submitted as an array.
Adding increment:
$(function(){
var i = 1;
$("#add").click(function(){
$("#inputboxes").append("<tr class='light'><td colspan='3' class='header'>Subject Name</td><td colspan='3'><input type='text' name='subject_name" + (i++) + "' /></td></tr>");
})
});
Adding form:
<form action="url" method="POST">
<table>
<tbody id="inputboxes">
<tr class="dark">
<td colspan="7"><input type="button" id="add" value="Click to add a subject" /></td>
</tr>
</tbody>
<tbody>
<tr class="dark">
<td colspan="7"><input type="submit" name="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
</form>