Jump to content
Sign in to follow this  
Chrex

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,

Chrex

Share this post


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

Share this post


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."?

Share this post


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

Share this post


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>

Share this post


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.

Share this post


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

Share this post


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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


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.

Share this post


Link to post
Share on other sites

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.

Share this post


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.

Share this post


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

Share this post


Link to post
Share on other sites

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!

Share this post


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.

Guest
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.

Loading...
Sign in to follow this  

×
×
  • Create New...