I'm still learning to use PHP with MySQL tables and I'm sorry if this is a novice question but how would I change the dropdown code below to be able to insert normal a href links (with an image or text) that link to the playerMenu.php page? Here's the dropdown menu code I have:
<form action="playerMenu.php" method="get">
<select id="players" name="selectvalue" onchange="showMe(this.value);">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input type="submit" value="Submit">
<form>
Submit
Thanks in advance.
Here's how using JQuery. It works! Try it out!
<!-- Your Form -->
<form>
<select id="players" name="selectvalue" onchange="showMe(this.value);">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input id="button" type="button" value="Submit">
<form>
<!-- Include JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var sub_link = "playerMenu.php?electvalue="
$("#button").click(function() {
sub_link = sub_link + $("#players").find('option:selected').text();
// Here's your link
alert(sub_link);
// And now we do a javascript redirect
window.location.replace(sub_link);
});
</script>
From the PHP side, once you submit that form then the url will be
playerMenu.php?players=1&submit=Submit
If the option A was chosen. You can remove the onchange and onclick javascript, if this is what you want to achieve.
From there you have passed in the value of the players select box. You would want to then likely save this as a variable and what you want with the code. If you are doing something with your database then make sure to santize the variable as well.
Related
I have a webpage which consists of a select list with 6 options, along with a submit button. I need to code it in such a way that when one option is selected in the list and the submit button is clicked, it should open another linked page, whereas when another option is selected and submit button is clicked it should open some another page.
Basically I want each option to open some linked page when the submit button is clicked.
By googling a bit, I understood that I have to use php for this but I am not getting the appropriate code for the same.
I do not want the submit button to open only 1 specific page. Rather,I want it to open 6 different pages corresponding to different options selected.
Code Snippet :
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select>
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
Also i have learnt that it cannot be done using href tag because an option list cannot directly open pages, a submit button is required to perform an action.
Need help to resolve this.
I think ts wants to open multiple window according to selected values.
So here is example:
<div>
<H1>SELECT An subject:</H1>
<form id="link">
<select multiple="multiple">
<option value="">Choose links</option>
<option value="http://stackoverflow.com/">Stackoverflow</option>
<option value="http://google.com/">Google</option>
<option value="http://yahoo.com/">Yahoo</option>
<option value="http://bing.com/">Bing</option>
<option value="http://php.net/">PHP official</option>
<option value="http://w3c.org">W3C</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/>
</form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('#link').on('submit', function (e) {
e.preventDefault();
var $form = $(this),
$select = $form.find('select'),
links = $select.val();
if (links.length > 0) {
for (i in links) {
link = links[i];
window.open(link);
}
}
});
</script>
First, you must set multiple attribute to select. Then via jquery you can open each link in new popup. Be careful browsers may block this popups.
UPDATE
If you want to open just one window, you can use #Anant's solution
Simplest solution based on jquery:-
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select id ="dropDownId"> <!-- give an id to select box-->
<option value="">Select Option</option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click
var urldata = $('#dropDownId :selected').val(); // get the selected option value
window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});
</script>
Note:- This code will do below things:-
1.Select box page is never refreshed.
2.Based on selected value your URL'S are open in new window.
3.Also you can change URL format according to your requirement. I just gave a sample example.
Add this script in your html code
function showPage() {
var sel = document.getElementById('subjects');
var option = sel.options[sel.selectedIndex].value;
window.open(option + ".html");
}
and copy below html code and replace with yours
<select id="subjects">
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<input class="SubmitButton" type="button" value="Submit" onclick="showPage()" style="font-size:20px; " />
hope this helps :)
You can do this with PHP, but you will need to do 2 things:
Put the select and input into a form in your HTML, like this:
<form action="" method="post">
<select name="opt">
<option value="1">Link 1</option>
<option value="2">Link 2</option>
<!-- etc -->
</select>
<input type="submit" name="submit">Submit</input>
</form>
Have PHP catch the form's POSTed data and redirect to the appropriate page, like this: (put this at the top of your PHP page with the form)
<?php
if (isset($_POST['submit']))
{
if (isset($_POST['opt']))
{
if ($_POST['opt'] == '1') { header('Location: page1.php'); }
elseif ($_POST['opt'] == '2') { header('Location: page2.php'); }
// etc...
}
}
?>
Header redirects only work if there has been no HTML output before they're called, so make sure there's no HTML code before the PHP code block.
I have a form with action attribute as searchbycat.php. in the form there is a selection field based upon which contents in the php page will be dynamically made. so I am passing the selected value by GET and processing the value in searchbycat.php. so I am implementing jQuery's click event when the user clicks the submit button and changing the action attribute value with the selected value from the drop down menu. but it does not seem to work. I searched for this in stackoverflow and found that it can be done in jquery ajax call. but those answers is not really helping me. can somebody please explain how to do this?
here is my code:
<form action="" id="form1" method="POST">
<select name="category">
<option>Search By Category</option>
<option value="mobile">Mobile Phone</option>
<option value="computer">Computer Electronics</option>
<option value="book">Books</option>
<option value="fashion">Fashion and Beauty</option>
<option value="furniture">Furniture</option>
<option value="house">House Rent</option>
<option value="vehicle">Vehicle</option>
</select>
<input type="submit" name="submit" id="search" value="Search"/>
</form>
and here is the Jquery part I am trying to do:
<script type="text/javascript">
$(document).ready(function(){
$('#search').click(function(){
$('#form1').attr("action","searchbycat.php?category=<?php echo $_POST['category']?>");
});
});
Just change your form to method = 'GET' and action="searchbycat.php"
It will send automatically like you want. You don't really will need the jquery in this situation
So my exact problem is, I have a select form. There are 4 options in there, with values 1, 2, 3, and 4. There's a button form next to the select. Whenever I click on the button, it should navigate me to the select form's selected option's location (for example index.php?page=1). How can I solve this problem? I've read its impossible due to the php's server sides mechanic, etc, but there must be a way.. So far I've got an onclick event for the button, like...: location.href='index.php?page=.. and whats going in there ..
it will work
<select id="some_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="button" onclick="window.location.href='index.php?page='+document.getElementById('some_id').value;">Go</button>
A normal GET form should work.
<form action="index.php" method="get">
<select name="page">
<option value="1">Page Name</option>
...
</select>
<input type="submit" value="Submit">
</form>
Firstly, there may be a similar question answered amoungst the site but after carefully considering what solutions and problems I'm still stumped as to what to do.
I'm looking to return a URL and post my users to a page of the chosen URL from a select list.
Currently it works using the normal submit button using the following code;
<form id="formurl" name="formurl" method="post" action="" onSubmit="return getURL(this.url.value)">
<!-- begin postcode list -->
<select size="1" name="url" id="posctode_srch" onchange="this.form.submit()">
<option value="e1-office-space/">E1</option>
<option value="e7-office-space/">E7</option>
<option value="e10-office-space/">E10</option>
<option value="e11-office-space/">E11</option>
<option value="e14-office-space/">E14</option>
<option value="e15-office-space/">E15</option>
<option value="e16-office-space/">E16</option>
<option value="e17-office-space/">E17</option>
<option value="ec1-office-space/">EC1</option>
<option value="ec2-office-space/">EC2</option>
<option value="ec3-office-space/">EC3</option>
<option value="ec4-office-space/">EC4</option>
</select>
<input type="image" src="images/graphics/new/btn_go.png" class="go_btn" width="119" border="0" value="submit" onclick="_gaq.push(['_trackEvent', 'Contact', 'AreaSearchForm',,, false]);" alt="Area search submit" />
</form>
I'm looking to use post but I am testing it with get to see what result is created when choosing an option. when the form is set to get i'm seeing ?url=e7-office-space%2F so am I safe to assume it's working to some degree but there is something missing for the output to just take the value of the option and nothing more?
Being new to this kind of stuff i'm guessing it's a php / html problem as the functionality is there it's just a misused element somewhere so if anyone can help me see where i'm going wrong i'd really appreciate it.
Thanks
You have three things -
setting the url
setting the google stuff
submitting the form if not in the submit event
In the code below you can omit the image if you can rely on javascript only
DEMO
window.onload=function() {
document.getElementById("formurl").onsubmit=function() {
var val = this.url.value;
if (val=="") {
alert("Please select a value");
return false;
}
this.action="http://bing.com/search?q="+val;
_gaq.push(['_trackEvent', 'Contact', 'AreaSearchForm',,, false]);
}
document.getElementById("posctode_srch").onchange=function() {
var val = this.value;
if (val=="") return;
this.form.onsubmit(); // not 100% sure but this should not trigger twice
this.form.submit(); // since this is not triggering onsubmit
}
}
using
<form id="formurl" name="formurl" method="post" action="">
<!-- begin postcode list -->
<select size="1" name="url" id="posctode_srch">
<option value="">Please select</option>
<option value="e1-office-space/">E1</option>
<option value="e7-office-space/">E7</option>
<option value="e10-office-space/">E10</option>
<option value="e11-office-space/">E11</option>
<option value="e14-office-space/">E14</option>
<option value="e15-office-space/">E15</option>
<option value="e16-office-space/">E16</option>
<option value="e17-office-space/">E17</option>
<option value="ec1-office-space/">EC1</option>
<option value="ec2-office-space/">EC2</option>
<option value="ec3-office-space/">EC3</option>
<option value="ec4-office-space/">EC4</option>
</select>
<input type="image" src="images/graphics/new/btn_go.png"
class="go_btn" width="119" border="0" value="submit"
alt="Area search submit" />
</form>
I have dropdown list (menu) and a button created with this code:
<form name="period" action="all.php" method="POST">
<div align="center">
<select name=period_dropdown>
<option value="nill"></option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="120">120</option>
</select>
<input type="submit" value= "OK" >
</div></form>
When option of dropdown is selected, must be on button instead of OK and when button is pressed to be assigned to variable $period1. So, when I select 72, button must have 72 instead of OK and when I click button, variable $period1 to get value 72 (integer). Please, no javascript. Just html and php.
Thanks
You have to use javascript for what you are trying to do. If you want the button to change on the fly without submitting the form, you have to do client-side scripting (javascript).
Either:
Change the value of button after the dropdown is selected and form is submitted
Use two lines of javascript to change the value of the button when the select box is changed
In all.php:
if (isset($_POST['period_dropdown'])) {
$period1 = $_POST['period_dropdown'];
//do something with $period1
}
?>
<form name="period" action="all.php" method="POST">
<div align="center">
<select id="period_dropdown" name="period_dropdown" onchange="updateButton()">
<option value="nill"></option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="120">120</option>
</select>
<input id="period_button" type="submit" value= "OK" >
</div></form>
<script type="text/javascript">
function updateButton() {
document.getElementById("period_button").value = document.getElementById("period_dropdown").value;
}
</script>