Rajesh I succeeded to submit the page using javascript onclick event like you told me but now for some reason the variables don’t get submitted to the javascript redirect page.
Can you tell me what I am doing wrong?
Thanks a lot for your help.
Here is my new code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--For dropdown auto submit-->
<script>function onSelectChange(){
document.getElementById("myselect").submit();
}</script>
<!--For final page submit-->
<script>
function submit() {
window.location = "action_page.php";
}
</script>
</head>
<body>
<form action="test.php" method="post">
<select name="s1" style="width: 70px;" id="mySelect" onchange="this.form.submit()" </select>
<optgroup label="170011 Non-Isolated RS-422">
<option value="">Select...</option>
<option value="170011-3" <?php if ($_POST['s1'] == '170011-3') echo 'selected="selected"'; ?> >0011-3v3</option>
<option value="170011-5" <?php if ($_POST['s1'] == '170011-5') echo 'selected="selected"'; ?> >0011-5v0</option>
<optgroup label="170013 Isolated LVTTL Input">
<option value="">Select...</option>
<option value="170013-3" <?php if ($_POST['s1'] == '170013-3') echo 'selected="selected"'; ?> >0013-3v3</option>
<option value="170013-5" <?php if ($_POST['s1'] == '170013-5') echo 'selected="selected"'; ?> >0013-5v0</option>
<optgroup label="170015 Isolated LVDS Input">
<option value="">Select...</option>
<option value="170015-3" <?php if ($_POST['s1'] == '170015-3') echo 'selected="selected"'; ?> >0015-3v3</option>
<option value="170015-5" <?php if ($_POST['s1'] == '170015-5') echo 'selected="selected"'; ?> >0015-5v0</option>
<optgroup label="170016 Isolated RS-422 Input">
<option value="">Select...</option>
<option value="170016-3" <?php if ($_POST['s1'] == '170016-3') echo 'selected="selected"'; ?> >0016-3v3</option>
<option value="170016-5" <?php if ($_POST['s1'] == '170016-5') echo 'selected="selected"'; ?> >0016-5v0</option>
<optgroup label="170017 Non-Isolated LVTTL Input">
<option value="">Select...</option>
<option value="170017-3" <?php if ($_POST['s1'] == '170017-3') echo 'selected="selected"'; ?> >0017-3v3</option>
<option value="170017-5" <?php if ($_POST['s1'] == '170017-5') echo 'selected="selected"'; ?> >0017-5v0</option>
</select></form>
<!--<input type="submit" id="form_page" value="Submit">-->
<input type="submit" value="Submit Final" onclick="submit()">
</body>
</html>
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). You should give the different id to form tag and button tag.
You've gave same id in form tag and button tag. You've take two form tags and you've taken Submit button instead simple button. So html document only consider first form tag so when you click on button you will simply redirect to test.php
Now for redirect to another url using button you can use javascript onclick event like:
<input type="button" value="Submit" onclick="yourfunction">
and in function redirect using javascript like:
window.location = "http://www.example.com";
Related
What I'm attempting to do with the below code is call a PHP function from an drop-down menu.
Is there a clean way of doing this?
code:
<html>
<head>
</head>
<body>
<?php
function OnSelectionChange() {
echo("OK IT WORKS");
}
?>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
You can get the selected value from the drop down list simply using php without using JavaScript.
<html>
<head>
<title>Country</title>
</head>
<body>
<form method="POST" action="">
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_POST["country"])){
$country=$_POST["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
simple ajax using jquery
index page
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myDropDown').change(function(){
//Selected value
var inputValue = $(this).val();
alert("value in js "+inputValue);
//Ajax for calling php function
$.post('submit.php', { dropdownValue: inputValue }, function(data){
alert('ajax completed. Response: '+data);
//do after submission operation in DOM
});
});
});
</script>
</head>
<body>
<select id="myDropDown">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</body>
</html>
in submit.php
<?php
function processDrpdown($selectedVal) {
echo "Selected value in php ".$selectedVal;
}
if ($_POST['dropdownValue']){
//call the function or execute the code
processDrpdown($_POST['dropdownValue']);
}
for simple js ajax use XMLHttpRequest
Does not connect onchange event with php function.
must use javascript function
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<html>
<head>
<title>Country</title>
</head>
<body>
<form>
Select Your Country
<select name="country" onchange="this.form.submit()">
<option value="" disabled selected>--select--</option>
<option value="india">India</option>
<option value="us">Us</option>
<option value="europe">Europe</option>
</select>
</form>
<?php
if(isset($_GET["country"])){
$country=$_GET["country"];
echo "select country is => ".$country;
}
?>
</body>
</html>
Can't do that, use JavaScript function instead
<html>
<head>
</head>
<body>
<script>
function OnSelectionChange()
{
alert("OK IT WORKS");
}
</script>
<section>
<select onchange="OnSelectionChange()">
<option value='' disabled selected>Assign Driver</option>
<option value='4353'>Steve Jobs</option>
<option value='3333'>Ian Wright</option>
<option value='66666'>Mark James</option>
</select>
</section>
</body>
</html>
This mild adaptation has worked well for me. So very many thanks to vivekcs0114 and furthermore nicely avoids JS and the required Ajax solution which after around 200 miserable attempts has been a total disaster.
<form method="post" action="">
<select method="post" name="areasel" onchange="this.form.submit()">
<option value="Choose one">Choose one</option>
<option value="Complete Airframe">Complete Airframe</option>
<option value="Armstrong Siddeley">Armstrong Siddeley</option>
<option value="Something">Something</option>
</select>
</form>
<?php
if(isset($_POST["areasel"]))
{
$type=$_POST["areasel"];
echo "<BR>Do some SQL stuff using :".$type;
}
?>
How can i conditionally set PHP form action?.
i have the following drop down option, when 2WD and 4WD selected i want to redirect or go to A.php otherwise the other one MFWD selected to open page B
<form action="page.php">
<select name="tractor">
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit">
here is the whole code
<?php ob_start ?>
<!DOCTYPE html>
<html>
<body>
<form method="post">
<select name="tractor">
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<br><br>
<input type="submit" name="cmd_submit" />
</form>
<?php
if(isset($_POST['cmd_submit'])){
if($_POST['tractor'] == "2wd" || $_POST['tractor'] == "4wd"){
//redirect here
header('location:iar7.php');
}else{
header('location:iar-calculator.php');
}
}
?>
</body>
</html>
you can do it like this. omit the action attribute and add a method="post".. otherwise you need to add a get method there... and get the query string of the tractor to do a conditional statement on your action attribute....
HTML Code
<form method="post">
<select name="tractor">
<option value="2wd">2WD</option>
<option value="mfwd">MFWD</option>
<option value="4wd">4WD</option>
</select>
<input type="submit" name="cmd_submit" />
</form>
PHP Code:
<?php
if(isset($_POST['cmd_submit'])){
if($_POST['tractor'] == "2wd" || $_POST['tractor'] == "4wd"){
//redirect here
header('location:a.php');
}else{
header('location:b.php');
}
}
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>
<form method="get" action="index.php">
<select name="choice" size="1" onchange="this.form.submit()">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">C</option>
</select></form>
The code above displays a dropdown menu of options, such as a, b, or c, the user can click on. After the user clicks on a, b, or c from the drop down menu, that option is submitted in the form, and the page reloads with a new $_GET variable "choice" defined as a, b, or c. I want the option that the user last selected to now be the default selected option listed. For example, after the user clicks on "b" from the dropdown menu, "b" shows up as selected on the drop down menu list. What's the best way to accomplish this?
Here you go:
<?php
if (isset($_REQUEST['choice'])) {
$selected_choice = $_REQUEST['choice'];
}
else {
$selected_choice = "none";
}
?>
<html>
<head>
</head>
<body>
<form method="get" action="">
<select name="choice" size="1" onchange="this.form.submit()">
<option value="a" <?php if($selected_choice == "a"){ print "selected='selected'"; } ?> >a</option>
<option value="b" <?php if($selected_choice == "b"){ print "selected='selected'"; } ?> >b</option>
<option value="c" <?php if($selected_choice == "c"){ print "selected='selected'"; } ?> >C</option>
</select>
</form>
</body>
</html>
When outputting the form do a check like:
<option value="a"<?php if ($_GET['choice'] == "a") {?> selected <?php } ?>>a</option>
You'd then want to extract that into a function that either does the conditional code for you, or outputs the entire option element with the provided value, label, and sanitized data with the check done internally.
Another approach to avoid spaghetti code (or at least reduce it) is to set it through Javascript, like:
<html>
<body>
<form method="get" action="test.htm">
<select name="choice" id="choice" size="1" onchange="this.form.submit()">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>
<script>
document.getElementById('choice').value = 'b';//replace with something like: <?php echo $_GET['choice'] ?>
</script>
</body>
</html>
IMHO this approach is better than put a test in each option tag.
Try saving the posted select option in session like below
<?php $_SESSION['current_select'] = $_REQUEST['posted_select_option']?>
And in page load check as below
<script>
var currentSelect = <?php echo $_SESSION['current_select']; ?>
$(document).ready(function(){
if(currentSelect!="")
$("#choice").val(currentSelect);
});
</script>
Considering your select tag has id like below
<select name="choice" id="choice" size="1" onchange="this.form.submit()">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">C</option>
</select>
the scenario is this: see select below
<form name="limit">
<select name="limiter" onChange="limit(this.value)">
<option selected="selected"> </option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</form>
I want whenever any option is selected for 3 things to happen:
1.) js limit() function is called which all it does its takes current url, adds new query parameter 'limit' with the user selected value eg:
http://localhost/blahblah/apps/category.php?pg=1&catId=3021&limit=5
(this will cause the category.php page to be hit and # of product displayed limited to the value selected by user)
2.)Once the url is hit, it reloads but i DONT want the value selected to reset back to the default (which it currently does). I want it to reflect the users selection after page reload.
3.) Also, when i move to the next page (pagination), i would like the state to be carried ova to the next page (ie. remembering the user selection).
Just assign the selected value using PHP:
<form name="limit">
<select name="limiter" onChange="limit()">
<option <?php if(!isset($_POST['limiter'])) echo ' selected="selected"'; ?>> </option>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 5) echo ' selected="selected"'; ?> value="5">5</option>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 10) echo ' selected="selected"'; ?> value="10">10</option>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == 15) echo ' selected="selected"'; ?> value="15">15</option>
</select>
</form>
As the code gets hard to read, you could do a loop instead with PHP:
<form name="limit">
<select name="limiter" onChange="limit()">
<option <?php if(!isset($_POST['limiter'])) echo ' selected="selected"'; ?>> </option>
<?php foreach(array(5, 10, 15) as $p): ?>
<option <?php if(isset($_POST['limiter']) && $_POST['limiter'] == $p) echo ' selected="selected"'; ?> value="<?php echo $p; ?>">
<?php echo $p; ?>
</option>
<?php endforeach; ?>
</select>
</form>
<script type="text/javascript">
function limit(value)
{
url = "localhost/yourapp?limiter="+value;
}
</script>
<form name="limit">
<select name="limiter" onChange="limit(this.value)">
<option> </option>
<option value="5" <?php if($_REQUEST['limiter'] == 5) {echo "selected";}?>>5</option>
<option value="10" <?php if($_REQUEST['limiter'] == 10) {echo "selected";}?>>10</option>
<option value="15" <?php if($_REQUEST['limiter'] == 15) {echo "selected";}?>>15</option>
</select>
</form>
I am using $_REQUEST here because I don't know your form's method. Use accordingly.
Tatu Ulmanen's answer handles the part of displaying select. To do the pagination part, simply pass the limit as a parameter in the query string.
For example, if you're currently using page links that look like this:
1
Change them to include your limit parameter so it gets passed over:
1
Just make sure to change your pagination code to account for the fact that each page is only "limit" items long. To help you do that, I need to know how you were doing your pagination.
can you check whether it works?
<script type="text/javascript">
function limit(myvalue)
{
location.href="http://yoursite?limit="+myvalue;
}
function querySt() {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == 'limit') {
for (var idx=0;idx<document.getElementById('limiter').options.length;idx++) {
if (document.getElementById('limiter').value==ft[1]) {
document.getElementById('limiter').selectedIndex=idx;
}
}
}
}
}
</script>
</head>
<body onload="querySt()">
<form name="limits">
<select onchange="limit(this.value)" id="limiter">
<option selected="selected"> </option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</form>
</body>