Forgive me but i am new at this. I have a php script that generates a HTML select element which dynamically populates the options with contact information generated from a mySQL database. the contact information include the firstname,second name and phone number. I have created a second HTML select element which is empty to begin with.
two java script funnctions were created. the first is called addcontacts the job of this function is to remove the contacts from the first select element and add them into second select element. the second javascript functions, removeContacts, does it the other way round.
once all the desired contacts are added to the second select element, i would like only the phone numbers to be added to a php array. the idea is that an sms message is sent to the numbers selected.
this is my code,
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sender</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script>
function addContact()
{
var cont = document.getElementById("contacts");
var snd = document.getElementById("send");
var opt = document.createElement("option");
for (var i=0; i <cont.options.length; i++)
{
if(cont.options[i].selected == true)
{
var selOpt = cont.options[i];
opt.value = selOpt.value;
opt.text = selOpt.text;
try
{
snd.add(opt,null);
cont.remove(i,null);
}
catch(error)
{
snd.add(opt);
cont.remove(i);
}
i--;
}
}
//snd.options.add(opt);
//opt.text = name;
//opt.name = id;
}
function removeContact()
{
var cont = document.getElementById("send");
var snd = document.getElementById("contacts");
var opt = document.createElement("option");
for (var i=0; i <cont.options.length; i++)
{
if(cont.options[i].selected == true)
{
var selOpt = cont.options[i];
opt.value = selOpt.value;
opt.text = selOpt.text;
try
{
snd.add(opt,null);
cont.remove(i,null);
}
catch(error)
{
snd.add(opt);
cont.remove(i);
}
i--;
}`enter code here`
}
}
</script>
<h2>Sender- Send Message</h2>
<form method="post" action="send.php">
<fieldset id="message">
<?php
echo 'Hello '. $_SESSION['username'].' <br/>';
?>
<br/>
<label for="firstname">Please enter your name:</label>
<input type="text" id="firstname" name="firstname" /><br />
<br/>
<label for="message">Please type your message</label>
<br/>
<textarea id="message" name="message"></textarea><br />
<br/>
<br />
<?php
$host="localhost"; // Host name
$username="root"; // Mysql username
$password=""; // Mysql password
$db_name="contacts"; // Database name
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$userID = $_SESSION['userID'];
$query = "SELECT contactID, firstName, secondName, phone_number FROM phone_numbers WHERE userID = $userID ";
$result=mysql_query($query);
$phone_numbers = array();
echo "<select name='contacts' id='contacts' multiple
style='width:200px'>";
while($row = mysql_fetch_array($result)) {
echo "<option value=".$row['contactID']. ">".$row['firstName'].' '.$row['secondName'].' - ' .$row['phone_number']."</option>";
}
echo "</select>";
?>
<input type="button" onclick="addContact()" value="Add"/>
<input type="button" onclick="removeContact()" value="Remove"/>
<br/>
<select name="send" id="send" multiple style="width:200px">
<input type="submit" value="Add Contact" name="addcontact" />
</select>
<br />
<br />
<label for="number"> Or type in a single number: </label>
<br/>
<input type= "text" id="number" name="number"/>
<br/>
<br />
<input type="submit" value="Send Message" name="submit" />
<input type="submit" value="Logout" name="logout" />
</fieldset>
</form>
</body>
</html>
