Force update screen, reboot server and refresh with Javascript - javascript

I'm trying to do a web server based application. I'm working on the internal configuration of the server and I want it to be able to be modified by the user. I'm using a raspberry pi 3 as web server.
Right now I'm trying to configure the Static IP, for this I have modified the dhcpc.conf file with php code. After that I want to reboot the raspberry so it takes the new configuration. I am already able to do that, but when I force the reboot, the server doesn't send the information to the web browser and I am getting page not found.
What I want to know is how to force the server to update the web page before the shutdown, and then how (using javascript may be) reload the page after XX seconds (when the raspberry is booted again).
This is my code until now:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Configuración: Red</title>
<link href="/TrafficVC/ccs/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/configuraRed.js"></script>
<style>
</style>
</head>
<body>
<h1 class="pagesTitle">Configuración: Red</h1>
<form action="" method="post" name="chNetConf">
<table class="tbChNetConf" id="chNetConfTable">
<tr>
<td class="izq">Hostname:</td>
<td class="der"> <input type="text" name="Hostname" <?php echo "value=".gethostname();?>> </td>
</tr>
<tr>
<td class="izq" style="font-weight:bold">Conexión Ethernet: </td>
<td class="der">
<label>
<span>IP Estática</span>
<input type="checkbox" id="chbEthStaticEnable" name="chbEthStaticEnable" onchange="enableEthStatic(this)">
</label>
</td>
<td class="izq" style="font-weight:bold">Conexión Wireless: </td>
<td class="der">
<label>
<span>Habilitar</span>
<input type="checkbox" id="chbWlanEnable" name="chbWlanEnable" onchange="enableWlan(this)">
</label>
<label>
<span>IP Estática</span>
<input type="checkbox" id="chbWlanStaticEnable" name="chbWlanStaticEnable" onchange="enableWlanStatic(this)" disabled>
</label>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align:top">
<table class="tbChNetConf">
<tr>
<td class="izq">IP:</td>
<td class="der">
<input type="text" id="EthIP1" name="EthIP1" disabled style="width:15%">
.
<input type="text" id="EthIP2" name="EthIP2" disabled style="width:15%">
.
<input type="text" id="EthIP3" name="EthIP3" disabled style="width:15%">
.
<input type="text" id="EthIP4" name="EthIP4" disabled style="width:15%">
</td>
</tr>
<tr>
<td class="izq">Mascara:</td>
<td class="der">
<input type="text" id="EthMask1" name="EthMask1" disabled style="width:15%">
.
<input type="text" id="EthMask2" name="EthMask2" disabled style="width:15%">
.
<input type="text" id="EthMask3" name="EthMask3" disabled style="width:15%">
.
<input type="text" id="EthMask4" name="EthMask4" disabled style="width:15%">
</td>
</tr>
<tr>
<td class="izq">Puerta de enlace:</td>
<td class="der">
<input type="text" id="EthGate1" name="EthGate1" disabled style="width:15%">
.
<input type="text" id="EthGate2" name="EthGate2" disabled style="width:15%">
.
<input type="text" id="EthGate3" name="EthGate3" disabled style="width:15%">
.
<input type="text" id="EthGate4" name="EthGate4" disabled style="width:15%">
</td>
</tr>
</table>
</td>
<td colspan="2";>
<table class="tbChNetConf">
<tr>
<td class="izq">SSID:</td>
<td class="der">
<input type="text" id="WlanSSID" name="WlanSSID" disabled style="width:80%">
</td>
</tr>
<tr>
<td class="izq">Contraseña:</td>
<td class="der">
<input type="password" id="WlanPass" name="WlanPass" disabled>
</td>
</tr>
<tr>
<td class="izq">IP:</td>
<td class="der" >
<input type="text" id="WlanIP1" name="WlanIP1" disabled style="width:15%">
.
<input type="text" id="WlanIP2" name="WlanIP2" disabled style="width:15%">
.
<input type="text" id="WlanIP3" name="WlanIP3" disabled style="width:15%">
.
<input type="text" id="WlanIP4" name="WlanIP4" disabled style="width:15%">
</td>
</tr>
<tr>
<td class="izq">Mascara:</td>
<td class="der" style="table-layout: fixed; width=100%">
<input type="text" id="WlanMask1" name="WlanMask1" disabled style="width:15%">
.
<input type="text" id="WlanMask2" name="WlanMask2" disabled style="width:15%">
.
<input type="text" id="WlanMask3" name="WlanMask3" disabled style="width:15%">
.
<input type="text" id="WlanMask4" name="WlanMask4" disabled style="width:15%">
</td>
</tr>
<tr>
<td class="izq">Puerta de enlaceqe:</td>
<td class="der">
<input type="text" id="WlanGate1" name="WlanGate1" disabled style="width:15%">
.
<input type="text" id="WlanGate2" name="WlanGate2" disabled style="width:15%">
.
<input type="text" id="WlanGate3" name="WlanGate3" disabled style="width:15%">
.
<input type="text" id="WlanGate4" name="WlanGate4" disabled style="width:15%">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center;">
<input type="submit" value="Guardar" name="submitChNet">
</td>
</tr>
</table>
</form>
<?php
if (isset($_GET['Err']))
{
echo "Error " . $_GET['Err']. ": ";
if ($_GET['Err']=="EthIP")
echo "La dirección IP de la conexión ethernet no es correcta";
if ($_GET['Err']=="EthMask")
echo "La máscara de la conexión ethernet no es correcta";
if ($_GET['Err']=="EthGate")
echo "La puerta de enlace de la conexión ethernet no es correcta";
}
?>
</body>
</html>
<?php
if (isset($_POST['submitChNet']))
{
include('phpCode/chNetConf.php');
}
?>
The file phpCode/chNetConf.php after writing the new file calls another shutdown.php file:
<?php
echo exec('sudo reboot',$output);
?>
I hope I'm clear enough and you can help me.
By the way, there is no need of security. Also, I know this can be done because I took the idea on how my router can be configured.

Related

Problem with javascript with alert are not showing

Hi so i have this sign up to register new users to database but the alert of JavaScript for register users is not working but the for example on the same page to login the user is working... i mean if u fail a password it will show the password is wrong, but if u try to register the user enter in data base but there isn't any alert saying "New record created successfully"
-----------------------------------register to db and alert----------------------
<?php
session_start();
$db=mysqli_connect("localhost","root", "","compras");
if(isset($_POST['signup'])) {
$fname = ($_POST['fname']);
$lname = ($_POST['lname']);
$password = ($_POST['password']);
$email = ($_POST['email']);
$phone = ($_POST['phone']);
$sql;
$password=md5($password);
if (!$db) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "Insert into users(fname,lname,phone,email,password) values ('$fname','$lname','$phone','$email','$password')";
if (mysqli_query($db, $sql))
{
echo '<script type="text/javascript">alert("New record created successfully");</script>';
header("Location:http://localhost/Fly With US/index.php");
}
else
{
echo '<script type="text/javascript">alert("Error Occured");</script>';
header("Location:http://localhost/Fly With US/index.php");
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
}
?>
---------------------------------main page--------------------------------------
<?php
session_start();
if(isset($_SESSION['username'])){
header("Location: cat_type.php");
}
?>
<html>
<head>
<link rel="stylesheet" href="css/head.css">
<link rel="icon" href="res/flywithus-pt.png" sizes="16x16">
<link href="https://fonts.googleapis.com/css?family=Bgrree+Serif" rel="stylesheet">
<script type="text/javascript" src="scripts/signupForm.js"></script>
<script type="text/javascript" src="scripts/loginForm.js"></script>
<title>Fly With Us | Buy Drones and Computers.</title>
</head>
<body>
<h1><center><img src="res/flywithus-png.png"></center></h1>
<!-- LOGIN -->
<div id="login">
<form name="loginForm" method="post" action="log.php">
<table align="left" width="150%">
<tr>
<td align="center">
<h2>Login</h2>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" id="user" placeholder="Email" required>
</td>
</tr>
<br>
<tr>
<td>
<input type="password" name="password" id="pass" placeholder="Password" required>
</td>
</tr>
<tr>
<td>
<input type="submit" name="login" value="Let me in.." class="click">
</td>
</tr>
<!--
<tr>
<td colspan="2" class="signin">
<input type="image" src="signin_google.png" alt="Login with Google" width="50%" height="50%">
</td>
</tr>
<tr>
<td colspan="2" class="signin">
<input type="image" src="signin_fb.png" alt="Login with FB" width="50%" height="50%">
</td>
</tr>
//-->
</table>
</form>
</div>
<!-- SIGNUP -->
<form name="signupForm" method="post" action="pro.php" id="signup" onsubmit="return ValidateFname() || ValidateLname() || ValidateEmail() || ValidateMobile() ">
<table align="right">
<tr>
<td align="center" colspan="2">
<h2>New Here? Register with us..</h2>
</td>
</tr>
<tr>
<td>
<input type="text" name="fname" placeholder="First Name" required>
</td>
<td>
<input type="text" name="lname" placeholder="Last Name" required>
</td>
</tr>
<tr>
<td colspan="2">
<input type="email" name="email" placeholder="Email" required>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="phone" placeholder="Contact Number" required>
</td>
</tr>
<tr>
<td colspan="2">
<input type="password" name="password" placeholder="Password" required>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="signup" value="Sign Up" class="click">
</td>
</tr>
</table>
</form>
</body>
</html>
That's because PHP (header) will still read after JavaScript (alert). In other words, the alert is actually shown but the index.php is being load at the same time so the alert appears not showing.
won't work:
echo '<script type="text/javascript">alert("Error Occured");</script>';
header("Location:http://localhost/Fly With US/index.php");
will work:
echo '<script type="text/javascript">
alert("Error Occured");
window.open("index.php","_self");
</script>';

Using Javascript to set input to readonly

I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.

Form does not do anything when pressing Submit

The form is missing an action url, since the javascript takes care of that.
I recently fixed an issue with not labeling the submit button as type=submit that caused ie 6 and 7 to not do anything when clicking on the submit..
But I recently still get complains on the form not doing anything when someone presses the submit button.
My only last guess would be that they disabled javascript...
If anyone have some other point of view on this Please Take a look. Could be old Browsers issue, could be code issue..
JSfiddle
http://jsfiddle.net/wn21av2y/1/
HTML
<form id="form1" name="form1" method="post" style="transition: 3s height; overflow: hidden;">
<table width="100%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td width="25%" align="right">Practitioner's Full Name<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="name" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td width="25%" align="right">Type<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="type" required="">
<option value="MD">MD</option>
<option value="OD">OD</option>
<option value="OTHER">OTHER</option>
</select>
</td>
</tr>
<tr>
<td align="right">Street Address<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="address" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">City<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="city" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">State<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="state" id="state" required="">
<option value="AL" selected="">Alabama</option>
<option value="AK">STATES</option>
</select>
</td>
</tr>
<tr>
<td align="right">Zip<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="zip" type="text" placeholder="12345-1234" required="" pattern="(\d{5}([\-]\d{4})?)">
</td>
</tr>
<tr>
<td align="right">Phone<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="phone" type="text" required="" placeholder="123-456-7890" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
</tr>
<tr>
<td align="right">Email<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="email" type="email" required="" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
</td>
</tr>
<tr>
<td align="right">Signature ( Type Name )<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="sig" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">Today's Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date1" required="">
</td>
</tr>
<tr>
<td align="right">State License Number<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="lic_numb" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">License Exp. Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date2" required="">
</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check1" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">My signature certifies that
<br>1) The information provided</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check2" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">I verify that the recipient is eligible to receive samples.<br>
</td>
</tr>
<tr>
<td width="25%" align="right"> </td>
<td style="text-align: left">
<button type="submit" class="submits">Submit</button>
</td>
</tr>
</tbody>
</table>
</form>
script
jQuery(function($) {
$(".datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
$("#form1").submit(function() {
var url = "example.com/process.php"; // the script where you handle the form input.
$.post(url, {
name: $("input[name='name']").val(),
type: $("select[name='type'] option:selected").text(),
address: $("input[name='address']").val(),
city: $("input[name='city']").val(),
state: $("select[name='state'] option:selected").text(),
zip: $("input[name='zip']").val(),
phone: $("input[name='phone']").val(),
email: $("input[name='email']").val(),
sig: $("input[name='sig']").val(),
date: $(".date1").datepicker("getDate"),
lic_numb: $("input[name='lic_numb']").val(),
lic_date: $(".date2").datepicker("getDate"),
code: 'tEH4s'
}).done(function(data) {
$(".result").html(data);
$('input').val('');
$('#form1').css("height", "0");
});
return false; // avoid to execute the actual submit of the form.
});
});
An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form. - Source
To get it to work in IE6 and IE7 you need to change the button tag to instead be:
<input type="submit" class="submits" value="Submit" />
To my mind you need an action for the form to be submitted, as it's said at the w3c HTML 4 spec.

how to move previous page and show values in fields?

i make two web page,i want to get data from first page on second page,if user click edit message then move first page and show the entered data of user,here is my code:
first.php
<h1>Compose Message</h1>
<script type="text/javascript" src="<?=MURL?>/js/ckeditor/ckeditor.js"></script>
<script src="//ticket_inspector_new.com/js/tooltip.js" type="text/javascript"> </script>
<form action="" method="post" id="form" enctype="multipart/form-data">
<table class="form">
<tr class="heading">
<th style="width: 25%;">Recipients</th>
<th style="width: 75%;"> </th>
</tr>
<tr>
<td>
<label for="campaigns">Campaigns</label>
</td>
<td>
<select name="events[]" multiple size="10" >
<?
$select = sprintf ("SELECT event_id,event_name
FROM `events`
WHERE (`user_id` = '%s') order by event_name",
$GLOBALS ['mysqli']->real_escape_string ($_SESSION['user_id']));
$res = $GLOBALS ['mysqli']->query ($select) or die ($GLOBALS ['mysqli']->error . __LINE__);
if ($res->num_rows > 0)
{
while($row = $res->fetch_assoc ())
{
?>
<option value="<?=$row['event_id']?>"><?=$row['event_name']?></option>
<?
}
}
?>
</select>
</td>
</tr>
<tr>
<td style="padding-left:95px;">
<label for="fromdate">Registrants From</label>
</td>
<td style="padding-left:10px;">
<input name="fromdate" type="text" value="" class="calendar time" id="fromdate" size="30" />
<label for="todate">To</label>
<input name="todate" type="text" value="" class="calendar time" id="todate" size="30" />
</td>
</tr>
<tr>
<td>
<label for="upload">Upload CSV</label>
<span class="helptip">
Select CSV file for upload.
</span>
</td>
<td>
<input name="uploadcsv" type="file" />
</td>
</tr>
<tr class="heading">
<th style="width: 25%;">Message</th>
<th style="width: 75%;"> </th>
</tr>
<tr>
<td>
<label for="description">Description(optional)</label>
</td>
<td>
<input name="description" type="text" value="" id="description" size="35" />
</td>
</tr>
<tr>
<td>
<label for="subject">Subject</label>
</td>
<td>
<input name="subject" type="text" value="" id="subject" size="35" />
</td>
</tr>
<tr>
<td>
<label for="fromname">From Name</label>
</td>
<td>
<input name="fromname" type="text" value="" id="fromname" size="27" />
</td>
</tr>
<tr>
<td>
<label for="replyto">Reply To</label>
</td>
<td>
<input name="replyto" type="text" value="" id="replyto" size="27" />
</td>
</tr>
<tr>
<td>
<label for="senddatetime">Send Date/Time</label>
<span class="helptip">
Click the calender to select the date you wish ans select time zone from select box.
</span>
</td>
<td>
<input name="senddatetime" type="text" value="" class="calendar time" id="senddatetime" size="30" />
<select name="timezone" id="timezone">
<option value="Pacific/Honolulu">Hawaii-Aleutian Time (Honolulu, no DST)
</option><option value="America/Anchorage">Alaska Time (Anchorage)</option><option value="America/Los_Angeles"
selected="selected">Pacific Time (Los Angeles)</option><option value="America/Denver">Mountain Time (Denver)</option><option
value="America/Phoenix">Mountain Time (Phoenix, no DST)</option><option value="America/Chicago">Central Time (Chicago)
</option><option value="America/Regina">Central Time (Regina, no DST)</option><option value="America/New_York">Eastern Time
(New York)</option><option value="America/Halifax">Atlantic Time (Halifax)</option>
</select>
<script>
var list = document.getElementById('timezone');
var selval = "0";
for(var i = 0; i < list.options.length; ++i)
{
if(list.options[i].value==selval)
{
list.options[i].selected = true;
i=list.options.length;
}
}
</script>
</td>
</tr>
<tr>
<td>
<label for="message">Message</label>
</td>
<td colspan="2">
<textarea name="message" class="ckeditor" id="message" cols="90" rows="15" style="width: 100%;"></textarea>
</td>
</tr>
</table>
<table class="form">
<tr class="heading">
<th style="width:100%; background-color:#C4C4FE; font-size:10px; font-weight:normal;">Emails can take upto 30 minutes to Send.We have zero tolerance for spam messages.Every message sent out is reviewed for spam.Any spam messages sent will result in termination of account.</th>
</tr>
</table>
<p class="center_align">
<input type="submit" class="button arrow" name="submit_skip" value="Continue" />
</p>
</form>
and here is my second page:
<h1>Confirm Message</h1>
<?
$recepients=0;
$count=count($_POST['events']);
?>
<input type="button" class="button edit" name="submit_skip" value="Edit Message" />
<input type="submit" class="button email" name="submit_email" value="Send Message" />
i want when user click on edit massage it moves previous page and values shown in fields
?>
Since you want to send form to a two different scripts I suggest that you use 2 forms:
<form action="formfilling.php">
<?php
//prepare the recived POST to send back:
foreach( $_POST as $key => $value ){
if( is_array($_POST[$key]) ){ //if post is array e.g. your events[]
foreach( $_POST[$key] as $subvalue ){
echo '<input type="hidden"'
.' name="'.htmlspecialchars($key).'[]"'
.' value="'.htmlspecialchars($subvalue).'">'."\n";
}
} else{
echo '<input type="hidden"'
.' name="'.htmlspecialchars($key).'"'
.' value="'.htmlspecialchars($value).'">'."\n";
}
}
?>
<input type="submit" class="button edit" name="submit_skip" value="Edit Message" />
</form>
<form action="submitemail.php">
<?php //possibly show message? ?>
<input type="submit" class="button email" name="submit_email" value="Send Message" />
</form>
And then in formfilling check if input is not empty if not => echo its value
if( !empty($_POST['inputName']) ) echo htmlspecialchars($_POST['inputName']);
And for the array something like
if( !empty($_POST['inputName']) ){
foreach( $_POST['inputName'] as $val ){
//Test if the current option has the value of $val if so:
echo /*OPTION with SELECTED*/;
}
}
ALWAYS USE HTML ESCAPING when printing/echoing $_POST/$_GET
=> dont trust the users!
=> in PHP there is a htmlspecialchars() function
go to the previous page with javascript
window.history.go(-1)

jQuery Select form field with images

I am trying to create the jquery select field which includes images. (http://designwithpc.com/Plugins/ddSlick)
It seems that there is something wrong with my code, as the console is showing an error:
Uncaught TypeError: Object [object Object] has no method 'ddslick'
HTML
<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){ doTotal(this); calcMenu(this); ddslick(this); });
// ]]></script>
<table id="table1" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Enquiry Date</td>
<td>
<div align="center"><input type="text" name="dateToday" size="25" /></div></td>
</tr>
<tr>
<td>Conference Name</td>
<td>
<div align="center"><input type="text" name="conferenceName" size="25" /></div></td>
</tr>
<tr>
<td>Company Name</td>
<td>
<div align="center"><input type="text" name="companyName" size="25" /></div></td>
</tr>
<tr>
<td>Special Requests</td>
<td><textarea name="comment" rows="5" cols="26"></textarea></td>
</tr>
</tbody>
</table>
<table id="table2" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>First Name</td>
<td>
<div align="center"><input type="text" name="firstName" size="25" /></div></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<div align="center"><input type="text" name="lastName" size="25" /></div></td>
</tr>
<tr>
<td>Tel No</td>
<td>
<div align="center"><input type="text" name="telNo" size="25" /></div></td>
</tr>
<tr>
<td>Cell</td>
<td>
<div align="center"><input type="text" name="cellNo" size="25" /></div></td>
</tr>
<tr>
<td>Email</td>
<td>
<div align="center"><input type="text" name="email" size="25" /></div></td>
</tr>
<tr>
<td><input onclick="formReset()" type="button" value="Reset form" /></td>
</tr>
</tbody>
</table>
<table id="tablex" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<th scope="col" width="30">
<div align="center">Date</div></th>
<th scope="col" width="128">
<div align="center">Amount of Delegates ½ Day Conference # R 240 pp</div></th>
<th width="112">
<div align="center">Amount of Delegates Full Day Conference # R 260 pp</div></th>
<th width="112">
<div align="center">Menu No</div></th>
<th width="112">
<div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
<th width="112">
<div align="center">Total Persons for meals</div></th>
<th width="112">
<div align="center">Amount of Single Rooms # R 480 pp</div></th>
<th width="112">
<div align="center">Amount of Double Rooms # R 720 pp</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="5" /></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="myDropdown">
<select id="myDropdown">
<option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
data-description="Description with Facebook">Facebook</option>
<option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
data-description="Description with Twitter">Twitter</option>
<option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
data-description="Description with LinkedIn">LinkedIn</option>
<option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
data-description="Description with Foursquare">Foursquare</option>
</select>
</div>
</form>
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
If you are using wordpress, try following this steps:
1 - Copy the jquery.ddslick.js file in the /js folder of your theme.
2 - Be sure you have write the correct path to the file in your header.php. Inside the <head> tag you should have something like this:
<script src='<?php echo get_template_directory_uri(); ?>/js/jquery.ddslick.js'></script>
3 - As #Arnelle Balane has point out, you probably should write this piece of code:
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
Inside some script tags:
<script type="text/javascript">
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
</script>
Or, you can put that code inside your custom .js file. That way you don't have to put all the code in the html:
a - Inside your /js folder, make another .js file, something like this: script.js
b - Inside the script.js file, copy the above code without script tags inside a jQuery on ready function, like this:
jQuery(document).ready(function($) {
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
});
4 - Check you have jquery activate on your theme, if not, you can download jquery from here and repeat step 2 for the jQuery file or you can use jQuery from wordpress.
5 - Double check for typos and test if works; if not, is probably something else; keep us informed.
Update: I add more info in the step three, in case of using a external .js file.

Categories