Chrex Posted January 10, 2015 Share Posted January 10, 2015 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, Chrex Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2015 Share Posted January 10, 2015 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); ?>"; 1 Link to comment Share on other sites More sharing options...
Chrex Posted January 11, 2015 Author Share Posted January 11, 2015 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 comment Share on other sites More sharing options...
Ingolme Posted January 11, 2015 Share Posted January 11, 2015 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);} 1 Link to comment Share on other sites More sharing options...
Chrex Posted January 13, 2015 Author Share Posted January 13, 2015 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 comment Share on other sites More sharing options...
Ingolme Posted January 13, 2015 Share Posted January 13, 2015 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 comment Share on other sites More sharing options...
Chrex Posted January 13, 2015 Author Share Posted January 13, 2015 (edited) 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 January 13, 2015 by Chrex Link to comment Share on other sites More sharing options...
Ingolme Posted January 13, 2015 Share Posted January 13, 2015 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 comment Share on other sites More sharing options...
Chrex Posted January 13, 2015 Author Share Posted January 13, 2015 Shouldn´t alert(option.value); or show.innerHTML = this.value; show the element on my website? I don´t get an output. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 13, 2015 Share Posted January 13, 2015 Maybe this.value is an empty string. If you use alert it will show the value in an alert box to make it obvious, or you can use console.log and then check your browser's developer console to see the value there. Link to comment Share on other sites More sharing options...
Chrex Posted January 13, 2015 Author Share Posted January 13, 2015 Why should "this.value" be empty? Doesn´t the script fill the string? It works on the other website. The alert box doen´t appear on my website. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 13, 2015 Share Posted January 13, 2015 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 comment Share on other sites More sharing options...
Chrex Posted January 13, 2015 Author Share Posted January 13, 2015 But how you can see in the script (post #5), each element has a value. So how could the string be empty then? I´ve never worked with the developer console before. Link to comment Share on other sites More sharing options...
justsomeguy Posted January 13, 2015 Share Posted January 13, 2015 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 comment Share on other sites More sharing options...
Ingolme Posted January 13, 2015 Share Posted January 13, 2015 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. 1 Link to comment Share on other sites More sharing options...
Chrex Posted January 19, 2015 Author Share Posted January 19, 2015 Hey guys, It finally works :)I found the following code here: http://codingforums.com/dom-json-scripting/247911-javascript-onchange-event-select-tag.html 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now