How to fix Javascript problem with reaload page?

#1
AdrianWierciochPHP

Posted 20 October 2011 - 11:34 AM

Learning Programmer

Members
54 posts

Hi!

I`m new in JS, I`ve learn it since a few days and I must use it to do my work (I`m writting advanced PHP scripts). I have this problem.

I have some form with <select> section and I need when user check some option below will display rest form.
My form look like this:

<form name="test" id="test" onChange="return printRest()">

<select name="size">

<option value="100">100</option>

<option value="200">200</option>

</select>

</form>

So, now I don`t know how will look function printRest(). It`s its goal:

when user check first option, on the same page, in the same form, without reload, should print something like this:
```
<select name="size">

<option value="200">200</option>

<option value="400">400</option>

</select>
```

when user check second option, something like this:

<select name="size">

<option value="400">200</option>

<option value="600">400</option>

</select>

It`s only for e.g.
I count on you!

#2
iTfinGer

Posted 22 October 2011 - 05:37 AM

Newbie

Members
4 posts

use onChange event in select tag

#3
AdrianWierciochPHP

Posted 23 October 2011 - 12:08 AM

Learning Programmer

Members
54 posts

My select tag look like this:

<select onChange="return showMore()" name="product">

<option value="1">1</option>

<1-- more options -->

</select>

and function showMore()

function schowMore() {


var product = document.forms['products_form'].product.value;

switch (product) {

case 1:

document.write(/* here is html tags to print if product = 1 */);

break;

/* etc... */


default:

document.write("None product was selected!");

}


}

And my problem is, that when I change option page reload automatically. I need resolved, please

#4
iTfinGer

Posted 23 October 2011 - 06:39 AM

Newbie

Members
4 posts

here is your code

<html>

<head>

<script>

function showMore() {


var x=document.getElementById("product");

var txt=x.value;

if(txt==1||txt==2){

var i;

for (i=0;i<=x.length;i++)

{

x.remove(i);

}

x.remove(x.selectedIndex);

if(txt==1){

var option=document.createElement("option");

var option1=document.createElement("option");

option.text="200";

option1.text="400";

try

  {

  // for IE earlier than version 8

  x.add(option,x.options[null]);

  x.add(option1,x.options[null]);

  }

catch (e)

  {

  x.add(option,null);

x.add(option1,null);

  }

}

if(txt==2){

var option=document.createElement("option");

var option1=document.createElement("option");

option.text="400";

option1.text="600";

try

  {

  // for IE earlier than version 8

  x.add(option,x.options[null]);

  x.add(option1,x.options[null]);

  }

catch (e)

  {

  x.add(option,null);

  x.add(option1,null);

  }

}


}

}


</script>

</head>

<body>

<form id="test">

<select id="product" onchange="showMore()">

<option>selct a number</option>

<option value="1">1</option>

<option value="2">2</option>

</select>

</form>

</body>

</html>

Edited by iTfinGer, 23 October 2011 - 08:30 AM.