Hi,
I havea problem, I have a website, and I want to take my business a step further with PHP runner,
I don't want to lose some of the Jscript codes that I already did,
I have an "add" page that has 2 multiselect boxes (MSB), and Textbox
MSB1 reads the data from table, and you can select some data and move it to MSB2,
Upon submitting this page, 2 tables should be affected: one to add the new Text in the Text Box, and the other will write the indiviual dataum in MSB2 in a different table
The java script uses Jquery, but reall the idea is what I wrote in above,
This code is as follow
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
<html>
<head>
<title>Txt to Biz Demo</title>
<!-- jquery packed -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>;
<!-- picklist plugin -->
<script type="text/javascript" src="jquery.multiselects-0.3.js"></script>
<script type="text/javascript">
jQuery(function($){
// (OPTIONAL) adjust the width of the select box to the bigger of the two
$("select[name='SelAll']").selectAdjustWidth("select[name='SelSend']");
$("select[name='SelAll']").multiSelect("select[name='SelSend']", {
trigger: "input[name='remove']",
triggerAll: "input[name='removeAll']"
});
$("select[name='SelSend']").multiSelect("select[name='SelAll']", {
trigger: "input[name='add']",
triggerAll: "input[name='addAll']"
});
$("select[name='SelSend']").change(function() {
CountOptions();
});
});
</script>
<script type="text/javascript">
function CountOptions(){
var x=document.getElementById("SelAll");
var y=document.getElementById("TxtAll");
y.value=x.length;
var x=document.getElementById("SelSend");
var y=document.getElementById("TxtSend");
y.value=x.length;
}
</script>
<script LANGUAGE="JavaScript">
// function parameters are: field - the string field, count - the field for remaining characters number and max - the maximum number of characters
function CountLeft(field, count, max) {
// if the length of the string in the input field is greater than the max value, trim it
if (field.value.length > max)
field.value = field.value.substring(0, max);
else
// calculate the remaining characters
count.value = max - field.value.length;
}
</script>
<style type="text/css">
body {
font-size: 0.9em;
font-family: Verdana, Arial, sans-serif;
}
h1 {
font-size: 1.1em;
margin: 10px;
}
h2 {
font-size: 1em;
margin: 10px;
}
p {
margin: 10px 20px;
}
pre {
background-color: #eee;
border: 1px solid #ccc;
padding: 10px;
margin: 0 20px;
width: 80%;
}
table.formTable {
margin: 0 20px;
}
table.formTable td {
padding: 3px;
}
input.button {
background: #ddd url(images/button_bg.gif) left center repeat-x;
border:1px solid #919191;
color:#000000;
font-weight:bold;
font-size: 11px;
margin:0px;
padding:2px 4px;
text-align:center;
margin-right: 5px;
}
label.horizontalLabel {
font-size: 0.8em;
}
table.formTable td.pickListTd {
width: 50px;
}
table.formTable td.pickListRight {
padding-right: 15px;
}
.pickList {
border: 1px solid #ccc;
width: auto;
}
.pickListSelected {
background: url(images/tiny_selected.gif) 1px top no-repeat;
padding-top: 6px;
}
.pickListAvailable {
background: url(images/tiny_available.gif) 1px top no-repeat;
padding-top: 6px;
}
table.formTable td.pickListButtons {
padding: 0;
width: 50px;
}
div.pickListButtons {
padding-top: 20%;
width: 100%;
text-align: center;
}
input.SendButton{
border-color: #ccc;
text-align: center;
width: 100px;
margin-right: 0;
}
input.addButton,
input.removeButton,
input.addAllButton,
input.removeAllButton{
border-color: #ccc;
text-align: center;
width: 30px;
margin-right: 0;
}
input.removeButton,
input.removeAllButton {
margin-top: 5px;
}
input.addAllButton {
margin-top: 15px;
}
</style>
</head>
<form name="Message">
<center>
<body onload="setTimeout('CountOptions()', 100)">
<table id="dogBreedsTable" border="0" cellspacing="0" cellpadding="0" class="formTable">
<tr>
<td >Your Subscribers </label></td>
<td></td>
<td > Send To</label></td>
</tr>
<tr>
<td class="pickListTd">
<div class="pickListSelected">
<select id="SelAll" name="SelAll" size="10" multiple="multiple" class="pickList" title="Your Subscribers" onchange="CountOptions();">
<?php
$db = mysql_connect("localhost", "root", "");
mysql_select_db("mysms");
$strSQL = "SELECT * FROM subscribers ORDER BY DateTime ";
$rs = mysql_query($strSQL);
$nr = mysql_num_rows($rs);
for ($i=0; $i<$nr; $i++) {
$r = mysql_fetch_array($rs);
echo "<OPTION VALUE=\"".$r["CellPhoneNo"]."\">".$r["CellPhoneNo"]."</OPTION>";
}
echo "<script LANGUAGE='javascript'>CountOptions();</SCRIPT>";
?>
</select>
</div>
</td>
<td class="pickListButtons">
<div class="pickListButtons">
<input name="add" type="button" class="button addButton" value="<" title="Choose available and add" onclick="setTimeout('CountOptions()', 100)" >
<input name="remove" type="button" class="button removeButton" value=">" title="Choose selected and remove" onclick="setTimeout('CountOptions()', 100)">
<input name="addAll" type="button" class="button addAllButton" value="<<" title="Add all" onclick="setTimeout('CountOptions()', 100)">
<input name="removeAll" type="button" class="button removeAllButton" value=">>" title="Remove all" onclick="setTimeout('CountOptions()', 100)">
</div>
</td>
<td>
<div class="pickListAvailable">
<select name="SelSend" size="10" multiple="multiple" class="pickList" title="Send To" onchange="CountOptions();">
</select>
</div>
</td>
</tr>
<tr>
<td >
<div >
<input readonly type="text" id="TxtAll" name="TxtAll" size=3 maxlength=3 >
</div>
</td>
<td >
<div class="pickListSelected">
</div>
</td>
<td >
<div class="pickListSelected">
<input readonly type="text" id="TxtSend" name="TxtSend" size=3 maxlength=3>
</div>
</td>
</tr>
</table>
<BR>Message:<BR>
<textarea name="text" title="Please construct your Msg" size="40" rows="5" cols="40
onKeyDown="CountLeft(this.form.text,this.form.left,160);"
onKeyUp="CountLeft(this.form.text,this.form.left,160);">
</TEXTAREA>
<input readonly type="text" name="left" size=3 maxlength=3 value="160">
characters left
<input name="BtnSend" type="button" class="button SendButton"value="Send" title="Send" onclick="setTimeout('alert(\'It is still demo man!!\')', 10)">
</center>
</form>
</html>