could you please help me with this code?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Daily News</title>
<script type="text/javascript" src="Scripts.js">
</script>
<link href="homepage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="body">
<div class="header">
<img id="header-image" src="news_logo.png" />
<form id="login-form" action="customerLogin.html" method="post" onsubmit="return validate(this)">
<table>
<tr>
<td><label for="loginid">Login:</label></td>
<td id="login-form"><input id="login-boxes" type="text" id="loginid"></td>
<td><label for="pword">Password:</label></td>
<td id="login-form"><input id="login-boxes" type="password" id="pword"></td>
</tr>
<tr>
<td></td>
<td id="login-buttons"><input type="submit" value=" Sign In ">
<input type="reset" value="Clear form">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
My Javascript is:
function validate(loginForm)
{
var booValid = true;
var strErrorMessage = "";
var minLength=5;
var maxLength=10;
if(loginForm.pword.value.length < minLength)
{
strErrorMessage = "password must at least 5 characters\n";
booValid=false;
}
if(loginForm.pword.value.length > maxLength)
{
strErrorMessage = "pasword must not more than 10 characters\n";
booValid=false;
}
if(loginForm.loginid.value.indexOf("#") == -1)
{
strErrorMessage = "please enter an e-mail address as your login name\n";
booValid=false;
}
if(!booValid)
{
alert(strErrorMessage);
}
return booValid;
}
I couldn't figure out what was with this code, it doesn't seem to read from javascript at all.
I have no idea why it does not. I've also tried to use only Login Form and javascript then it works and when i put everything together then it doesn't work.
You probably want to replace every id= with class=
Instead of your later ids you want to use name
<input id="login-boxes" type="text" id="loginid">
<input id="login-boxes" type="password" id="pword">
to
<input class="login-boxes" type="text" name="loginid">
<input class="login-boxes" type="password" name="pword">
Try to change :
<input id="login-boxes" type="password" id="pword">
to
<input id="login-boxes" type="password" name="pword">
and
<input id="login-boxes" type="password" id="pword">
to
<input id="login-boxes" type="password" name="pword">
Related
I have this table with some dependent information that uses Javascript and there is an Add and check button to insert elements dynamically in the table and a delete button for each row to delete. When I click the "add and check" button, a set of rows gets added to the table.
Here is what I have:
Javascript and HTML Code...
<!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" xml:lang="en" lang="en">
<head>
<title>Game</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="contanier">
<div class="row">
<div class="col-sm-6" style="padding:20px; border-right:1px solid #000;">
<div class="form-group">
<label for="email">First Number</label>
<input type="number" name="number1" class="form-control" id="number1" min="1">
</div>
<div class="form-group">
<label for="pwd">Second Number</label>
<input type="number" name="number2" class="form-control" id="number2" min="1" >
</div>
<div class="form-group">
<label for="pwd">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" min="1" >
</div>
<button type="button" id="addbtn" class="btn btn-primary">Add and Check</button>
</div>
<div class="col-sm-6">
<h4 class="text-center">Result</h4>
<div id="main_box">
<div>
<input type="checkbox" name="style" value="classical" onchange="add()">
<label>Remove Doublets</label></div>
<table id="result" class="table table-striped">
<tbody class="tbody">
<tr>
<th>Number</th><th>Amount</th><th>Action</th>
</tr>
</tbody>
</table>
<h3>Total Amount:<span id="totl">0</span></h3>
<form action="" method="post" >
<div id="inputs">
</div>
<input type="hidden" name="user_id" value="22">
<input type="hidden" name="game_id" value="111">
<input type="submit" name="save_data" class=" btn btn-danger" value="SAVE" >
</form>
</div>
</div>
</div>
</div>
<script>
var indx=1;
var total_amount = 0;
$("#addbtn").click(function(){
var number = jQuery('#number1').val();
var number2 = jQuery('#number2').val();;
var amount = parseInt(jQuery('#amount').val());
if(number!="" && number2!="" && amount!="")
{
const arr_num_first = Array.from(String(number));
const arr_num_second = Array.from(String(number2));
for (let numOf_f_array of arr_num_first)
{
for (let numOf_s_array of arr_num_second)
{
total_amount = total_amount+amount;
var new_number = numOf_f_array+""+numOf_s_array;
$('.tbody').append("<tr class='input"+indx+"' ><td>"+new_number+"</td><td>"+amount+"</td><td><button class='dlt' data-am='"+amount+"' data-c='input"+indx+"'>X</button></td><tr>");
$('#inputs').append("<input type='hidden' name='num[]' value='"+new_number+"' class='input"+indx+"' >");
$('#inputs').append("<input type='hidden' name='amount[]' value='"+amount+"' class='input"+indx+"' >");
indx++;
}
}
$('#totl').html(total_amount);
}else{ alert('Fill all fields')}
});
$( "#main_box" ).on( "click",".dlt", function() {
var classname = $(this).attr('data-c');
var dlt_amount = parseInt($(this).attr('data-am'));
var new_total = total_amount-dlt_amount;
total_amount = new_total;
$('#totl').html(new_total);
$('.'+classname).remove();
});
</script>
</body>
</html>
Please help me, I'm stuck.
Why doesn't the JavaScript below work? The script is checking if phone number and address is empty, but when the phone number and address field is entered, the alert still pops out.
const order = document.getElementById("orderInput");
const main = document.getElementById("main");
const phone = document.getElementById("phoneNumberInput").value;
const address = document.getElementById("addressInput").value;
function checkingIsEmpty() {
if (phone == ''){
alert("Please insert your phone number");
return false;
}
if (address ==''){
alert("Please insert your address");
return false;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
I'd agree with #Madara's comment, that you should... just add required attribute on form inputs which are required and let the browser do the work for you
However, I believe the reason your code is not working is because you appear to be setting the const values of phone and address on entry to the screen... and then you're checking that initial value (rather than the latest value).
Instead you need to get the latest value from the controls as part of the function...
function checkingIsEmpty(){
if (document.getElementById("phoneNumberInput").value == ''){
alert("Please insert your phone number");
return false;
}
if (document.getElementById("addressInput").value ==''){
alert("Please insert your address");
return false;
}
return true;
}
(Minor edit, you also need to return true at the end of your function, otherwise your submit won't work)
simplest way is to check if (!phoneInput.value) { ... }
as empty string and null will return falsy value
The problem you are having is because you are assigning the value of the fields at the time the page loads. Not at the time the function is called on submit. If you move the variable assignment into the function it should work for you.
const order = document.getElementById("orderInput");
const main = document.getElementById("main");
function checkingIsEmpty(){
const phone = document.getElementById("phoneNumberInput").value;
const address = document.getElementById("addressInput").value;
if (phone == ''){
alert("Please insert your phone number");
return false;
}
if (address ==''){
alert("Please insert your address");
return false;
}
return false;//for the example I don't want it to submit
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
You need to include the document.getElementById in your conditionals. Also, I would wrap both conditionals (Phone and Address) in another conditional so you can add classes for error styling on errored fields.
const order = document.getElementById("orderInput");
const main = document.getElementById("main");
var phone = document.getElementById("phoneNumberInput").value;
var address = document.getElementById("addressInput").value;
function checkingIsEmpty(){
if (document.getElementById("phoneNumberInput").value == '' || document.getElementById("addressInput").value == '') {
if (document.getElementById("phoneNumberInput").value == ''){
alert("Please insert your phone number");
return false;
}
if (document.getElementById("addressInput").value == ''){
alert("Please insert your address");
return false;
}
} else {
alert('success');
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
The values of inputs are stored inside a constant, not a variable.
When page is loaded, the script is executed and the contents of actual inputs are stored.
When you're calling checkingIsEmpty() the values aren't refreshed.
I suggest you to get the value inside the checkingIsEmpty() function if you want to keep checking with javascript, but as suggested Madara in comments, you can use the required attribute <input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber" required>.
Checking inputs with required attribute or javascript is nice, but you have to check it server-side too. It's easy to press F12 and edit dom.
function checkingIsEmpty()
{
let phone = document.getElementById("phoneNumberInput").value;
let address = document.getElementById("addressInput").value;
if (phone == '')
{
alert("Please insert your phone number");
return (false);
}
if (address == '')
{
alert("Please insert your address");
return (false);
}
return (true); //You forgot to return true in case of your form is validated
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>checking form is empty</title>
</head>
<body>
<form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
<div id="message">
<label>
<textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
</label>
</div>
<div id="phoneNumber">
<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
</div>
<div id="address">
<input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
</div>
<div id="order">
<input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
</div>
<div id= "reset">
<input type="reset" name="" value="RESET">
</div>
</form>
<script src="app.js" charset="utf-8"></script>
</body>
</html>
I want to Create a Form, that when its Submitted opens a link with a Variable which is the Input from the Textfield of the Form.
Here is an example:
<form onsubmit=<a href="http://www.link.xx?123&456&input=$UserInput target"_blank">
<p><input type="text" name="name" value="UserInput"/></p>
<p><input type="submit" value="Verbinden" /></p>
I do not need a Solution to get this exact example to work.
All I want is:
The User Puts Something in The Form and presses the Submit Button.
With Pressing the Submit Button the Browser opens The Link i provide with the Input as a Part of the Link.
In real life it means i want to use a Teamspeak Join Link with the username which the user has provided in the Form.
This is the Link that has to be Modified at the end with the username
ts3server://serverip?port=11&password=123&nickname=!Input from the Form!
I hope there is a better Way than the way i use at the moment:
form.html =
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
</head>
<body>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="200" id="LayoutBereich5" style="background-attachment: fixed; border: 1px solid rgb(179,0,180); margin: 1px; height: 50px;" >
<tr align="center" valign="top">
<td>
<form action="startts3.php" method="post">
<p>Namen bitte anpassen:
<p><input type="text" name="name" value="InGameName|RealName"/></p>
<p><input type="submit" value="Verbinden" /></p>
</td>
</tr>
</table>
</center>
</body>
</html>
startts3.php =
<?php
$name = $_POST["name"];
header("Location: ts3server://serverip?port=11password=123&nickname=$name");
exit;
?>
You can try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p><input type="text" name="name" value="UserInput"/></p>
<p><input type="submit" value="Verbinden" /></p>
</form>
<script>
$("form").submit(function(event) {
event.preventDefault();
window.location.href = "ts3server://serverip?port=11&password=123&nickname=" + $("input[name=name]").val();
});
</script>
It doesn't actually submit the form: JavaScript takes over and opens it by itself.
EDIT As per request, I've included the JS alongside the HTML to show how it can be used.
If I got you right, I would do something like:
<form action="http://www.link.xx?123&456" method="GET" target"_blank">
<p><input type="text" name="name" value="UserInput"/></p>
<p><input type="submit" value="Verbinden" /></p>
</form>
You can use GET form method to this (if it's ok that your port and pass place in html)
What you should do is that place your parameters that need send in hidden inputs and set action = your target : ts3server://serverip
so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
</head>
<body>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="200" id="LayoutBereich5" style="background-attachment: fixed; border: 1px solid rgb(179,0,180); margin: 1px; height: 50px;" >
<tr align="center" valign="top">
<td>
<form action="ts3server://serverip" method="get">
<input type="hidden" name="port" value="11" />
<input type="hidden" name="password" value="123" />
<p>Namen bitte anpassen:
<p><input type="text" name="nickname" value="InGameName|RealName"/></p>
<p><input type="submit" value="Verbinden" /></p>
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
I have this form, it works fine but I need the tos2 checkbox to be as disabled until the user clicks to show the TOS. Only then the user will be able to check the checkbox.
If anyone can give me a hint go get this working, it will be great.
Thanks in advance.
<?php
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#form1").validate();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".flip").click(function() {
$(".panel").slideToggle("slow");
});
});
</script>
<script type="text/javascript">
$(document).ready(function($) {
$("input[name$='enable']").click(function(){
if ($(this).is(':checked')) {
var remove = '';
$('input.textbox:text').attr ('value', remove);
$('input.textbox:text').attr("disabled", true);
$('input.textbox:checkbox').attr("disabled", true);
}
else if ($(this).not(':checked')) {
$('input.textbox:checkbox').attr("disabled", false);
$('input.textbox:text').attr("disabled", false);
}
}); });
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
</head>
<body>
<div id="content" align="center">
<div id="wrapper" style="width:550px !important;">
<form method="post" action="inserting-process.php" id="form1" onsubmit="return validateForm()" class="signupform" name="signupform">
<input type="hidden" name="allowlang" id="allowlang" value="no" />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="enable" id="enable" value="" style="width:15px !important"/>
The package has not been received.</td>
</tr>
<tr>
<td><input type="checkbox" name="2enable" id="3enable" value="SI" style="width:15px !important"/>
There has been an issue.</td>
</tr>
</table>
<br />
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td width="120px"><strong>Name:</strong></td>
<td><input type="text" name="fname" id="fname" class="textbox required" size="30"/></td>
</tr>
</table>
<br />
<h4 align="left" style="padding-left:5px; color:#d40000;">TOS
</h4>
<div id="showHideDiv" style="display:none;">
<p align="left" style="padding-left:5px;">
Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service
</p>
<br />
</div>
<table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">
<tr>
<td><input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important" class="textbox required" />
I agree with the TOS.</td>
</tr>
<tr>
<td height="50"></td>
<td> <br /><button id="registerButton" type="submit" style="float:left;">Send Data</button></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
First of all, set your checkbox disabled as default:
<input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important" class="textbox required" disabled="disabled" />
In your JS function, when you show the text at "display:block;" you also enable checkbox:
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
document.getElementById("tos2").disabled = false ;
}
}
Here's all working: http://jsfiddle.net/3ELhv/
Now user only can select this checkbox when open the TOS
é #TOISS
I'm trying to code a checkbox that must be checked in order for the "Submit" button on a form to be enabled. I first tried using a linked file to no avail; now even inserting the script doesn't seem to work. Can anyone help? The entire code for the page is posted below. Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" /><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
Your function is not "listening" for an onchange event.
Use this instead. Notice I changed the checkbox to have an onclick event.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
function enableSubmitButton() {
if (document.getElementById("acknowledgment").checked == true)
document.getElementById("submitmessage").disabled = false;
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" onclick="enableSubmitButton()"><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
You should place the javascript below the definition of the items. HTML is interpreted linearly. This means that the Javascript is executed in the beginning when no items is known as "acknowledgement"
put some function name inside a script
<script type="text/javascript">
function checker()
{
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
and then you will call function in button onClick event
<form action="actionemail.php" method="post">
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled onclick="checker();"/>