We Keep Coding

Dynamically Change JS Script src Attribute Based on php Select

I have this php code which populates a select with a list of .js files from a directory.
<select id="s1" name="s1">
<option value="" selected="selected">Select Employee</option>
<?php
foreach(glob(dirname(__FILE__) . '/*.js') as $filename){
$filename = basename($filename, ".js");
echo "<option value='" . $filename . "'>".$filename."</option>";
}
?>
</select>
I have this script tag later on that loads a .js file:
<script src="data.js"></script>
How would I change the src attribute depending on the user selection of a file and refresh the page to demonstrate the contents with the new .js file?

It won't work by just altering the src attribute of an existing script because the browser will only parse that element one time. Changing the src after it's been parsed won't cause it to reload.
Instead, you need to create an entirely new script element, which you would then conditionally configure the src of and then append that into the document.
// Get a reference to the select
var select = document.getElementById("s1");
// Set up a change event handler for it:
select.addEventListener("change", function(){
// Create a new `<script>` element
var script = document.createElement("script");
// Conditionally set the src for the element
switch(this.value){
case "John" :
script.src = "john.js";
break;
case "Mary" :
script.src = "mary.js";
break;
case "Dave" :
script.src = "dave.js";
break;
}
// Append the element to the document
document.querySelector("head").appendChild(script);
// Just for testing... scroll to the bottom to see the
// newly created element
console.log(document.querySelector("head").innerHTML);
});
<select id="s1" name="s1">
<option value="" selected>Select Employee</option>
<option>John</option>
<option>Mary</option>
<option>Dave</option>
</select>
But, consider that if the user were to change the selected item from the dropdown, another new script element would be created and, in the end, you could wind up with a new script for each of the items. In which case, you may want to just consider statically linking to just one script file and having different functions within it and then just calling the right function based on the value of the dropdown list.

jsp jump url parameters' names are the html elements' names

I write web front page page.jsp:
<select id="type_label" name="type_label">
<option value=""></option>
<c:forEach items="${types}" var="type" varStatus="status">
<option value="${type}">${type}</option>
</c:forEach>
</select>
function dosearch(){
var type_label = document.getElementById("type_label");
var tagVal = type_label.options[type_label.selectedIndex].value;
window.location="${ctx}/content/query?tag="+tagVal;
}
In controller Controller.java:
I get the data rows of mysql and put these data rows in List list.
Then put the list in model:
model.add("list", list);
The list has data rows in my log.
Then the controller make the page jump to page.jsp.
The project use rose java web frame.
return "content/page";
It make the page jump to page.jsp.
But the url is:
http://127.0.0.1:3428/web/content/page?type_label=%E6%90%9E%E7%AC%91&currentPage=
The url is expected to be:
http://127.0.0.1:3428/web/content/page?tag=%E6%90%9E%E7%AC%91&currentPage=
The url's parameter is type_label and not tag.
But type_label is select html element's id.
Why？Please give me a hand.Thanks a lot!

I know the reason about it.
After dosearch() executed, got the list of the tag from mysql.
Then jumped to content/page.jsp by
return "content/page";
The page would load by the form:
<form action="${ctx}/content/page" method="get" name="Form" id="Form"
class="form-horizontal">
It would get data list from mysql again. Because it got tag parameter by the tag element's name "type_label".
Then its url was "..type_label=tagname". The controller's method didn't get tag parameter from "type_label". So it had no tag parameter now.
It would get data list without tag.
So the data list was not the data of this tag.
Solution:
The tag element in HTML is that:
<select id="tag" name="tag">
<option value=""></option>
<c:forEach items="${tag}" var="tag" varStatus="status">
<option value="${tag}">${tag}</option>
</c:forEach>
</select>
Modify the dosearch() method to this:
function dosearch(){
$("#form").submit();
}
And modify the controller code to get tag parameter. Like that:
#Get("page")
public String page(Model model, #Param("tag") String tag){
...
}
The controller will get tag parameter by the tag element's name "tag".
After dosearch() executed, the controller will get tag parameter from the form.
Then get the data list of this tag in controller. And add list to model.
At last the page will show the list of the tag.

Passing a "value" from a select in a form to a php variable with javascript issues

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.

included php cannot access form on the page

I have some html code used in more than one place, I put it in a .php file and include it where needed. In one case I include this code inside a form.
This form has one element; and just below that, inside the form, is the include for the php file that has the html code.
I find that the included html from the .php file cannot access the form element but the one element that is on the same page as the form has no such trouble.
Here's the included code that's in a separate .PHP file:
// inside theIncluded.php
<div id="aDivToBeIncluded">Testing</div>
And here is my form declaration -- the signature looks overly complex because I removed other elements (text boxes, etc) for this explanation:
<form style="display: inline-block" name="areaComboboxForm" method="post"
autocomplete="off" enctype="multipart/form-data">
<select name="mySelect" id="mySelectId" onchange="return doChange(this)" >
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<?php require_once("theIncluded.php") ?>
</form>
And here is the troublesome code:
function doChange(theSelect)
{
var theSelect = document.getElementById('mySelectId');
// THIS REPORTS THAT THE FORM IS 'objectHTMLFormElement'
alert("doChange(), the form is: " + theSelect.form);
var theIncludedDiv= document.getElementById('aDivToBeIncluded');
// THIS REPORTS THAT theIncludedDiv IS 'objectHTMLDivElement'
alert("doChange(), the included Div is: " + theIncludedDiv);
// THIS REPORTS THAT theIncludedDiv.form IS 'undefined'
alert("doChange(), the form is: " + theIncludedDiv.form);
}
To recap, I include some html code from a .php file that has one DOM element, a div.
That div, when accessed on the page where its .php file is included, resolves to an
objectHTMLDivElement.
But when I try to access the .form that the objectHTMLDivElement is included on -- the form is 'undefined.'
Is there a reason for this? All this code is in the same folder on the same webserver, a localhost XAMPP web server.

According to your code, the div is inside the form and has no .form of its own.
You'd be looking for theIncludedDiv.parentNode if you wanted the form element.
.form is only a property of HTMLInputElements in HTML4 and in HTML5 it has some different behavior(it can be the id of the form element or null).

Dropdown Navigation Menu Using Javascript in Wordpress

I've been working on a wordpress site for an internship and I'm wanting to embed javascript code in a page to create a dropdown menu that navigates the browser to the selected page.
I'm wondering, is there something special you need to do to allow js to work in a wp page?
I tried the following code embedded in the page using the html side of posting option:
<script language="javascript" type="text/javascript">
<!--
function menu_goto( menuform )
{
// see http://www.thesitewizard.com/archive/navigation.shtml
// for an explanation of this script and how to use it on your
// own site
var baseurl = "173.236.164.86/where-to-buy/" ;
selecteditem = menuform.newurl.selectedIndex ;
newurl = menuform.newurl.options[ selecteditem ].value ;
if (newurl.length != 0) {
top.location.href = baseurl + newurl ;
}
}
//-->
</script>
<form action="dummyvalue">
<select name="newurl" onchange="menu_goto(this.form)">
<option value="" selected="selected">----- Select A Product -----</option>
<option value="vene-prototype-version/">VENE Prototype Version</option>
<option value="configuration-vene-version/">VENE Configuration Version</option>
<option value="customized-vene-version/"> VENE Customized Version</option>
</select>
</form>
The dropdown menu appears, but fails to redirect the browser on change.
I have tried surrounding the code in the page with the tags and that has no effect either.
http://173.236.164.86/where-to-buy/
thanks for the help!

Developer Tools show a parse error in your JS. Probably from WP automatically inserting paragraph returns. Remove all the white space and carriage returns in the JS and try it.