So i am writing a code with a drop down list and a submit button. It looks like this in my CaseType.jsp file :
<title>Case Type Selection</title>
<script type="text/javascript" src="CaseType.js"></script>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
</head>
<body>
<center>
Please select the case that applies
<br><br><br>
<form action="">
<select id ="caseType" name="caseType">
<option value="PromoAttr">Promotion Attribute Change</option>
<option value="PromoOrder">Promotion Approval Order Change</option>
<option value="DefAppr">Change Default Approver on Promotion</option>
<option value=""></option>
</select>
<br><button onclick="caseSelect()" align="right">Submit</button></form>
<br>Help
</form>
What I want to be able to do is click the submit button and take in the value of which option was chosen and redirect to a different JSP page depending on the button. In my search on these questions I have only found solutions using PHP pages. and window.location or document.location doesn't seem to be working for me. This is my .js file for caseType:
function caseSelect()
{
var select = document.getElementById('caseType').value;
switch(select)
{
case "PromoAttr":
//open up form for Promotion Attribute Changes
alert("Promo attr works");
document.location.href="http://localhost:8080/PDFproj/generalCase.jsp";
break;
case "PromoOrder":
//open up form for Promotion approval order change
alert("Promo order works");
document.location.href="http://localhost:8080/PDFproj/generalCase.jsp";
break;
case "DefAppr":
//open up form for Changing default approver on promotion
alert("Default Approval works");
document.location.href="http://localhost:8080/PDFproj/generalCase.jsp";
break;
default:
}
return false;
}
Right now they are all leading to a general case page because I have not yet received the details on what each case form will have to look like, so this is just a prototype. But in the end, they will all have their own separate forms that have to be filled out and submitted.
Please let me know how I can do this. I am interested in javascript or jquery answers. Thank you.
In order to take a value from one page to another, you could add that value to the url as a query string, and once you get to that page have your javascript grab that value off the url and parse it into your code. Set the parameter like so:
case "PromoAttr":
alert("Promo attr works");
var url = "http://localhost:8080/PDFproj/generalCase.jsp";
location.href = url + "?selectedVal=PromoAttr";
break;
//Repeat for other cases, substituting "PromoAttr" for the selected value.
Then in your next page you can check to see if there are any query strings attached to your url, and if there is, parse it off and use it as you wish.
Related
In my code an onclick event of a link selects a drop-down option:
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#aaa", function(){
$("select").val("aaa").change();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#bbb", function(){
$("select").val("bbb").change();
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#ccc", function(){
$("select").val("ccc").change();
});
});
</script>
</head>
<body>
<p><a id="aaa">Select Option 1</a></p>
<p><a id="bbb">Select Option 2</a></p>
<p><a id="ccc">Select Option 3</a></p>
<select>
<option>Select</option>
<option value="aaa">Option 1</option>
<option value="bbb">Option 2</option>
<option value="ccc">Option 3</option>
</select>
</body>
</html>
Issue:
I am trying to add a link to an external page that navigates to the page with the above code and automatically selects e.g. Option 2
In a sense I am trying to execute e.g. the following function
function() $("select").val("bbb").change();});
when clicking on a particular (external) link that navigates to the page of the function first.
You're going to have to send some sort of parameter to the second page that that page can read. The simplest thing would be to add a query string onto the link, like this:
Page 2
And then on "page2.html", you'll need to read the query string and act accordingly:
// This is the code that would be on page2.html
document.addEventListener("DOMContentLoaded", function(){
// Assume that the current page was arrived at with the URL: http://someDomain.com/page2.html?option=2
// That is the string that will be in window.location.href
//var theQueryString = window.location.href;
// For testing purposes we'll use it as a variable:
var theQueryString = "http://someDomain.com/page2.html?option=2".split("?")[1];
var optionNumber = theQueryString.split("=")[1];
console.log(theQueryString, optionNumber);
if(optionNumber === "2"){
// You can do whatever you need to do now that you know what the parameter
// was that was passed from the first page:
document.getElementById("foo").selectedIndex = optionNumber - 1;
doSomethingAwesome();
}
function doSomethingAwesome(){ alert("You Did It!"); }
});
<select id="foo">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
There are a lot of different ways to solve this problem. The recommended way assumes you have access to/control over the backend server to this page, where you could load some variable into the model when a certain URL parameter is passed (i.e. ?selection=2) and when that variable is preset in the model, you can set the default parameter on the select element.
However, in the event where you only have control over the front end, you can check the URL params or the hash using document.location and subsequently make a decision from there.
For example, make the link on the external page be something like http://www.myurl.com/mypage#option2. Then in your <script> tag, you can check document.location.hash for the value option2 and then call the appropriate jQuery function to change the select element.
I'm trying to pass a value of a option in a select from my HTML form to a PHP variable through Javascript
<script type="text/javascript">
function changeDir(ID){
var dir = document.getElementById(ID).value;
//For debuging purposes i've used an alert to show the value of dir on screen
//alert (dir);
//At this point of the function I want to assign the value of "dir" to the variable $folder
}
</script>
there's my .php with html
<SELECT name="course" ID="course" onchange='changeDir("course")' >
<OPTION value="artes>'">artes</OPTION>
<OPTION value="ingles">inglés</OPTION>
</SELECT>
<?php $folder= ...?>
I'm using this with a php upload lib, all working at the same file.
If anyone can explain me how to assign the value of the option to a php var will be great.
Thanks and Regards.
You can choose 2 different ways. First is AJAX, second is to redirect the page and GET the value of the <select> element.
HTML:
<SELECT name="course" ID="course" onchange='changeDir("course")' >
<OPTION value="artes>'">artes</OPTION>
<OPTION value="ingles">inglés</OPTION>
</SELECT>
JAVA:
<script type="text/javascript">
function changeDir(ID){
var dir = $("course").val();
$.post("php_file.php",
{
posted_dir: dir
},
function(data){
$("id_of_result_elemnt").html(data);
});
}
</script
PHP:
<?php
$folder=$_POST['posted_dir'];
echo "This text will be display in the element with id_of_result_elemnt ID";
?>
Other method is redirect
HTML+PHP:
<SELECT name="course" ID="course" onchange='changeDir("course")' >
<OPTION value="artes>'">artes</OPTION>
<OPTION value="ingles">inglés</OPTION>
</SELECT>
<?php if (iset($_GET['folder']))
{$_GET['folder']=$folder;}...?>
JAVA:
<script type="text/javascript">
function changeDir(ID){
var dir = document.getElementById(ID).value;
window.location = "http://example.com/myphp?folder=" + dir;
}
</script>
The fact is that you can't. They both live in different parts of your page. While you can write them in the same file, all PHP code is processed in the server side and Javascript is not able to see anything from the client side.
What you could do is whether pass it as a AJAX request in order to get back some information to show to the user or make the <select> refresh the page when user changes the option by submitting the form, so you don't lose the "state" of your form, and then verify in your php block if there's any option selected.
I've been trying to get a tutorial on creating a navigation for html Webpages via javascript or php I keep ending up puzzled.
What I want to achieve is a sort of website navigation on the site where a user can select Category via select box then subcategory gets populated via another select box and when user selects subcategory then subsubcategory gets populated via another select box then have a submit button that goes to the url.
Example: list of countries each with own unique html page. So if user hits submit he goes to the page obut if not then user can select state if state is selected then he goes to state unique html page and if not then he selects city then he can navigate to cities unique html page. So the structure looks like this:
Country/America.html - Country/State/Texas.html --Country/State/city/Texas-city.html
Any help or advice would be highly appreciated.
Lets assume you have this html page.
<form action="process.php" method="GET">
<select name="set1">
<option>Option...1</option>
<option>Option...2</option>
<option>Option...n</option>
</select>
<select name="set2">
<option>Option...1</option>
<option>Option...2</option>
<option>Option...n</option>
</select>
<!-- ... as many as needed -->
<input type='submit' >
</form>
now process.php could be something like
<?php
//Start backwards so you know the
//last question answered
if(isset($_GET['set2'])){
//Assuming the value is the same name as the html page.
//If the path differs add the directories needed.
header('Location: {$_GET['set2']}.html');
exit;
}
else if(isset($_GET['set1'])){
header('Location: {$_GET['set1']}.html');
exit;
}
else {//..What to do when nothing was selected}
?>
So this is what i have in html:
<p><br><form name="edit" method="post">
<div><select name="Edi" id ="Edi" >
<option selected="selected">Select</option>
<option value="1.php">Apple</option>
<option value="1.php">Bannana</option>
<option value="2.php">Carrot</option>
</select>
<input onclick="return Edit();" type="submit" value="Edit"/></div>
</form>
here is the corresponding javascript:
function Edit(){
if(document.forms['edit'].Edi.value == "Select")
{
alert("Please Select Edit Field");
return false;
}
else
{
window.open(Edi.options[Edi.selectedIndex].value);
return true;
}
}
Here is my problem. As you can see both my option Apple, and Bannana open the same php page. I want that. But i also want a variable in PHP that can store Apple/Bannana depending which was chosen in dropdown.
I tried this in PHP and it did not work.
$Table = $_POST['Edi'];
I know i can create a different PHP page for Apple(1.php) and Bannana(3.php). But in my program creating a page will just be duplicated code. (Apple and bannana just decide which table to store in). Also, i might be adding more options in the future, so i dont want to keep copying code.
What i came up with is putting the variable in javascript, but then tranfering to PHP is not possible. So I decided with creating extra layer rather than creating copied pages. (1 selected-shows apple, bananna) (2 selected-shows carrot). I can do this.
But is this the most efficient way of doing this?
You can use PHP's $_GET array to access URL parameters.
For example:
<option value="1.php?table=apple">Apple</option>
<option value="1.php?table=banana">Banana</option>
And your PHP:
$table = $_GET['table'];
If the variable could be missing, you can provide a default value by using PHP's ternary operator:
$table = isset($_GET['table']) ? $_GET['table'] : 'apple';
I have a form coded like below. Basically the href value for the anchor tag is determined by the value selected in a dropdown.
<form name=xyz method=post>
//random stuff
<a href="#" onclick="setAnchor()">
//some image
</a>
</form>
I am setting the href property of the form in javascript like this:
if(dropdown.option selected = "x")
windows.location.href = some URL;
else
windows.location.href = another URL;
The problem I am having is that using windows.location causes the form to use the GET method. The code expects a POST method to continue.
How can I fix this? I am not married to the above method. Any way I can set the form action URL, based on the option selected by the user, would work for me.
If you have this form:
<form id="myForm" action="page.php" method="POST">
You can submit it (with a POST method) (that is, instead of window.location...) like so:
document.getElementById("myForm").submit();
You can also set the URL to be submited like this
document.getElementById("myForm").action = "page.php";
You should submit your form:
document.xyz.submit();
document.xyz.action=page1.php; (or page2.php based on dropdown selection)
document.xyz.submit();