Javascript: Change <select ..> options from java script - javascript

I have a form which looks like below, where the user can select multiple options. I am trying to do the same thing (when the page regenerates) from javascript. I am not sure where I am going wrong. Could someone correct me?
<form name="myForm">
<select name="numSel[]" size="2" multiple="multiple">
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option value="THREE">THREE</option>
<option value="FOUR">FOUR</option>
</select>
</form>
This is the javascript code that I am trying (trying to select ONE and THREE):
document.myForm.numSel.options[1].selected = true;
document.myForm.numSel.options[3].selected = true;
Any ideas?
Edit: Syntax corrected (not actually in the code). I intend to generate the javascript statements in PHP and the numSel[] is needed for it to work. So, in this scenario, how do I change the code?
Thanks.

Change your JS code this way:
document.forms["myForm"].elements["numSel[]"].options[1].selected = true;
document.forms["myForm"].elements["numSel[]"].options[3].selected = true;
And correct the closing tag </select>.

name="numSel[]" does not match the name in your script. Change that to just numSel and it works:
<select name="numSel" size="2" multiple="multiple">
http://jsfiddle.net/m5GJW/
.. or alternatively target it by the name "numSel[]"
document.myForm["numSel[]"].options[1].selected = true;
document.myForm["numSel[]"].options[3].selected = true;​
http://jsfiddle.net/x3rGb/

Related

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

PHP Simple HTML DOM and Dropdown Element Selected Option

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>";
}

How to alert the selected option using javascript or jquery?

I am using a select tag in my code, here is my code,
<select onchange="test(this);">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
and javascript code is here,
<script>
function test(obj)
{
alert($(obj).val());
}
</script>
I want to alert the selected text here, If I use the above code the value of the selected option is coming, but I want to alert the text of the selected option can anyone tell to achive this one.
I want to alert it without using any class or id.
I want to alert it only through the obj.
I am waiting for your help.
Thanks In advance
This should do the trick...
alert($(obj).find("option:selected").text());
That uses the jQuery object $(obj), like you already had, but does a find() which searches the child elements, in this case the selected option.
jQuery find()
:selected pseudo-selector
Try this..
alert($(obj).find("option:selected").text());
you can try this:
alert($(obj).find('option').eq(obj.value).text());
Working jsFiddle
<select id="someid" onchange="test();">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
javascript>
function test(){
var elem = document.getElementById("someid"),
var selectedNode = elem.options[elem.selectedIndex].text;
alert(selectedNode );
}
jQuery>
$("#someid").change(){
alert($(this).find("option:selected").text());
}

get value of combobox with javascript

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.

jquery Setting option selected with known value

I have the next select:
<select name="priority" id="priority" class="update_priority">
<option value="root" label="Without parent">Without parent</option>
<option value="72" label="Rank3">Rank3</option>
<option value="71" label="Rank1">Rank1</option>
<option value="67" label="Rank2">Rank2</option>
<option value="64" label="Rank4">Rank4</option>
</select>
In JS i have a variable with something value. For example:
selected = 71;
Now, with help of jQuery I want to make option selected with this value(in our example 71).
you don't need jquery for this. you can just use plain old javascript:
document.getElementById("priority").value = "71";
But if you still want to with jquery you can do the same thing:
$("#priority").val("71")
EDIT: Here is an example. You can comment out either one you want to see the other one work:
http://jsfiddle.net/BupWA/

Categories

Resources