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>
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.
So, to explain my question. I have four .php codes on web server, and I have drop down list in php code also (it includes name of all four php files that are on server). I have also submit button.
I should do following: User choose one name from drop down list, click submit button, and than that php file should be called and shown on web page.
The problem is, I don't know hot to connect these three part of php code.
<p>
What Genre you want?
<select name="Ganre">
<option value="">Select...</option>
<option value="FPS">FPS</option>
<option value="JRPG">JRPG</option>
<option value="RPG">RPG</option>
<option value="Sports">Sports</option>
</select>
<input type="submit" value="Submit" />
<if (Genre == "FPS") { ?>
<form method="get" action="FPS.php"}>
<else if (Genre == "JRPG") { ?>
<form method="get" action="JRPG.php"}>
<else if (Genre == "RPG") { ?>
<form method="get" action="RPG.php"}>
<else if (Genre == "Sports") { ?>
<form method="get" action="Sports.php"}>
</p>
There are several issues with the code you provided:
You have no opening <?php for those closing ?>.
You have lots of invalid syntax, like If (Genre == "FPS") { (What is Genre?) or like
<else if
You have two spellings of "Genre" (Ganre).
There are several ways to do what you want. As you did not mention Javascript, I propose a PHP-only solution. You would just let the form submit to the
same PHP file, and there detect which choice was made. Then let PHP redirect to the
page of choice:
<?php
if (isset($_GET["genre"])) {
// User submitted their choice, so redirect to that page
// Make sure not to echo anything when using header():
header("Location: " . $_GET["genre"] . ".php");
// Make sure to not execute any other code in this file
exit();
}
// User did not yet submit a choice, so present list
?>
<form method="get">
<p>
What Genre you want?
<select name="genre">
<option value="">Select...</option>
<option value="FPS">FPS</option>
<option value="JRPG">JRPG</option>
<option value="RPG">RPG</option>
<option value="Sports">Sports</option>
</select>
<input type="submit" value="Submit"/>
</p>
</form>
Add onchange into select tag and add below javasctipt code.
<form method="get" action="">
<select name="Ganre" onchange="actionChangdde(this)">
<option value="">Select...</option>
<option value="FPS">FPS</option>
<option value="JRPG">JRPG</option>
<option value="RPG">RPG</option>
<option value="Sports">Sports</option>
</select>
<input type="submit" value="Submit" />
</form>
<script>
function actionChangdde(sel){
var getSelVal = sel.value;
var repAction = getSelVal+'.php';
sel.parentElement.setAttribute("action", repAction);
}
</script>
Try this code :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<form>
<p>
What Genre you want?
<select name="Ganre" id="genre">
<option value="">Select...</option>
<option value="FPS">FPS</option>
<option value="JRPG">JRPG</option>
<option value="RPG">RPG</option>
<option value="Sports">Sports</option>
</select>
<input type="submit" value="Submit" id="submit_button"/>
</p>
</form>
<script type="text/javascript">
$(document).ready(function(){
var dropDownValue = $('#genre').val();
$('#submit_button').click(function () {
if($('#genre').val() == "FPS"){
window.location="FPS.php";
}
if($('#genre').val() == "JRPG"){
window.location="JRPG.php";
}
if($('#genre').val() == "RPG"){
window.location="RPG.php";
}
if($('#genre').val() == "Sports"){
window.location="Sports.php";
}
if($('#genre').val() == ""){
return false;
}
});
});
</script>
I'm trying to do something very simple in PHP, but keep getting an error message. Essentially, when someone selects "Cat", I want "Miaow" to appear.
My idea was:
<select name="demo">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Fish">Fish</option>
</select>
<?php if ($_POST['demo'] == 'Cat') { echo 'Miaow'; } ?>
However, in PHPFiddle,
I get 'E_NOTICE : type 8 -- Undefined index...'
as soon as the code runs. Am I missing something basic? Thanks!
Your form might be passing data by $_GET instead of $_POST.
Did you specify the method ?
<form method="post" action="index.php">
<select name="demo">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Fish">Fish</option>
</select>
<input type="submit" value="Submit">
</form>
You can var_dump($_POST); and var_dump($_GET); to see what those variables contains in your PHP file.
Or you can do it in javascript like this :
function animal(value) {
if(value == "Cat") {
document.getElementById("myAnimal").innerHTML = "Miaouw";
} else {
document.getElementById("myAnimal").innerHTML = "Rooooah";
}
}
<form action="#">
<select name="demo" onchange="animal(this.value)">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Fish">Fish</option>
</select>
</form>
<span id="myAnimal"></span>
Is it even possible to do this using PHP so that "Miaow" comes up automatically on select, rather than having to submit the form?
You are looking for JavaScript code, not PHP. Here is a jQuery example:
$(document).on('change', '.animals', function(){
$('.noise-target').html( $('option:selected', this).data('noise') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="animals">
<option>Select</option>
<option data-noise="Woof">Dog</option>
<option data-noise="Meow">Cat</option>
</select>
<div class="noise-target"></div>
Maybe this will help, I write some block as far as I understand...
<form action="#" method="post">
<select name="demo">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Fish">Fish</option>
</select>
<input type="submit" name="sub" />
</form>
<?php
if(isset($_POST['sub'])){
if($_POST['demo'] == "cat"){
echo "Miao";
}
}
?>
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.
I have a question. Let me explain this with an example.
I have this piece of code:
<form action="vehicles.php" method="get">
<span>Marca:
<select name="brand">
<option value="null" selected="selected"></option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model">
<option value="null" selected="selected"></option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="submit">
</form>
Is any way to prevent the assignment of those variables if the option selected is the "null" one?
If, for example, I select brand="Renault" and model="null" the url is
http://mywebpage.com/vehicles.php?brand=Renault&model=null
but it should be
http://mywebpage.com/vehicles.php?brand=Renault
I know how to unset the variables with "null" value after the form submission with PHP. Is any way to do it before the submission and after the variables are setted to "null".
I would like a cleaner url, free of "variable=null" results.
P/D: I don't have a native english speaking so feel free to edit my question. I wish you understand me.
I am afraid that you might need javascript to achieve what you want.
Take a look at this code:
<form action="vehicles.php" id="carForm" method="GET">
<span>Marca:
<select name="brand" id="brand">
<option value="none" selected>-</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model" id="model">
<option value="none" selected="selected">-</option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="button" value="Submit" onclick="submitFormFilter();" />
</form>
Javascript : code will be like this:
<script>
function submitFormFilter(){
var myForm = document.getElementById("carForm");
var carBrand = document.getElementById("brand");
var carModel = document.getElementById("model");
if(carBrand.value === "none" || null){
carBrand.parentNode.removeChild(carBrand);
}
if(carModel.value === "none" || null){
carModel.parentNode.removeChild(carModel);
}
myForm.submit();
}
</script>
http://jsfiddle.net/7xzKP/1/
you can it try here.
Include the value attribute of your option tags.
<option value="" selected="selected">-</option>
You should really do this for all of your options.
if you don't want to use $_GET superglobal because of the url extension that it comes with try using $_POST instead. It will not have a url extension and it can still store values that you can later retrieve. Just be sure to change your method to equal POST instead of GET.
So the code for the form tag would change to:
<form action="vehicles.php" method="POST">
And you can later access it by (for example):
echo $_POST['brand'];
or
echo $_POST['model'];
as well, you probably want to add a value param to the values that you have in your option tag.
EDIT-
I've added this new section since you don't want to use POST even though I think you should.
You can stay with the GET method by doing this line of code:
<form action="vehicles.php" method="GET">
<span>Marca:
<select name="brand">
<option value="none" selected>-</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Renault">Renault</option>
<option value="Peugeot">Peugeot</option>
<option value="Fiat">Fiat</option>
</select>
</span>
<span>Modelo:
<select name="model">
<option value="none" selected>-</option>
<option value="206">206</option>
<option value="Suran">Suran</option>
<option value="Passat">Passat</option>
<option value="Punto">Punto</option>
</select>
</span>
<input type="submit">
</form>
Let me know if that helps
You should set the value for the option tag of <select> :)
You's missing set value for option tag. you should set the value for option tag in select tag. With the blank value, you can assign it to a special value like zero(0)
<select name="model">
<option value="0" selected>-</option>
<option value="1">206</option>
<option value="2">Suran</option>
<option value="3">Passat</option>
<option value="4">Punto</option>
</select>
EDIT:
Ok. I got your point. You can import jquery to your page and make a check by javascript before you submit, if the value of select box is blank. you can remove it.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$("form").submit(function(){
if($("select[name='model']").val() == "0") $("select[name='model']").remove();
return true;
});
})
</script>