I have been debugging the following html code and it has a weird behavior.
Everytime, when I load the page in IE, the browser seems doesn't pickup the width attribute initially. However, it is working fine after a refresh. This page works on all browser but IE. Could you please give me some tips what's going on here?
Thank you very much
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<title>Money_market</title>
</head>
<body lang="3DEN-US" style="3D'tab-interval:.5in'">
<div id="IDMS_container">
<div style="text-align:right;" id="logout">User: <b></b> Logout</div>
<div class="tabs">
<ul>
<li>Cusip Entry Lookup</li>
<li>Corp/Gov.<br>Bond Lookup</li>
<li>Muni Bond<br>Lookup</li>
<li class="selected">Money Market<br>Lookup</li>
<li>Help</li>
<div class="clear"></div>
</ul>
</div>
<br>
<div id="symbol">
<h1>Money Market Lookup:</h1>
<table>
<tbody><tr>
<form method="GET"></form>
<td class="valign">Issuer:</td>
<td class="valign"><input type="text" value="" id="form" size="9" name="desc"></td>
<td class="valign">Coupon:</td>
<td style="width:100px;" class="valign"><input type="text" value="" id="form" size="4" name="coupon"></td>
<input type="hidden" value="money" name="s_pageid">
<td class="valign"><input type="submit" value="Lookup" id="button" name="button"></td>
</tr>
</tbody></table>
<!--span class="date_form">(Enter Date: MM/DD/YYYY)</span-->
</div>
<div id="quote">
<table>
<tbody><tr>
<th>Issue Name</th>
<th>Coupon</th>
<th>Maturity Date</th>
<th>Bid Evaluation</th>
<th>Bid Evaluation Date</th>
</tr>
</tbody></table>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="http://www.federated.test.idmanagedsolutions.com/css/IDMS_styles.css"> </div>
</body></html>
Related
Top.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Page</title>
</head>
<body bgcolor="yellow">
<table border="0" width="100%">
<tr>
<td align="center" bgcolor="white">
<img src="./Img/Logo.jpg" alt="logo" />
</td>
<td align="center" bgcolor="white">
<h1 style="color: blue">Web Client Development</h1>
</td>
<td bgcolor="white" style="width: 500px; text-align: center">
<p>
<!-- <a href="./Forms/Pages/inputform.html" target="Content_Frame"
>User <br />
Logon</a
> -->
<a href="./Forms/Pages/userLogonForm.html" target=""
>User <br />
Logon</a
>
</p>
</td>
</tr>
</table>
</body>
</html>
In that 'user logon' area I want to open a UserLogon.html which goes like
UserLogon.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Logon Form</title>
<script type="text/javascript">
function submitCredentials() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
alert("Username: " + username + "\nPassword: " + password);
}
function resetCredentials() {
document.getElementById("userLogonForm").reset();
}
</script>
</head>
<body>
<form action="" id="userLogonForm">
<label for="username">Username : </label>
<input
type="text"
id="username"
name="username"
placeholder="Enter Username"
/>
<br /><br />
<label for="password">Password : </label>
<input
type="password"
id="password"
name="password"
placeholder="Enter Password"
/><br /><br />
<button type="button" onclick="submitCredentials()">Submit</button>
<button
type="button"
onclick="resetCredentials()"
style="margin-left: 100px"
>
Reset
</button>
</form>
</body>
</html>
My Top.html has three sections of <td> , One has a logo image, second one has a normal heading, the third is where I want to display my form which asks for username and password (UserLogon.html)
The problem is when I click on User Logon area it expands my UserLogon.html page for the entire area (I guess all three <td>), whereas I want to display that UserLogon.html form in my third <td> tag only. How do I keep the size fixed to that particular <td> only
Note: For the whole website I am using framesets
Im using a form to be able to use the input of the user to save some information.
In this case it's instructions for a receipt. However I would like to have an unlimited number of fields for that (as you can see in the image it has 3 fields).
I would like to have an option at the bottom, like a button where it would create a new input field. I've searched in bootstrap documentation and I don't find anything related to that, they always use a fixed number of input fields...
Any suggestion?
This is the code I'm using to generate the fields (10 at the moment):
<div class="col-md-4">
<h2>Instructions</h2>
<div class="form-group">
<table style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
#for (int i = 0; i < 10; i++)
{
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step #(i+1) " /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
}
</table>
</div>
The following code is a fully functional example on how you can achive what you are asking for:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Instructions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="col-md-4">
<h2>Instructions</h2>
<div class="form-group">
<table id="instructionsTable" style="width:75%">
<tr>
<th><label asp-for="Instructions[0].Designation" class="control-label"></label></th>
</tr>
<tr>
<td><input asp-for="Instructions[i].Designation" class="form-control" placeholder="Step #(i+1)" /></td>
</tr>
<span asp-validation-for="Instructions[i].Designation" class="text-danger"></span>
</table>
</div>
<input id="addInputBtn" type="button" value="+" />
<script>
$(document).ready(function(){
$("#addInputBtn").click(function(){
var newInput = "<tr><td><input asp-for='Instructions[i].Designation' class='form-control' placeholder='' /></td></tr>";
$("#instructionsTable").append(newInput);
})
});
</script>
</body>
</html>
In a HTML form I am using JavaScript Form validation to avoid empty fields. This is the code for the form:
<form method="post" name="form1" onsubmit="return validateForm()" action="<?php echo $editFormAction; ?>">
<table align="center">
<tr valign="baseline">
<td nowrap align="right">Nickname:</td>
<td>
<input type="text" name="nickname" value="" size="32">
</td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Email:</td>
<td><input type="text" name="email" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Password:</td>
<td><input type="text" name="password" value="" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><input type="submit" value="Insert record"></td>
</tr>
</table>
<input type="hidden" name="estado" value="0">
<input type="hidden" name="MM_insert" value="form1">
</form>
And this is the JavaScript function:
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
As expected, if the user clicks on the submit button and the field 'nickname' is empty, the Alert Dialog is shown, but after closing it, the form is submitted. I am using Dreamweaver as editor and JQuery Mobile in my web, may be this is the problem.
Any help is welcome.
Working example: http://jsfiddle.net/Gajotres/vds2U/50/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<form method="post" id="form1" name="form1" action="" data-ajax="false">
<table align="center">
<tr valign="baseline">
<td nowrap align="right">Nickname:</td>
<td>
<input type="text" name="nickname" value="" size="32"/>
</td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Email:</td>
<td><input type="text" name="email" value="" size="32"/></td>
</tr>
<tr valign="baseline">
<td nowrap align="right">Password:</td>
<td><input type="text" name="password" value="" size="32"/></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"> </td>
<td><input type="submit" value="Insert record"/></td>
</tr>
</table>
<input type="hidden" name="estado" value="0"/>
<input type="hidden" name="MM_insert" value="form1"/>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('submit', '#form1', function(){
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="") {
alert("First name must be filled out");
return false;
} else {
return true;
}
});
Changes:
jQuery Mobile has its own way of form handling, you need to disable it if you want to have classic form handling. It is done via attribute data-ajax="false".
Never use inline javascript with jQuery Mobile, I mean NEVER.
For me this is working fine :
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}else{
return true;
}
}
</script>
Just added a else statement. It's working fine for me.
I think your code should work. But If not you can make some changes as
Change 1 Remove Submit event from tag
<form method="post" name="form1" action="<?php echo $editFormAction; ?>">
Change 2.
Change submit button to default button and validate event here
<input type="button" onclick="javascript:validateForm();" value="Insert record">
Change 3.
Now change in javascript Add code form sub
<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
}else{
document.forms["form1"].submit();
}
}
</script>
I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SMALL NORTH RUN</h1>
</header>
<nav>
<ul id="navlist">
<li>HOME</li>
<li>TRAINING REGIME</li>
<li>FORUM</li>
<li>SPONSOR</li>
<li>CONTACT</li>
</ul>
</nav>
<hr id="hrnav" />
<div id="content">
<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>
<tr><td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
<tr>
<td>
<label>Message:</label>
</td>
<td>
<textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
</td>
</tr>
</tr>
<tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30" name="donator"/></td></tr>
<tr>
<td>
<tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
</table>
</form>
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
CSS
#content { text-align: left; margin: 2px; padding: 10px; }
#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }
try to add a doctype :
for example, here is the HTML5 doctype
<!DOCTYPE html>
It seems to work fine for me.
Maybe you have a problem in your css?
EDIT:
The float style on your P tag is causing the trouble.
A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:
<div style="float:none;">
<br />
</div>
This causes the rest of your code to resume the normal layout
1) You have some errors in table structure
2) If you need to center table, you can setup it margin-left and margin-right auto.
There is possible table code with align:
<table style='margin: 0 auto;'>
<tr>
<td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr>
<td><label>Donation (£):</label></td>
<td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
<td><label>Message:</label></td>
<td><textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
<td><label>Your Name:</label></td>
<td><input type="text" maxlength="30" name="donator"/></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Confirm Donation"/></td>
<td> </td>
</tr></table>
If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.
Can any one tell me whats wrong with the following code..
managerhomepage.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<frameset row="20%,80%">
<frame src="managerhomepage.jsp">
<frame src="signup.html">
</frameset>
</body>
</html>
managerhomepage.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ManagerHomePage</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<% String[] name={"Raviteja","Pramod","Aadinarayana","Anusha","Ramireddy","Surendhra","Rajesh","Aruna"};%>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<h1>MANAGER'S HOME PAGE</h1>
Select a SalesPerson from here <select name="salespersons">
<option></option>
<% for(int i=0;i<name.length;i++){
%><option><%=name[i]%></option><%
}%>
</select>
<input type="button" value="OK"/>
</center>
</body>
</html>
signup.html
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form action="managerhomepage.html">
<table>
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="seniormanager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="SUBMIT" name="submit" value="SUBMIT"> <input type="button" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
frameset is used instead of body, not inside it.
The attribute is rows, not row.
Validating would have told you this.
A frameset is used to establish a BODY, and should not be used inside of one.
Plus: You don't have a BASE target="" in your framed pages head(s).
And DIVS can be used to establish what you are trying to acheive, but referencing them can become complex quickly.
Also, naming your frames makes them much easier to deal with, and I see you've left their name references out of their declarations. There was alot of frameset debate when it was standardized, and if you are a professional author, I would suggest reading some of that information so you can see the advantages and disadvantages of framesets.
Now, with that being said, I would offer this suggestion:
IFRAME might work for you in this case, but because of the resourses and load times, esp. with building data tables, I would suggest another approach.