Jump to content

Working immediately with variable from a selection form.

Recommended Posts

Hi guys,


I use a very big form and my variables will be saved in a session. In most cases I´m fine with PHP. Until now I just use JS to hide and show some options.


My idea is to give the user a selection (somewhere in my form). As soon as the user clicks on one of the selection options, the value of the variable shall appear as text below the selection options (not just in the selection options).




1. Idea - import the php-variables in my JS and work with it

<script type="text/javascript">var test ="<?php echo $test ?>";</script>

--> didnt work. I could work with the variable, but I dont get a "fresh" variable from the session, because I would have to push the form button first.






2. Idea - create a JS variable in the selection options

<selection id="test"><option value=test1">Test1</option><option value=test2">Test2</option>...</selection>

--> didnt work.



Do you have any ideas what I should look for or what I have to do?


Thanks and cheers,


Link to post
Share on other sites

If you want to load new data from the server you'll need to learn AJAX.


You made a mistake in your HTML, the element is <select>, not <selection>. Once you've corrected that, you can use Javascript to assign the onchange event handler which will make an AJAX call.


When you pass data from a PHP variable to a Javascript string, make sure to escape quotation marks using addslashes:

var test = "<?php echo addslashes($test); ?>";
  • Like 1
Link to post
Share on other sites

Thanks for your reply.


I´m using "select" in my code, that was just a typing mistake. If I´m right, you use name="" for PHP and id="" for JS?! Why doesnt the following work: clicking on a selection and the JS (which is below the selection) is using the selection variable? Isn´t there a way to say:"hey, you are my JS variable, be used in the next JS."?

Link to post
Share on other sites

Javascript doesn't see forms or inputs, all it sees is HTML elements with their properties and methods, you can access HTML elements by their ID or you can use other ways to navigate, like getElementsByTagName(), childNodes and nextSibling. You have to search for the element and extract data from their properties.


Add an event listener to something. For example, onchange to the <select> element or onsubmit to the form.


Then you use the selectedIndex property of the <select> element to determine which of the options has been selected.


For example:

function handleEvent(e) {    // A reference to the <select> element    var select = document.getElementById("mySelectElement");    // A number indicating which <option> element is selected    var index = select.selectedIndex;    // A reference to the option element that is selected    var option = select.options[index];    // Do whatever you want to with the value of the option    alert(option.value);}
  • Like 1
Link to post
Share on other sites

Thanks for your help again! "onchange" is what I was looking for. I found the following code. Do you think thats correct? The script doesnt show me the selected element :/


Source: http://www.mediaevent.de/javascript/onchange.html

<select id="sel">   <option value="Stiefmütterchen">Stiefmütterchen</option>   <option value="Primeln">Primeln</option>   <option value="Tulpen">Tulpen</option></select><script type="text/javascript">   var sel = document.getElementById('sel');   sel.onchange = function() {      var show = document.getElementById('show');      show.innerHTML = this.value;   }</script>
Link to post
Share on other sites

Did you read my previous post? I even provided some code on how to extract the value of the <select> element.


Like I said: You have to target the <option> element that's selected and get its value.

Link to post
Share on other sites

I did read your post, otherwise I wouldnt have looked for "onchange". I tried to work with your suggestions and your code (last 2 days), but it didn´t work. I don´t want to say that you provided something wrong, I´m probably just to new to JS to understand how to use it propperly. I´m "just" an engineer, not a programmer.


Still don´t understand why the script, which I posted, doesn´t show me the selected element. It works so nice on the website where I found it.

Edited by Chrex
Link to post
Share on other sites

Here are the differences between your script and the example I gave you;


Your script

var show = document.getElementById('show');show.innerHTML = this.value;

My example

var select = document.getElementById("mySelectElement"); // It could be select = this if you wantvar index = select.selectedIndex;var option = select.options[index];alert(option.value);

What you're doing is try to read a value property on the <select> element.

What I'm doing is finding the <option> element that's currently selected and reading its value property.

Link to post
Share on other sites

If the alert box doesn't appear then there's probably a Javascript error, check your browser's developer console for the error message.

Why should "this.value" be empty?

Well, if the element has a value property, and the value is empty, then the value property will be empty. If the element doesn't have a value property at all then it will be set to undefined if you try to access it.
Link to post
Share on other sites

In the code in post 5, this is set to the select element. Not all browsers will populate the value property of a select element. The cross-browser way to get the selected value is the way that Ingolme showed.There are links in my signature to the various developer tools if you want to check the error messages.

Link to post
Share on other sites

According to references, the value attribute should work on the <select> element as well. From MDN:


HTMLSelectElement.value Is a DOMString with the value of this form control, that is, of the first selected option.


Just with the information provided in this topic I can't understand why it's not working.


Try to find out what this is referring to:

sel.onchange = function() {    console.log(this);    console.log(this.value);    // var show = document.getElementById('show');    // show.innerHTML = this.value;}

In most browsers you can check the Javascript console by opening the developer tools using F12. See what's written in the console. Perhaps "this" is not referring to the right object for some reason.

  • Like 1
Link to post
Share on other sites

Hey guys,


It finally works :)I found the following code here:


No idea why the other code didnt work, but here is the (for me) working one:

    <script type="text/javascript">		function show_selection_value(){		var value = document.getElementById('ID-of-my-select-box').value;		document.getElementById('target').innerHTML = value;		}	</script>	<div id="target"></div>

Thanks again for all your help!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...