I have a simple dropdown: <select name="names"> <option value="" selected> SELECT ONE</option> <option value="1"><?=$var['name']?></option> <option value="2"><?=$var2['name']?></option> </select> HTML: I have a button inside a form that posts data to x.php <input type="submit" name="view" value="VIEW" /> HTML: The question is: is it possible to make that VIEW button to redirect to another page (not the page set by the form) on click? The page URL we are redirected to should contain the value from the NAMES dropdown. We should be redirected to y.php?nameid= the value from the names dropdown. Also, what is not so important but would still be cool. Could the button be disabled if nothing is selected from the dropdown? (besides the default SELECT ONE option)?
You can trap the onSubmit event in the form tag. Then using a little javascript you could build a query string with parameters and redirect to a different page. Like this, not tested. <script> function redirectMyPage() { var mypage = "http://mypage.com/" mypage += "?"; mypage += document.getElementById("myname").value; mypage += "&"; mypage += document.getElementById("myage").value; location.href = mypage; } </script> <form onSubmit="redirectMyPage()"> Enter your name: <input type="text" id="myname" /><br /> Enter your age: <input type="text id="myage" /><br /> <input type="submit" value="Click Me"; </form>
I couldn't get it to work. However there are other submit buttons in that form, I just want one of the buttons to take me to another page. Therefore I slightly tried modifying your code but I still couldn't get it to work. Here is what I did: <script> function redirectMyPage() { var mypage = "page.php?fid=" mypage += document.getElementById("names").value; location.href = mypage; } </script> <form action="otherpage.php" method="post"> <select name="names"> <option value="" selected> SELECT ONE</option> <option value="1">name 1</option> <option value="2">name 2</option> </select> <input type="submit" name="go" value="GO" /> <input type="submit" onClick="redirectMyPage();" name="view" value="VIEW" /> </form> Code (markup): The go button should do what it normally does... View is the button that has to redirect.
I believe you should not use two "submit" buttons in one form but it might work, never checked it. You can do something like this: <input type="submit" name="go" value="GO" /> <input type="button" onClick="javascript:location='mypage.html';" name="view" value="VIEW" />