Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

HTML <Select multiple > and Javascript

Javascript coding ..

Moderators: macek, egami, gesf

HTML <Select multiple > and Javascript

Postby popeye » Wed Sep 19, 2012 8:47 am

I am having problem retrieving and storing selected options array from a multiple <Select>. Please see below:

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
function SelectAll(SelectedOptions) {
 msg='';
 for (var i=0;i<SelectedOptions.selected.length;i++) {
 msg +=SelectedOptions.options[i].selected;
 {
 alert(msg);
}
</script>
</head>
<body>
<form name="selform" id="selform" method="post">
<select name="fruits[]" multiple size="10">
<option value="Apple">Red Apple</option>
<option value="Pearl">Bosc Pearl</option>
<option value="Grape">Globe Grape</option>
<option value="Orange">California Orange</option>
<option value="Peach">Georgia Peach</option>
</select>
<input type="button" name="submit1" value="Submit" onclick="SelectAll(fruits);">
</form>
</body>
</html>

I can not get anything displyed by the javascript. Thx
User avatar
popeye
New php-forum User
New php-forum User
 
Posts: 120
Joined: Sat Jan 03, 2004 7:06 pm
Location: New York, NY

Re: HTML <Select multiple > and Javascript

Postby TomCornar » Mon Sep 24, 2012 12:06 am

Hi ,

Try the below Code.

Code: Select all
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled</title>
    <script language="javascript" type="text/javascript">
    function SelectAll() {
       
     var SelectedOptions = document.getElementById("fruits");
       
     var msg="";
     for (var i=0;i<SelectedOptions.options.length;i++) {
         if (SelectedOptions.options[i].selected) {

    var selvalue=SelectedOptions.options[i];
     msg +=selvalue.value;
         }
     }
     alert(msg);
    }
    </script>
    </head>
    <body>
    <form name="selform" id="selform" method="post">
    <select name="fruits"  id="fruits" multiple size="10">
    <option value="Apple">Red Apple</option>
    <option value="Pearl">Bosc Pearl</option>
    <option value="Grape">Globe Grape</option>
    <option value="Orange">California Orange</option>
    <option value="Peach">Georgia Peach</option>
    </select>
    <input type="button" name="submit1" value="Submit" onclick="SelectAll();">
    </form>
    </body>
    </html>


Hope this Helps.

Regards,
Tom Cornar
Trinay Technology Solutions
http://www.trinay.com
User avatar
TomCornar
New php-forum User
New php-forum User
 
Posts: 25
Joined: Fri Sep 14, 2012 12:06 am

Please check for me why this form is not validating

Postby ebenezerdodoo » Fri Apr 26, 2013 3:20 am

<!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>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>

<title>Registration form example</title>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */

var errpresent = false;

function validateForm(){

runnerid_validate()
runnerid_validate()
eventid_validate()
date_validate()
fintime_validate()
position_validate()
category_validate()
agegrade_validate()

if (errpresent == true){
alert("Please correct the highlighted errors");
return false;

}
}

// Add error message to invalid data entry

function addMessage(id, text)

{

var textNode = document.createTextNode(text);

var element = document.getElementById(id);

element.appendChild(textNode);

}

// Runner ID Validate

function runnerid_validate()

{

var RunnerID = document.getElementById('RunnerID').value;

var test_expression = /[0-9]+/



if (RunnerID.length >0){

if (test_expression.test(RunnerID)) {

return true;

}

else {

addMessage("runiderr","Must be a number in the range 1-99999");

document.getElementById('runiderr').style.background="yellow";

errpresent =true;

return false;

}

}

else {

addMessage("runiderr","Please enter your Runner ID");

document.getElementById('runiderr').style.background="yellow";
errpresent =true;

return false;

}



}

// Event ID Validate

function eventid_validate()

{

var EventID = document.getElementById('EventID').value;

var test_expression = /[0-9]+/

if (EventID.length >0){

if (test_expression.test(EventID)) {

return true;

}

else {

addMessage("evtiderr","Must be a number in the range 1-99999");

document.getElementById('evtiderr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("evtiderr","Please enter the Event ID");

document.getElementById('evtiderr').style.background="yellow";
errpresent =true;

return false;

}

}
// DATE Validate

function date_validate()

{

var Date = document.getElementById('Date').value;

var test_expression = /^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/

if (Date.length >0){

if (test_expression.test(Date)) {

return true;

}

else {

addMessage("dateerr","Date must be in yyyy-mm-dd format");

document.getElementById('dateerr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("dateerr","Please enter a date in yyyy-mm-dd format");

document.getElementById('dateerr').style.background="yellow";
errpresent =true;

return false;

}

}

// Finish Time Validate

function fintime_validate()

{

var FinishTime = document.getElementById('FinishTime').value;

var test_expression = /^(?:(?:(\d+):)?(\d+):)?(\d+)/



if (FinishTime.length >0){

if (test_expression.test(FinishTime)) {

return true;

}

else {

addMessage("fintimerr","must be in hh:mm:ss format");

document.getElementById('fintimerr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("fintimerr","Please enter a Finish Time in hh:mm:ss format");

document.getElementById('fintimerr').style.background="yellow";
errpresent =true;

return false;

}



}
// Position Validate

function position_validate()

{

var Position = document.getElementById('Position').value;

var test_expression = /[0-9]+/

if (Position.length >0){

if (test_expression.test(Position)) {

return true;

}

else {

addMessage("poserr","Must be a number in the range 1-99999");

document.getElementById('poserr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("poserr","Please enter your Position");

document.getElementById('poserr').style.background="yellow";
errpresent =true;

return false;

}



}

// Category Validate

function category_validate()

{

var CategoryID = document.getElementById('CategoryID').value;

var test_expression = /[0-9]+/



if (CategoryID.length >0){

if (test_expression.test(CategoryID)) {

return true;

}

else {

addMessage("caterr","Must be a number in the range 1-99");

document.getElementById('caterr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("caterr","Please enter your Category ID");

document.getElementById('caterr').style.background="yellow";
errpresent =true;

return false;

}



}

// Age Grade Validate

function agegrade_validate()

{

var AgeGrade = document.getElementById('AgeGrade').value;

var test_expression = /^\s*-?\d+(\.\d{1,2})?\s*/



if (AgeGrade.length >0){

if (test_expression.test(AgeGrade)) {

return true;

}

else {

addMessage("ageerr","Must be a number with two decimal places");

document.getElementById('ageerr').style.background="yellow";
errpresent =true;

return false;

}

}

else {

addMessage("ageerr","Please insert Age Grade");

document.getElementById('ageerr').style.background="yellow";
errpresent =true;

return false;

}

}

/* ]]> */
</script>
</head>

<body>

<h1>Submit Runner Time</h1>

<form name="demo" method="post" ONSUBMIT= return "validateForm()" action="http://mct.tt284.open.ac.uk/b2files/storedata.php">

<table>
<!-- runner id should not be empty and should be a number not a string -->

<tr><td>
Runner Id:

</td><td>

<input type="text" name="RunnerID" id="RunnerID" size="5" maxlength="5"/></td>

<td><p id="runiderr"></p></td></tr>

<!-- event id should not be empty and should be a number not a string -->

<tr><td>
Event Id:

</td><td>

<input type="text" name="EventID" id="EventID" size="5" maxlength="5"/>

</td>

<td><p id="evtiderr"></p></td>

</tr>

<!-- date should not be empty and should be in yyyy-mm-dd format -->

<tr><td>

Date:

</td><td>

<input type="text" name="Date" id="Date" size="10" maxlength="10"/>

</td>

<td><p id="dateerr"></p></td>

</tr>

<!-- finish time should not be empty and should be in hh:mm:ss format -->
<tr><td>

Finish Time:

</td><td>

<input type="text" name="FinishTime" id="FinishTime" size="10" maxlength="10"/>

</td>

<td><p id="fintimerr"></p></td>

</tr>

<!-- position should be a number -->

<tr><td>

Position:

</td><td>

<input type="text" name="Position" id="Position" size="5" maxlength="5"/>

</td>
<td><p id="poserr"></p></td>

</tr>

<!-- category should be a number in the reang 1-100 -->
<tr><td>

Category:

</td><td>

<input type="text" name="CategoryID" id="CategoryID" size="3" maxlength="3"/>

</td>

<td><p id="caterr"></p></td>

</tr>

<!-- agegrade should be a number -->

<tr><td>

Age Grade:

</td><td>

<input type="text" name="AgeGrade" id="AgeGrade" size="5" maxlength="5"/>

</td>

<td><p id="ageerr"></p></td>

</tr>

<!-- personal best can be yes or no -->

<tr><td>

Personal Best:

</td><td>

<input name="PB" type="radio" value="0" checked="checked"> No

<input name="PB" value="1" type="radio"> Yes

</td>

<td><p id="pberr"></p></td>

</tr>

</table>

<input type="submit" value="Submit form" >

<p id ="errorMessage">

</p>

</form>

</body>

</html>
ebenezerdodoo
New php-forum User
New php-forum User
 
Posts: 5
Joined: Fri Apr 19, 2013 2:59 am
Location: GERMANY


Return to JavaScript

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.