I would like to programmatically Power on a Server Using SuperMicro Web GUI.
Initially the login page form http://server1 code is
<form name="form1" action="/cgi/login.cgi" method="post" autocomplete="off">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_USERNAME)
</script>Username
</label>
<input name="name" size="20" maxlength="64" style="width:146px;" type="text" onkeydown="checkEnt(event)">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_PASSWORD)
</script>Password
</label>
<input name="pwd" size="20" maxlength="64" style="width:146px;" type="password" onkeydown="checkEnt(event)">
<input id="login_word" class="btnStyle" name="Login" type="button" onclick="javascript: checkform(this)" value="login">
</form>
After Typing the userename:password as ADMIN:PASSWORD it goes to a control page http://server1/cgi/url_redirect.cgi?url_name=mainmenu where the server can be switched on by clicking a button whose code is given below
<input type="button" class="btnStyle" id="btn_poweron" align="left" value="Power On">
The Entire HTML Code of the Login Page is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no_cache">
<meta name="ATEN International Co Ltd." content="(c) ATEN International Co Ltd. 2010">
<title></title>
<!-- <link rel="shortcut icon" href="../images/favicon.ico"> -->
<link rel="stylesheet" href="../css/basic.css" type="text/css">
<script language="JavaScript">
if (window != top)
top.location.href = "/"; //location.href;
</script>
<style type="text/css"></style>
<script language="JavaScript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<script language="JavaScript" type="text/javascript">
var lang_setting;
lang_setting = ReadCookie("language");
if (lang_setting == null) {
CreateCookie("langSetFlag", "0");
CreateCookie("language", "English");
lang_setting = "English";
}
document.write("<script type=\"text/javascript\", src = \"../js/lang/" + lang_setting + "/lang_str.js\"><\/script>");
function checkform() {
if (Trim(form1.name.value) == "") {
alert(lang.LANG_LOGIN_INVALID_USERNAME);
form1.name.focus();
return;
}
if (Trim(form1.pwd.value) == "") {
alert(lang.LANG_LOGIN_INVALID_PASSWORD);
form1.pwd.focus();
return;
}
document.form1.submit();
return;
}
function checkEnt(e) {
var key = window.event ? e.keyCode : e.which;
if (key == 13) {
checkform();
}
}
function PageInit() {
var msg = document.getElementById("login_word");
msg.setAttribute("value", lang.LANG_LOGIN_LOGIN);
return;
}
</script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
</head>
<body onload="PageInit()">
<table style="margin: 0px; height: 100%; width: 100%" border="0" background="#FFFFFF" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 25%; vertical-align: bottom; text-align: center">
<table style="margin: 0 auto;" border="0" width="412px">
<tbody>
<tr>
<td>
<img src="../images/logo.gif" style="margin: 0px; padding: 0px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="width: 100%">
<td style="height: 75%; vertical-align: top; text-align: center">
<table class="login">
<tbody>
<tr>
<td>
<h3><script>document.writeln(lang.LANG_LOGIN_PROMPT);</script>Please Login
</h3>
<form name="form1" action="/cgi/login.cgi" method="post" autocomplete="off">
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_USERNAME)
</script>Username
</label>
<input name="name" size="20" maxlength="64" style="width:146px;" type="text" onkeydown="checkEnt(event)">
<br>
<br>
<label style="width:85px; text-align:left; margin-right: 2px;">
<script>
document.writeln(lang.LANG_LOGIN_PASSWORD)
</script>Password
</label>
<input name="pwd" size="20" maxlength="64" style="width:146px;" type="password" onkeydown="checkEnt(event)">
<br>
<br>
<input id="login_word" class="btnStyle" name="Login" type="button" onclick="javascript: checkform(this)" value="login">
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
And the Entrie HTML Code of the PowerOn Page is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Pragma" content="no_cache">
<meta name="ATEN International Co Ltd." content="(c) ATEN International Co Ltd. 2010">
<title></title>
<!-- <link rel="shortcut icon" href="../images/favicon.ico"> -->
<script language="JavaScript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
var lang_setting;
/*
EraseCookie("langSetFlag");
EraseCookie("language");
*/
EraseCookie("mainpage");
EraseCookie("subpage");
EraseCookie("RELOAD");
lang_setting = ReadCookie("language");
if (lang_setting == null) {
CreateCookie("langSetFlag", "0");
CreateCookie("language", "English");
lang_setting = "English";
}
document.write("<script type=\"text/javascript\", src = \"../js/lang/" + lang_setting + "/lang_str.js\"><\/script>");
onunload = function() {
var url = '/cgi/logout.cgi';
var pars = '?time_stamp=' + (new Date());
var myAjax = new Ajax.Request(
url, {
method: 'post',
parameters: pars
} //reigister callback function
);
}
-->
</script>
<script type="text/javascript" ,="" src="../js/lang/English/lang_str.js"></script>
<style type="text/css"></style>
</head>
<frameset cols="100%,*" border="0" frameborder="no" framespacing="0">
<frame src="../cgi/url_redirect.cgi?url_name=topmenu" id="TOPMENU" name="topmenu" scrolling="yes" noresize="false" marginheight="0" marginwidth="0">
</frameset>
</html>
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>
I am having an issue getting jquery timepicker change event to trigger. I need to update a field immediately after selecting a time. Here is the code thus far
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" type="text/css" href="style/tabs.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<script>
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
This is abbreviated code but it should still do what I am trying to get it to do. What I need it to do is on a time select the inpute with the ID d_time should update the default value as described in the above function but for some reason I can't get it to trigger. Before I was using a select option for the time and it was working fine, this method I am clueless.
I don't use javascript or jquery often, a little help would be appreciated. I read the documentation on the change event but it didn't really help.
Thanks in advance.
You can trigger your action thanks to the "changeTime" event of timepicker.js (doc). Btw, your timepicker.js version was old.
So you can try this :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.js"></script>
<script>
$('document').ready(function(){
$('#time').timepicker();
$('#time').on('changeTime', function() {
var x = $("#time").val();
$('#d_time').val("Maintenance Tonight - " +x);
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if ($('#default').is(':checked')) {
$('#default_subject').css('display','block');
$('#custom_subject').css('display','none');
}
else if ($('#custom').is(':checked')) {
$('#custom_subject').css('display','block');
$('#default_subject').css('display','none');
}
}
</script>
<td>
<input type="radio" onclick="subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="default" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" type="text" value="custom"/>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
put the on change function on a document ready
$( document ).ready(function() {
$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
}
the thing is that the element is not created in the time you fire the functon so you need to wait untill the document is ready or put this function at the end of the document.
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
try this
$('#time').on('change', function() {
var x = document.getElementsByName("time")[0].value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
because getElementByName is not function use getElementsByName instead with index of first element
I have this function and HTML file:
<%#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">
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%#taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
<link href="resources/css/stiylesheet1.css" rel="stylesheet" media="screen">
<link href="resources/css/printStyle.css" rel="stylesheet" media="print">
<title></title>
<script type="text/javascript">
window.onload = function () {
document.getElementById("cancelSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("saveSubSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubSubjectDialog").close();
});
document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
document.getElementById("saveSubjectDialog").addEventListener('click', function(e) {
e.preventDefault();
document.getElementById("addSubjectDialog").close();
});
}
function updateSubSubject(param)
{
selectList();
document.getElementById("addSubSubjectDialog").showModal();
document.getElementById("Departments_Select").value=param;
}
function selectList(){
var selectDepartment=document.getElementById("Departments_Select");
var selectSubjects=document.getElementById("Subjects_Select");
var departmentsArray =getList("departments");
var subjectsArray= getList("subjects");
for (var i = 0; i < departmentsArray.length; i++) {
var departmentsOption = document.createElement("option");
departmentsOption.value = departmentsArray[i];
departmentsOption.text = departmentsArray[i];
departmentsOption.name = departmentsArray[i];
selectDepartment.appendChild(departmentsOption);
}
for (var i = 0; i < subjectsArray.length; i++) {
var subjectsOption = document.createElement("option");
subjectsOption.value = subjectsArray[i];
subjectsOption.text = subjectsArray[i];
subjectsOption.name = subjectsArray[i];
selectSubjects.appendChild(subjectsOption);
}
}
</script>
</head>
<body class="grad" style="font-family: 'Open Sans', sans-serif;">
<div class="header"
style="height: 100px; background-image: url(resources/images/streep_green.gif); margin: 0px;">
</div>
</div>
<div align="center" class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="main"
style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">
<div class="searchDiv" style="margin-top:5%;width:50%;overflow-y: scroll;overflow-x: hidden; height:500px" >
<form:form method="post" modelAttribute="sub_subjects">
<table dir="rtl" class="table" >
<th><label style="float:right;"><fmt:message key="subjectName" /></label></th>
<th><label style="float:right;"><fmt:message key="subSubjectName"/></label></th>
<th><label style="float:right;"><fmt:message key="department" /></label></th>
<c:forEach items="${sub_subjects.sub_subjects_list}" var="subsubject" varStatus="status" >
<tr id="tr">
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].subjectObj.view" value="${subsubject.subjectObj.view}"/>${subsubject.subjectObj.view}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].description" value="${subsubject.description}"/>${subsubject.description}</td>
<td ><form:hidden path="" name="sub_subjects_list[${status.index}].departmentObj.inCurrentLanguage" value="${subsubject.departmentObj.inCurrentLanguage}"/>${subsubject.departmentObj.inCurrentLanguage}</td>
<td >
<input id="editSubSubject" onClick="updateSubSubject("this is the text")" style="width:30%; height: 80%;" type="button"> </input>
</td>
</tr>
</c:forEach>
</table>
<br/>
</div>
</form:form>
</div>
</div>
</div>
</div>
</div>
<dialog id="addSubSubjectDialog" style="width:25%; height:35%;">
<div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_sub_subject_dialog_title" /></h2></div>
<form action="addSubSubject" method="post" >
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%;"><input id="subSubjectName" name="subSubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_sub_subject_name" /> </h2>
</div>
<div style="width:100%; hegit:20%;">
<h2 style="font-size:100%; ">
<h2 style="float:right; width: 20%; font-size: 100%;">
<fmt:message key="select_subject" /> </h2>
<select id="Subjects_Select" name="Subjects_Select" class="form-control" style="width: 50%; text-align:right; float:right;"> </select>
</h2>
</div>
<div style="width:100%; hegit:20%; margin-top: 15%;">
<h2 style="font-size:100%;">
<h2 style="float:right; width: 20%; font-size: 100%;"> <fmt:message key="select_department" /></h2>
<select id="Departments_Select" name="Departments_Select" class="form-control" style="width: 50%;text-align:right;float:right; "> </select>
</h2>
</div>
<div style="height: 60px;margin-top:30% ;">
<fmt:message key="save" var="save"/>
<input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>
<button id="cancelSubSubjectDialog" class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>
</form>
</div>
</dialog>
</body>
<script type="text/javascript">
function getList(listName){
var ListFromDB = [];
if(listName=="departments")
{
<c:forEach items="${departmentsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.inCurrentLanguage}"/>" );
</c:forEach>
}
else if(listName=="subjects")
{
<c:forEach items="${subjectsList}" var="listItem">
ListFromDB.push( "<c:out value="${listItem.description}"/>" );
</c:forEach>
}
return ListFromDB;
}
</script>
</html>
The problem is that when I run this HTML file and click on the "editSubSubject" button nothing happens. The JavaScript function doesn't get called. When I remove the params of this function and call it like this: onClick="updateSubSubject()" it works fine and opens the dialog,
What is wrong in my code?
You are escaping your double quotes here, which is causing the error:
onClick="updateSubSubject("this is the text")"
You need to either escape the double quotes (using ") or use single quotes:
onClick="updateSubSubject('this is the text')"
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();"/>