I am trying to validate my username field and check if the username contains atleast 6 letters, if not then i show a pop up window indicating the same.
But the alert command does not seem to work.
Following is the code:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
if (username1.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form>
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>
You are trying to use the name element attribute as the id, which creates a global window property. Name does not do that however, you can use.
You also aren't getting the value, you are trying to get the length on the element.
document.getElementsByName('username1')[0].value
Answer:
I tried it this way it worked:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
username2 =form1.username1.value
if (username2.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form name="form1">
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>
Related
I can't get this code block to work properly:
<script>
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
</body>
Try this
</head>
<body>
<form onsubmit="event.preventDefault();">
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
<script>
function Message(){ document.getElementById("sname").innerHTML = document.getElementById("name").value; return false;}
</script>
</body>
That's a submit button. Make type='button' instead.
Solution #1
function Message(){
event.preventDefault();
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Solution #2 you can just use button instead of input.
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<button type="button" onclick="Message()"/>Click me</button>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Hope it helps!
I have created form on their 3 fields is there customer name, contact and email
suppose to be if clicked submit button to addmore row so how would we do
<html>
<head>
</title></title>
</head>
<body>
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact">
<td>Email</td>
<td>
<input type="email" name="email">
</td>
</tr>
</table>
<script>
function addrow(){ }
</script>
<p>
<input type="submit" name="submit" value="submit">
<input type="button"name="Addmore" value="Addmore"/> </p>
</form>
</body>
</html>
Append your table addrow with jquery.append().
<html>
<head>
</title></title>
</head>
<body>
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact">
<td>Email</td>
<td>
<input type="email" name="email">
</td>
</tr>
</table>
<p>
<input type="submit" name="submit" value="submit">
<input type="button" id="add" name="Addmore" value="Addmore"/>
</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$( "#add" ).click(function() {
$("#addrow").append('<tr> <td>Customer Name:</td> <td><input type="text" name="cust_name"></td> <td>Contact:</td> <td><input type="text" name="contact"><td>Email</td> <td><input type="email" name="email"></td></tr> ');
});
</script>
</body>
</html>
Since, you are having multiple values for Customer Name,Contact,Email . So, you have to use name as array type. Like below.
<html>
<head>
</title></title>
</head>
<body>
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name[]">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact[]">
<td>Email</td>
<td>
<input type="email" name="email[]">
</td>
</tr>
</table>
<p>
<input type="submit" name="submit" value="submit">
<input type="button" id="add" name="Addmore" value="Addmore"/>
</p>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$( "#add" ).click(function() {
$("#addrow").append('<tr> <td>Customer Name:</td> <td><input type="text" name="cust_name[]"></td> <td>Contact:</td> <td><input type="text" name="contact[]"><td>Email</td> <td><input type="email" name="email[]"></td></tr> ');
});
</script>
</body>
</html>
On user's request.
insert_customer.php
<?php
// Write Your Databse Connection.
$custName = $_POST['cust_name'];
$custContact = $_POST['contact'];
$custEmail = $_POST['email'];
$totalCustomerName = sizeof($custName);
for($i=0;$i<$totalCustomerName;$i++) {
$customerName = $custName[$i];
$customerContact = $custContact[$i];
$customerEmail = $custEmail[$i];
$sql ="insert into customer_info(cust_name,contact,email)values('$customerName',$customerContact,'$customerEmail')";
// Run your query here.
}
?>
First you should add onclick event to the addmore button so it will trigger the function addrow()' when the user click :
<input type="button" name="Addmore" value="Addmore" onclick='addrow()'/>
Then you can append another column to the existing HTML element using .innerHTML += :
function addrow(){
document.querySelector('#addrow tr').innerHTML += '<td>Address</td><td><input type="address" name="address"></td>';
}
<form action="insert_customer.php" method="post">
<table id="addrow">
<tr>
<td>Customer Name:</td>
<td>
<input type="text" name="cust_name">
</td>
<td>Contact:</td>
<td>
<input type="text" name="contact">
<td>Email</td>
<td>
<input type="email" name="email">
</td>
</tr>
</table>
<p>
<input type="submit" name="submit" value="submit">
<input type="button" name="Addmore" value="Addmore" onclick='addrow()'/> </p>
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 want my site to display differently based on the size of the web browser. Based on the questions/answers from other users, I got this to work with JavaScript onload. But I can't get it to work dynamically -- that is to say, in real-time, as users are adjusting the window. They have to refresh to get the format of the webpage to change.
Here is my current code:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
Note: I know I shouldn't be used tables, I should be using divs. But that's another issue... I started building this website before I knew that. I also know it's pretty sloppy. So just bear with me. I'm trying to just go with it until I have time to fix it up.
You shouldn't use JavaScript to make responsive web design. Use CSS instead, with media querys. So you write your HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
Use the following CSS:
#media all and (max-width: 899px) {
#big_device_index {
display: none;
}
#media all and (min-width: 900px) {
#small_device_index {
display: none;
}
You can find out more about media queries here
}
Add this outside of if (window.innerWidth > 900){.....
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
hope this will help you, make sure to include fisrt jquery.min.js
When the people fill my from, I want them to use an enter button like a tab button to fill all the form. So i have put javascript code into my form. But it doesn't work....
Can someone tell me why this code didn't work? I use internet explorer 9, Google chrome and Mozilla Firefox to try it, but doesn't work also...
<!--<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>-->
<script type="text/javascript">
function noenter() {
if(window.event && window.event.keyCode == 13);
myform.submit();
else
return true;}
</script>
</head>
<body>
<form name="form1" method="post" action="berjaya.php" onSubmit="return submitOK">
<table width="35%" border="1" align="center">
<tr>
<td colspan="3">Please fill the form bellow</td>
</tr>
<tr>
<td width="21%">first name</td>
<td width="2%">:</td>
<td width="77%"><label>
<input type="text" onkeypress="return noenter()" name="fname" id="fname">
</label></td>
</tr>
<tr>
<td>last name</td>
<td>:</td>
<td><label>
<input type="text" onkeypress="return noenter()" name="lname" id="lname">
</label></td>
</tr>
<tr>
<td>age</td>
<td>:</td>
<td><label>
<input type="text" onkeypress="return noenter()" name="age" id="age">
</label></td>
</tr>
<tr>
<td>date of birth</td>
<td>:</td>
<td><label>
<input type="text" onkeypress="return noenter()" name="dobirth" id="dobirth">
</label></td>
</tr>
<tr>
<td>home town</td>
<td>:</td>
<td><input type="text" onkeypress="return noenter()" name="htown" id="htown"></td>
</tr>
<tr>
<td colspan="3"><label>
<input type="submit" name="button" id="button" value="Submit" onClick="submitOK=true">
</label></td>
</tr>
</table>
</form>
</body>
</html>-->
If you'd actually bothered to READ that JavaScript you've copypastaed into your form, you'd reliaze that it actually TRIGGERS the form submission anytime the enter key is pressed on any of your input boxes.
If you want to disable the enter key, then you have to return false, not do form.submit().