Develop Reference

Passing form Value into PHP include inside HTML DOM innerHTML

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 + ' ); ?>');
}

Display related data from database based on dropdown selection JavaScript

In my task I want to select one name from drop down. Then I want to print the technology related to that name in other div tag. I don't know how to do this. I successfully get data from data base for dropdown option. Here is my code.
candidate name:
<select name="candidate_id" class="form-control" id="can_name" value="<?php echo set_value('candidate_id');?>"palceholder="candidate full name" required>
<option></option>
<?php foreach ($candidate as $r): ?>
<option value="<?php echo $r->candidate_id; ?>"><?php echo $r->candidate_name." "; ?></option>
<?php endforeach; ?>
</select>
</select>
<div class="error"><?php echo form_error("candidate_name");?></div><br>
<div></div><br> <!-- here I want to print technology related to canididate name -->

let's use the jQuery library, as this will simplify the syntax of what you want to do considerably.
You include it in your page like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This will pull in the most recent minified version of the 1.x branch of the library.
Then you need a select. I was about to say, let's use below ex.
Let's use a select anyway, you can change it if it isn't correct:
<label for="meetingPlace">Meeting place: </label>
<select id="meetingPlace">
<option>Please select</option>
<option>Buckingham Palace</option>
<option>The White House</option>
<option>Mount Everest</option>
</select>
With that in place you need to hook into the select's on change event.
you can do this in your JavaScript:
$("#meetingPlace").on("change", function(){
// This code will fire every time the user selects something
})
All this does is select the element with an id of "#meetingPlace" and declare an anonymous function which should be run every time the user selects something different.
As a final step for this post, let's have the JS output what the user selected to the page.
Create a div with an id of "results":
<div id="results"></div>
Then within the onchange callback add the following code:
var selected = $(this).val();
$("#results").html("You selected: " + selected);
What this does is assign the value of the selected option element to a variable, then set the innerHTML of the results accordingly.

Setting HTML drop down list option

I am trying to set value from php the option selected in a drop down list in html.
can anyone tell me how to give the "selected" attribute as the answer is generated dynamically
<select form="onsite_assessment" class="form-control" id="onsite_assessment">
<option value="no">NO</option>
<option value="yes">YES</option>
</select>
In the above code if the user has selected No in the previous session. i want to display that option by default.

This is just some general code which can be shaped for your needs. As I can't see all your code I cannot give a FULL answer. Basically you need to store the users' choice and retrieve this in a variable whenever needed, either string or Boolean (true/false). In the example I will show this using a string.
<?php
$user_choice = 'yes';
?>
<select form="onsite_assessment" class="form-control" id="onside_assessment">
<option value="no" <?php if($user_choice == 'no'){echo 'selected'; }>NO</option>
<option value="yes" <?php if($user_choice == 'yes'){echo 'selected'; }>YES</option>
</select>

Bootstrap Multiselect: On submit getting length of selected options list instead of option values

This is my first time using Bootstrap Muliselect; it's been a completely elegant experience until this:
When my form is submitted, what comes through the POST request is the number of selected options from each select.multiselect element, not their values, ie:
If I create:
<select name='foo'>
with 3 options
<option value='b' selected='selected'>B</option>
<option value='a' selected='selected'>A</option>
<option value='r' selected='selected'>R</option>
subsequently typing print_r($_POST) produces:
Array
(
[foo] => 3
)
I feel like this must be a facepalm sort of moment, but I've been at it for about two hours and though I can write ways to achieving this end, I can only assume Bootstrap is supposed to have such functionality by default. Anyone able to point me in the right direction, here?
Notes:
For sure dependencies are installed & jQuery is loaded properly
I'm using CakePHP & Foundation 4, but I don't think there are any conflicts/collisions
I'm submitting the form via $("#MahFormNaym").submit(); which I think doesn't matter but I am a JavaScript nub
The PHP/HTML:
<select id="<?php echo $model;?>-filter" class="multiselect" multiple="multiple">
<?php foreach($elements as $id => $element):?>
<option value="<?php echo $id;?>"> <?php echo $element;?> </option>
<?php endforeach;?>
</select>
The JavaScript:
$(".multiselect").multiselect({
buttonWidth:"600px",
includeSelectAllOption: true,
enableFiltering:true
});

You haven't assigned your option a corresponding value to reflect [foo] => 3. So, in order for this object to work like what you wanted, you need to assign the value with number like this:
<option value='0' selected='selected'>B</option>
<option value='1' selected='selected'>A</option>
<option value='2' selected='selected'>R</option>
Once node finds the specific number that matches to value, it'll then grab the content of the selected.

placeholder text for chosen plugin for single select not working

I have the chosen plugin for single select implemented in my code. I am trying to add the Placeholder text for the search boxes but I am not able to. I have tried the following things:
<select id="search_pi" name="search_pi" type="text" class="chosen-select"
style="width:450px;" onchange="this.form.submit()" >
<option value="">Search Project/Initiative...</option>
<?php
include "../includes/search_dropdown.php";
foreach($proj_ini_Array as $qa){
echo "<option value = \"$qa\">$qa</option>";
}
?>
JS
<script>
$(document).ready(function() {
$('.chosen-select').chosen({
placeholder_text_single: "Select an option",
no_results_text: "Oops, nothing found!"
});
});
</script>
In the select field, I also tried using data-placeholder="Select an option" but that does not help too. Can someone please let me know what am I missing?
Thanks in advance.

use data-placeholder="YOUR TEXT" in select tag

Okay. I found out the answer. We need to have the first option as blank for the placeholder text to be activated for Single select search box.
<select id="search_pi" name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >
<option> </option>
<?php
include "../includes/search_dropdown.php";
foreach($proj_ini_Array as $qa){
echo "<option value = \"$qa\">$qa</option>";
}
?>
In the above case, placeholder text will default to "Select an option".
For a customized placeholder-text for a single search select box you can edit your js file as below and have the first option blank for the placeholder text to be displayed:
<script>
$(document).ready(function() {
$('.chosen-select').chosen({
placeholder_text_single: "Select Project/Initiative...",
no_results_text: "Oops, nothing found!"
});
});
</script>

To make your first option simply a guidance text, but unable for users to select it, use this:
<option selected="selected" disabled>Search Project/Initiative...</option>
* Edit *
Ah sorry, didn't read your question clearly enough to begin with.
Apparently the first <option> needs to be an empty one. See this jsfiddle.

User response #Zack Joerdan solved my problem.
So the spring required value inside option
<select placeholder="Placeholder goes here">
<option value=""><!-- Empty option goes here. --><option>
<option>Other Option</option>
</select>

There's actually a better/easier solution to this problem if you are constructing via HTML rather than JS. You have to do two things.
The first <option> in your <select> should be empty.
You should include placeholder="Placeholder goes here" in your <select>. Apparently this was once called data-placeholder, which I think has led to some confusion.
So, in total:
<select placeholder="Placeholder goes here">
<option><!-- Empty option goes here. --><option>
<option>Other Option</option>
</select>

You can just simply add data-placeholder="YOUR TEXT" No need to use jquery for the same
Here is the example
<select id="search_pi" data-placeholder="Select Project/Initiative..." name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >
<?php
include "../includes/search_dropdown.php";
foreach($proj_ini_Array as $qa){
echo "<option value = \"$qa\">$qa</option>";
}
?>
</select>

<select data-placeholder="Select language" class="chosen-select">
<option></option>
<option>English</option>
<option>Urdu</option>
<option>Hindi</option>
<option>Chinese</option>
</select>
Add data-placeholder attribute on select and make sure first option is empty.