Member Avatar for jk_bscomp

Gud day everyone!!!

I hope you could help me with this one,


I have a select form that looks like this,

<select>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
<option>DDD</option>
<option>EEE</option>
</select>
my question is, how to transfer to a new page if the select is change coz the page i am working right now requires that everytime the select is change it must transfer to a new page....

I am currently working with html and php right now and no javascript. I hope you could help me with this one.. I am just new to webpage...

THANK YOU IN ADVANCE... your help is highly appreciated...

  • 5 Contributors
  • 10 Replies
  • 109 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jk_bscomp

Dani AI

Generated

Two practical choices are available: client-side for an immediate response, or server-side for a no-Javascript fallback. As noted, PHP runs on the server and cannot react to a select change without a round trip; was right to mention the select change event; and 's warning about redirects is important (header calls must happen before any output).

Client-side (best UX): hook the select's change event and either set window.location to a URL or change the page style immediately. Example redirect approach:

<!-- option values are target URLs -->
<select id="pageJump">
  <option value="">Choose...</option>
  <option value="page1.php">Page 1</option>
  <option value="page2.php">Page 2</option>
</select>

<script>
document.getElementById('pageJump').addEventListener('change', function() {
  var url = this.value;
  if (url) window.location.href = url;
});
</script>

Client-side background change (with persistence via localStorage):

<select id="bgPick" name="bg">
  <option value="">Background</option>
  <option value="#ffdddd">light red</option>
  <option value="#ddffdd">light green</option>
</select>

<script>
var sel = document.getElementById('bgPick');
sel.addEventListener('change', function() {
  document.body.style.backgroundColor = this.value || '';
  localStorage.setItem('bg', this.value || '');
});
var saved = localStorage.getItem('bg');
if (saved) document.body.style.backgroundColor = saved;
</script>

Server-side (no-JS) pattern: submit the form (GET/POST) and let PHP set a cookie or session and then render the page with the chosen background. Important notes: call setcookie() or header() before any HTML is echoed, validate the submitted value, and escape output to avoid XSS.

<?php
// before any output:
if (isset($_GET['bg'])) {
  $bg = preg_match('/^[#a-z0-9]+$/i', $_GET['bg']) ? $_GET['bg'] : 'white';
  setcookie('bg', $bg, time()+30*24*3600, '/');
  header('Location: ' . strtok($_SERVER['REQUEST_URI'], '?'));
  exit;
}
$bg = $_COOKIE['bg'] ?? 'white';
?>
<body style="background-color: <?php echo htmlspecialchars($bg, ENT_QUOTES); ?>">

Troubleshooting tips: always validate incoming values (colors or URLs), provide a visible submit button or a <noscript> message for non-JS users, and prefer localStorage for client-only persistence or cookies/sessions if the server must know the choice.

Recommended Answers

All 10 Replies

Member Avatar for humbug

You will need to use something like Javascript of AJAX or something that can be run client side. PHP is a server side language that is executed on the server computer before the users web browser receives the html (which is why you never see php code when you view source of a webpage). You need a script that can run on the users computer (the client computer) to redirect them when they make a selection.

Member Avatar for rickya100

Hi jk,

Like Humbug said it requires code on the persons local machine to do it.

There seems to be plenty of stuff out there to either use or experiment with.

Try this. Seems to do what you want.

http://www.web-source.net/javascript_redirect_box.htm

Member Avatar for Manuz 
U hav to use Java script, its simple only .Just call a function on "Onchange" that diverts page to other location . If not  u should use a form with a submit button.So wen te button got submitted it will direct to oter page
Member Avatar for jk_bscomp

thanks, for the great help!!!

i have another problem with regards to onchange event of select (SELECT) form....

i have the following code like this one,

<select>
<option>red</option>
<option>green</option>
<option>blue</option>
<select>

my question is that, how can i redirect my page on same page by changing the background of the page depending on the value of the select.

If for example, i chooses the red option(RED) then after that the background color of my page will turn to the color based on the value of the option.


Thanks for any help and thanks in advanced!!!

Member Avatar for humbug

You should look into using POST or GET methods with PHP to get info on what was sent to the page ("red", "green", or "blue") and then use sessions to save this data until viewer leaves the page.

Forms in HTML are designed to be used as follows: A form has a bunch of inputs, each with a name and a value (which the user sets), and a submit button which redirects the page to where ever is specified, and the data in all of the inputs is sent as well. PHP is a good language to retrieve this data and make use of it.

I suggest looking up a few tutorials with data retrieval like this. I'm too slack to find you any links so google away.

Member Avatar for financeSEObegin

You can do what the other posters said of course..
but what you want to do can easily be done the way you want to.
Look up redirect, there are many examples on the php manual site, but be careful, you cannot echo anything (no html ect) before the redirect in the file, or it will simply give you a blank screen and do nothing at all.

Member Avatar for Manuz 
call a function on onchange and get the changed value..and change the bgcolor by using document.bgColor=col;
Member Avatar for jk_bscomp

You should look into using POST or GET methods with PHP to get info on what was sent to the page ("red", "green", or "blue") and then use sessions to save this data until viewer leaves the page.

Forms in HTML are designed to be used as follows: A form has a bunch of inputs, each with a name and a value (which the user sets), and a submit button which redirects the page to where ever is specified, and the data in all of the inputs is sent as well. PHP is a good language to retrieve this data and make use of it.

I suggest looking up a few tutorials with data retrieval like this. I'm too slack to find you any links so google away.

thanks humbug,

i hope you can explain to me further how to use session.

THANK YOU!!!

Member Avatar for humbug

No problem. Munaz's following idea is a very good one for what your trying to do:

call a function on onchange and get the changed value..and change the bgcolor by using document.bgColor=col;

If you want to go down the path of having the users selection "saved" you only need cookies (I was wrong to suggest sessions). Look them up on the net, there are plenty of tutorials out there.

Member Avatar for jk_bscomp

Thanks to all who responded to this thread....


thank you very much....

:) :) :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.