...

View Full Version : Preferences ordered by JS in a form



tobiasf
07-05-2012, 05:31 PM
I would like to do that if my user choose in the first choice "A" he can't choose it in the second and last one. How can I do it with JS?


First choice:

<select id="pref1" name="pref1">
<option value="1">A</option>
<option value="1">B</option>
<option value="1">C</option>
</select>

Second:

<select id="preferencja2" name="preferencja2">
<option value="2">A</option>
<option value="2">B</option>
<option value="2">C</option>
</select>


Last:

<select id="preferencja3" name="preferencja3">
<option value="3">A</option>
<option value="3">B</option>
<option value="3">C</option>
</select>


Do you have any tutorial?

Philip M
07-05-2012, 05:54 PM
<html>
<head>
</head>

<body>
<script type = "text/javascript">

function NewList(selObj,newObj,addObj) {
var selElem = document.getElementById(selObj);
var selIndex = selElem.selectedIndex;
var newElem = document.getElementById(newObj);
var tmp = '';
newElem.options.length = 0;

for (var i=0; i<selElem.options.length; i++) {
tmp = selElem.options[i].value;
if (i != selIndex) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
}
}

function show() {
var message = "Your selections were:- ";
if ((document.getElementById("SBox0").value != "Select A Fruit") && (document.getElementById("SBox1").value != "Select A Fruit") && (document.getElementById("SBox2").value != "Select A Fruit") ) {
message += document.getElementById("Sbox0").value + " ";
message += document.getElementById("Sbox1").value + " ";
message += document.getElementById("Sbox2").value;
}
else {message = "You must make a selection from all three lists"}
alert (message);
}

</script>

FIRST CHOICE <select id="SBox0" onchange="NewList('SBox0','SBox1','AddedOptions')">
<option value ="Select A Fruit">Select A Fruit </option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Mango">Mango</option>
</select>

SECOND CHOICE <select id="SBox1" onchange="NewList('SBox1','SBox2','')">
<option value=""></option>
</select>

THIRD CHOICE <select id="SBox2">
<option value=""></option>
</select>

&nbsp &nbsp <input type = "button" value = "Show Selections" onclick = "show()">
</body>
</html>

You can of course add as many options as you wish to Sbox0.


Newcastle and Chelsea have to play each other, and I don't think they'll both win that game. - Commentator Radio 5 Live

WolfShade
07-05-2012, 05:55 PM
Seeing as all options for each are the same (ie, A, B, and C in the first have a value of 1; A, B, and C in the second have a value of 2; etc.) you could do it, but you'd have to get the text of the selectedIndex instead of the value.

But this is obviously for homework. These forums are not for getting people to do your code, for you; they are to seek help after an effort has already been made. Do you have any JavaScript code that isn't working?


UPDATE: Nevermind. :)

Philip M
07-05-2012, 05:58 PM
But this is obviously for homework.

Is it? It is not obvious to me! :)

tobiasf
07-05-2012, 07:35 PM
Thanks guys :thumbsup: I have tried to do something for whole day with any success :( I'm learning from this forum very much and I hope I can soon help somebody as you do. It is great work :)

I have problem with this script. I can't sent it to my database
What can be wrong?

choice.php

<html>
<head>
</head>

<body>
<form id="choice" action="index.php" method="post">
<script type = "text/javascript">
function NewList(selObj,newObj,addObj) {
var selElem = document.getElementById(selObj);
var selIndex = selElem.selectedIndex;
var newElem = document.getElementById(newObj);
var tmp = '';
newElem.options.length = 0;

for (var i=0; i<selElem.options.length; i++) {
tmp = selElem.options[i].value;
if (i != selIndex) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
}
}

function show() {
var message = "Your selections were:- ";
if ((document.getElementById("SBox0").value != "Select A Fruit") && (document.getElementById("SBox1").value != "Select A Fruit") && (document.getElementById("SBox2").value != "Select A Fruit") ) {
message += document.getElementById("Sbox0").value + " ";
message += document.getElementById("Sbox1").value + " ";
message += document.getElementById("Sbox2").value;
}
else {message = "You must make a selection from all three lists"}
alert (message);
}
</script>
FIRST CHOICE <select id="SBox0" onchange="NewList('SBox0','SBox1','AddedOptions')">
<option value ="Select A Fruit">Select A Fruit </option>
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Mango">Mango</option>
</select>

SECOND CHOICE <select id="SBox1" onchange="NewList('SBox1','SBox2','')">
<option value=""></option>
</select>

THIRD CHOICE <select id="SBox2">
<option value=""></option>
</select>

&nbsp &nbsp <input type = "submit" value = "Submit" onclick = "show()">
</body>
</html>

index.php

<?php

$SBox0 = $_POST['SBox0'];
$SBox1 = $_POST['SBox1'];
$SBox2 = $_POST['SBox2'];


if($SBox0 and $SBox1 and $SBox2 ) {


$connection = @mysql_connect('****', '********', '*********')
or die('error');
mysql_query("SET NAMES 'utf8'");
$db = @mysql_select_db('*****_choice', $connection)
or die('error');


$ins = @mysql_query("INSERT INTO choice SET SBox0='$SBox0', SBox1='$SBox1', Sbox2='$SBox2'");

if($ins) echo "Thanks";
else echo "<strong>Sorry but we have problem</strong>";

mysql_close($connection);
}
?>

After I click submit - index.php is blank :(

Ok I have done it by my own :D Thanks guys one more time!!!

Philip M
07-05-2012, 08:42 PM
Ok I have done it by my own :D Thanks guys one more time!!!

So tell us how you solved your problem. :cool: Then others can perhaps learn.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum