I am trying to pass a value from a <select> dropdown into a HTML DOM innerHTML JS so it is written into a div on the page. However I want the value to be passed into a PHP include so it changes the included php content being passed into the div on change of the dropdown.
I have gotten it to work passing the value into the innerHTML w/o wrapping it in a php include. So it will write into the div as 'purple.php' instead of the file itself, but when I try and wrap it in an include it breaks.
This is what I have gotten to so far.
Thanks for input, I have searched to no avail.
<script>
function gift(value)
{
document.getElementById("gift_post").innerHTML=('<?php echo include (value);?>');
}
</script>
<form action="" method="post">
<select name="slct" id="name" onchange="gift(this.value)">
<option value="" selected="selected"> Select </option>
<option value="purple.php"> purple </option>
<option value="green.php"> green </option>
<option value="blue.php"> blue </option>
</select>
</form>
<div id="gift_post"></div>
Thank you #O.Rares with your help I was able to figure it out. I stripped it down from what you had suggested since the .php is in the value so it doesn't need to be passed to the var. So that could be stripped. Then if i were to use the .load() function instead of php_include I dont need to worry injecting the .php into the innerHTML function because it can be passed directly with the form values. So I ended up with this and it is working perfectly. (note: '$' was changed to 'jQuery' due to further Wordpress conflict.)
<script>
function gift(value){
jQuery("#gift_post").load(value);
}
</script>
<form action="" method="post">
<select name="slct" id="name" onchange="gift(this.value)">
<option value="" selected="selected"> Select </option>
<option value="purple.php"> purple </option>
<option value="green.php"> green </option>
<option value="blue.php"> blue </option>
</select>
</form>
<div id="gift_post"></div>
function gift(value)
{
document.getElementById("gift_post").innerHTML=('<?php echo include (' + value + ' ); ?>');
}
Related
I have the following code on another webpage on my site with a form (say on page index.html): JSFiddle
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm()">
i.e a dropdown form.
I want to have a link on another webpage that will go to this page, and have the "Sales" option already selected.
<option value="1">
Sales
</option>
from the drop down menu (instead of the current default option), how do I create this?
Query parameters can be used to achieve the result you want, but you will need to parse the query parameter manually on your current page, since there is no standard JavaScript method for doing it.
You can write the following code on your page to automatically select the option:
$(document).ready(function() {
// Parse your query parameters here, and assign them to a variable named `queryParams`
var option = queryParams.type;
$("#dropdown").val(option);
});
Now you can create an anchor with the URL of this page, e.g. http://yourpage.url?type=1, which will redirect to this page, and will automatically change the value of your dropdown accordingly.
You must add some kind of router functionality with Javascript in your site.
I think the simplest thing you could do it to have a script in that page that checks the url if it has say a #bar hash like so: http://yoursite.com/foo.html#bar.
<script>
// make sure you run this on DOM ready like in $.ready() in jQuery or in a script just before closing the body tag
if(window.location.hash === 'bar') {
// add the selected attribute to the <option> you want
}
</script>
Try with append() function of jquery .and pass this with in onchange function call .And also added with document.ready for create the link on document load with selected value
function showForm(that){
var s = $(that).children('option:selected').text()
$('#link_box').append(''+s+'</br>')
}
$(document).ready(function(){ // for window load
showForm($('select'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
<label class="control-label" for="dropdown">
What can we help you with?
</label>
<select class="select form-control" id="dropdown" name="dropdown" onchange="showForm(this)">
<option value="0" disabled>
Select an option
</option>
<option value="1" selected>
Sales
</option>
<option value="2">
Complaints
</option>
<option value="3">
Queries
</option>
<option value="4">
Ideas
</option>
</select>
</div>
<div id="link_box">
<!-- its a link append box-->
</div>
I'm generating dropdown inputs with php simple html dom. I have some values from database and according them i will add 'selected' value into my select->option dom elements.
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2">Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
this is the default one. i would like to add value like this, check on option 2 :
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2" selected>Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
and while doing that i want to use my plugin.
<?php
$html = new simple_html_dom();
$html->load('
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2">Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
');
echo $html;
?>
Everything works nicely until here. Yeah now i need to insert selected into my second option. I don't know how to do this with PHP Simple HTML DOM, or i'm missing something in the documentation : http://simplehtmldom.sourceforge.net/manual.htm#section_access
What i have tried so far and got many errors in my php section :
<?php
$html = new simple_html_dom();
$html->load('
<select name="myDropDown" id="someID">
<option value="someValue1">Value1Value</option>
<option value="someValue2">Value2Value</option>
<option value="someValue3">Value3Value</option>
</select>
');
//here's where i'm trying to reach the child nodes :
$ret = $html->getElementById('someID');
$ret->children(2)->GOTTADOSOMETHINGHEREANDIREALLYDUNNO;
echo $html;
?>
By the way, if you offer another easy way to do this, i'd appreciate.
Thank you in advance !
With minimal research you can figure this out for yourself.
$ret->children(2)->selected = true;
Why you use simple_html_dom and not simply a template file (with PHP)?
<select name="test" <?php if($selected){echo 'selected'}?> />
Or even better Smarty.
<select name="test" {if $selected}selected{/if} />
Simple_html_dom is a class for parsing complex html documents like exchanging image urls or something like that. I cant' see any reason why you need to use this class.
for getting Dropdown Element Selected Option with Simple HTML DOM
just try this simple and easy method
$element = $html->find('#selectIDGoesHere',0)->find('option');
foreach($element as $elemen) {
echo "Display text:".($elemen->plaintext)."<br>";
echo "value:".($elemen->value)."<br>";
}
I am working on a piece of code that will display the content of a mysql query in a template, since the query could feasibly return hundreds of results Ive included a page limiter and navigation tool. Unfortunately I am having a problem passing the page number after I select the number of results to show per page. The page nav is separate and working fine except it cant see the page number once this function has run.
<script>
function refreshpage(results_per_page){
window.location="classifieds.php?&results_per_page="+results_per_page
}
</script>
<?php
$results_per_page = $_GET['results_per_page'];
?>
<select onchange="refreshpage(this.value);">
<option selected value="<?php echo $results_per_page?>"><?php echo $results_per_page?></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
The above code works fine and automatically reloads the page, but when ever i try to introduce a $page variable the pageRefresh function fails to work. Is this the right way to go about what I am after or is there another way that will let me include another variable. All it needs to be is;
$page;
taken from the url
$page = $_GET['page'];
Ive tried sending it with the onchange function, calling it from within the refreshPage Function, even using an intermediate function to assemble an extension with all the relevant data and nothing seems to give the result.
Thanks
EDIT:
Thanks to sasse, I got enough Info to correct the code I believe. This seems to now work so if anyone else has had this issue, this seems to be a good work around. Thanks! (never occurred to me to use val!)
<script>
function refreshpage(results_per_page){
var page = <?php echo $_GET['page'] ?>;
window.location="classifieds.php?page=" + page + "&results_per_page="+results_per_page
}
</script>
<?php
$results_per_page = $_GET['results_per_page'];
?>
<select onchange="refreshpage(this.value);">
<option selected value="<?php echo $results_per_page?>"><?php echo $results_per_page?></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Since you're calling the "refreshPage" with onchange for the "select"-element and sending "this.value" you will send the selected value to the method.
Therefore you will send 1, 2, 3, 4 or 5 to the refreshPage method as parameter "results_per_page".
I would think you don't want one result per page, but I might be wrong.
When are you setting either "results_per_page" or "page"? My thought was that the "select"-element was for the "page" attribute and therefore the method "refreshPage" should accept "page" as parameter.
I'll write some code to demonstrate my intention.
<script>
function refreshpage(page){
var results_per_page = <?php echo $_GET['results_per_page'] ?>;
window.location="classifieds.php?page=" + page + "&results_per_page="+results_per_page
}
</script>
<select onchange="refreshpage(this.value);">
<!-- If this select is for "page" then I don't understand this next line -->
<option selected value="<?php echo $results_per_page?>"><?php echo $results_per_page?></option>
<option value="1">1</option>
<option value="2">2</option>
...
</select>
If the case is that I didn't understand correctly then tell me what I thought wrong and I'll update my answer. And also, update your question with what you've tried so far as long as the "page" goes, when is it set? Do you have a "next" and a "previous" button?
i have html code like this:
<select name="xcontract_id" onchange="jf_get_einv_disable(document.MYFORM);fenable(document.MYFORM);jf_best_contract(document.getElementById('xcust_icorcID').value,document.getElementById('xcontract_id').value);jf_check_dlstart_1_3_contr(document.getElementById('xcust_icorcID').value,document.getElementById('xcontract_id').value,document.getElementById('xsim_cnt').value);">
<option selected="">choose
<option value="14030">8N_870MHz_0106
<option value="14031">8N_870MHz_Norma_0106
<option value="48414">AX_AI_nova_akt_DZ_NTBK_24m_0103
.
.
.
</option></select>
and i have js functions declareted like this:
jf_get_einv_disable(frm){
...
//var typzmluvy=frm.xcontract_id.options[frm.xcontract_id.selectedIndex].value;
var typzmluvy=frm.xcontract_id.value;
...}
but when i dont change the default value of combobox (so i have still "choose") the variable is set to "choose" instead of "" or null. The first declaration is commented, because i try the second, but none of them works.
What im doing wrong? Thanks for any reply or help.
Ondro
ps:html doesnt have closing tag, because i copy it from ie developers tools.
Use it like this
<option value="" selected>choose</option>
Use
<option value="0" selected="selected">choose</option>
so you can validate it.
below is my code (1.jsp)
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
document.write("\n value is"+selectedValue);
}
</script>
</head>
<body>
<form method="post" action="SampServlet">
<select id="selectBox" name="selurl" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</form>
</body>
</html>
Here I have inserted this code into a jsp page.And getting the value of "selectedValue" from javascript to scriptlet with in the same jsp like this.
<% String val=(String)request.getParameter("selurl");
System.out.println("\n selected value is:"+val); %>
I am getting selected value as null as output. And if I print javascript selectedValue parameter it is giving me correct output i.e.,output as the option selected.But in scriptlet am getting null.Where is the error.I included all headers and directives.Please help me.
In your web browser you have only html, javascript and css. All JSP code is meant to be run on the server. So you get only the output of the jsp file. And after this you cannot change the jsp code.
Use submit Button to get Your Selected value at same page and
no need any function,no need onsubmit.
for example:
<form method="post" action="">
<select id="selectBox" name="selurl">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<input type="submit" value="Submit" name="sub">
//use scriplet tag
<% String r=request.getParameter("sub");
if(r.equals("Submit"){
String s=request.getParameter("selurl");
System.out.println("selected value is "+s);
}%>
</form>
Your select element should have a name attribute and you must use that name in request.getParameter()
<select id="selectBox" name="selurl"">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
String val = request.getParameter("mySelect");
EDIT:
If you want the server request to be made on the select element's onchange event, you must Ajax.
Using jQuery,
$.post('SampServlet', {selectedValue: selectedValue}, function(data) {
//Update view
});
You're missing the <submit> button.
<form method="post" action="SampServlet">
<select id="selectBox" name="selurl" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<input type="submit" /> <!-- MISSING!! -->
</form>
Add the button and click on it to submit the form to your servlet with the selected value sent as selurl. Please, note that your form's action attribute is pointing to SampServlet which seems to be a servlet. For jsps we usually have something like action="page.jsp" in the form.
EDIT:
If you want to post the form automatically when the user selects a value from the drop-down just set your onchange to: (you won't even need the <submit> button then)
onchange="this.form.submit()"