dropdown return value in html and php - php

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>

Related

How to link a HTML <select> list with a submit button

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.

PHP URL that's identified by the ID?

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.

How to return a URL and submit the form using onchange

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>

Show input box o if value from drop down menu is selected

I'm working on a simple php contact form and struggling to get the "other" selection on the dropdown to show a text field option when it's selected. The form is included onto the page with <?php require_once('includes/contact_form.php'); ?> and the footer is also an include (the footer is where I have added the JS).
But it just wont work...
Here is the Form:
<label>How did you hear about us?</label>
<select name="how" class="selectfield" id="how">
<option value="">Please Select...</option>
<option value="Advertisement">Advertisement</option>
<option value="Care at Home Today">Care at Home Today</option>
<option value="Email-Newsletter">Email/Newsletter</option>
<option value="Facebook">Facebook</option>
<option value="Family-Friend">Family or Friend</option>
<option value="Magazine">Magazine Article</option>
<option value="Twitter">Twitter</option>
<option value="Website-Search Engine">Website/Search Engine</option>
<option value="Other">Other</option>
</select>
<input type='text' id="other" class="hidden" />
<input name="contactus" type="submit" class="submit" id="contactus" value="Submit" />
</form>
Here is the JS
$('#how').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
Not sure if it is a typo in the question but your dropdown value is "Other" and in your js you are testing for "other". So there is a mismatch. Might be your issue
Here is a working fiddle of your example just changing the "other" to "Other" in your if statement.
DEMO
As coder1984 has suggested though, simply using jquery's .show() and .hide() in your if
statement would also work.
if(selected_item == "Other"){
$('#other').val("").show()
}else{
$('#other').val(selected_item).hide()
}
Your problem is in your string comparison, it should be:
if(selected_item == "Other"){
With the Uppercase O, Tested
Try:
$('#how').change(function(){
var selected_item = $(this).val()
if(selected_item == "Other"){ // 'Other'
$('#other').val('').show(); //show textbox if Other is selected
}else{
$('#other').hide(); //Hide textbox if anything else is selected
}
});

Get selected value ajax

First Select
<Select id="drop1" onchange="drop1(this.value)">
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
<div id = "txtHint1"></div>
Once a value has been selected, the value will be sent to ajax. And corresponding dropdown will be generated on another page and show in div txthint1.
Second Select
<Select id="drop2" onchange="drop2(this.value)">
<option value ='111'>111</option
<option value ='222'>222</option
<option value ='333'>333</option
</select>
<div id = "txtHint2"></div>
As the generated dropdown is another php page, how can I get what the value the user has selected to show on my current page (div txthint2)?
I will be working in php.
$value = $_GET['a'];
There are no submitted button.
Send out the second request on a successful response:
function one() {
$.ajax({
...
success: function() {
two(TheValueFromOne);
}
});
}
function two() {
$.ajax({
...
});
}
What is happening is that once the request has been made successfully, then it is automatically starting the next request right after.
However, if you are jsut passing values around form one page to another you really do not need AJAX.
FOR EXAMPLE:
test1.php:
<form action="test2.php" method="get">
Book Title <br />
<input type="text" name="booktitle" /><br />
<input type="submit" name="submit" value=" - Update Database - " />
</form>
test2.php
<body>
<? echo $_GET["booktitle"]; ?>
</body>
IN YOUR CASE:
test1.php:
<Select id="drop1" name="test1">
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
test2.php
<Select id="drop1">
<option selected = "<? echo $_POST['test1']; ?>"></option>
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
#QUESTION:
<div id = "txtHint2"><? echo $_POST['test1']; ?></div>
#POSTING WITH FORM:
<form method="post" action="test2.php" >
<Select id="drop1" name="test1" onChange="this.parentNode.submit()">
<option value ='1'>1</option
<option value ='2'>2</option
<option value ='3'>3</option
</select>
</form>

Categories