Radio Button onClick Response Help

[paulm]

No errors in console, but no alert either. Need to use clicked radio button values. Thanks for help. Btw the new forum looks great guys.

<div id="hidForm1" style="display:none;"> //hidden form that pops up 5000ms<form name = "Radio1">Yes <input type="radio" name="income" value="yes1" onClick="this.form.submit()">No <input type="radio" name="income" value="no1" onClick="this.form.submit()"></form></div><script>function showForm() {document.getElementById("hidForm1").style.display = "block";  //working}setTimeout("showForm()", 5000);var choice = document.getElementsByName("income");for (var i = 0; i < choice.length; i++) {if (choice[i].checked) {alert(choice[i].value);  //not working     } }

Edited May 8, 2014 by paulm

[davej]

It isn't clear to me what you are trying to accomplish. You submit the form to where?

[Hadien]

You're running the "choice" code immediately, while the page is still loading, not when the form is being submitted. And when the page is currently loading neither radio button is checked by default so when it runs through the loop it sees nothing is "checked" and thus won't say anything.

[paulm]

Thanks Hadien, that dusted off some cobwebs...now stumbling on working with submitted value. Have a look please:

<form name = "Radio1" action="">Yes <input type="radio" name="income" value="yes1" onClick="output1(this.form)">No <input type = "radio" name="income" value="no1" onClick="output1(this.form)"></form><script>function output1(income) {var select = document.getElementsByName("income");for (var i = 0; i < select.length; i++) {}  // unsure where incrementing fits w/ finding form valuevar choice = (select.value == "yes1") ? "You clicked yes" : "You clicked no"; //trying to append value to name elementvar par = document.createElement("p"); var parText = document.createTextNode(choice); par.appendChild(parText);document.body.appendChild(par);}

Edited May 8, 2014 by paulm

[davej]

Maybe...

Yes <input type="radio" name="income" value="yes1" onClick="disp1('yes');">No <input type="radio" name="income" value="no1" onClick="disp1('no');"><div id="out1"></div><script>function disp1(msg){document.getElementById('out1').innerHTML='You clicked ' + msg;}</script>

[Hadien]

Ok a few things:1. notice that document.getElementsByName("income") is grabbing all nodes that have the name "income". The function mentions its looking for a plural amount of Elements. It will return a Nodelist object which is, more or less, an array of all nodes with that particular name. 2. Iterating through this Nodelist allows you to check each and every radio option. helping you find out which one has been selected. 3. Creating a paragraph tag like that will constantly create new tags every time you select a radio button. this will basically give the appearance of a history log of which radio buttons you selected. If that is what you're looking for, then great, but its pretty rare for someone to need to resort to that. Having a pre-created paragraph tag which you would constantly overwrite is much more common, used to often relay error messages to user about the invalidated form. if you'r only using this for debugging then use the Console.log() and Console.dir() to better track code behavior. 4. Personally, due to the nature of Radio buttons, there is never more than one radio (with the same name) that is ever selected. Iterating through a Nodelist will work but then theres n nodes that you're iterating through when you know there can only be one selected radio. Davej's code example is closer in the direction that I would code this.

<form name="myForm" action="">  Yes <input type="radio" name="income" value="yes" onClick="selectedRadio(this)">  No  <input type="radio" name="income" value="no"  onClick="selectedRadio(this)"></form>

//I create my own mini-object which I will use for form validation or whatnotvar myForm = {   "income":{    "current":null,    "yes": "You've selected Yes",    "no": "You've selected No"  } } //Written this way, the browser doesn't have to iterate over every single, // now unimportant radio to get the current selected value, however many there are. function selectedRadio(val){//Now you have an easy reference to what the selected radio is myForm.income.current= val;//just an example of what you can do.. alert(myForm.income[myForm.income.current.value]); } 

When it comes to being submitted I can simply check if myForm.income.current is not null (implying that the user selected a radio), so I don't have to go track down the selected radio again, if there is even one. I don't have to iterate through any Nodelist, nor do I ever need to even touch document.getElementById() or document.getElementsByName() as the "this" keyword removes the need to.

Edited May 8, 2014 by Hadien

[paulm]

Thanks Davej, that makes it work, although I'm hoping to learn how to access that submitted value, define in variable, use in conditional, etc. Still don't see how to do that.

 

Hadien thanks for explanation of node behavior. I was under impression it's favorable to create DOM element dynamically. But I guess not always. Either the "current": null or the following was throwing "null" error in console, when I tried bring it your example together:

document.getElementById("start").innerHTML = Radio1.income.current.value;

This JS text program I'm making uses several setInterval and setTimeout...now, after radio form submit, the whole program is refreshing and looping through again...how to prevent that so I can carry on with more forms, user input, etc, without the whole thing starting over every time I get some user input?

 

Thanks.

[Hadien]

Thanks Davej, that makes it work, although I'm hoping to learn how to access that submitted value, define in variable, use in conditional, etc. Still don't see how to do that.

 

Submitted variables are meant to be processed server-side with languages like PHP and Java. Javascript can play with "GET" data by parsing the data from the url, though is mostly intended to help the server know exactly what info to give the client. Javascript can never directly access "POST" data, only indirectly if you make server-side scripting insert the data into javascript as it loads.

 

Hadien thanks for explanation of node behavior. I was under impression it's favorable to create DOM element dynamically. But I guess not always. Either the "current": null or the following was throwing "null" error in console, when I tried bring it your example together:

document.getElementById("start").innerHTML = Radio1.income.current.value;

 

That line should only be called inside the selectedRadio() function, after you've set income.current. At first, income.current is null, if it reaches that line before you set a value it will throw an error due to you trying to access a property on a null (at current.value), and null never has any properties.

 

 

This JS text program I'm making uses several setInterval and setTimeout...now, after radio form submit, the whole program is refreshing and looping through again...how to prevent that so I can carry on with more forms, user input, etc, without the whole thing starting over every time I get some user input?

 

Can you show us the code? It is kind of hard for me to follow with a description like that.

[paulm]

Cool, got your code partially working...but just writes "yes" or "no" to page, not the message (You said yes, etc):

var Radio1 = {"income": {"current": null,"yes": "You said yes","no": "You said no"   }}function output1(val) {Radio1.income.current = val;document.getElementById("start").innerHTML = Radio1.income.current.value;}

And this is what I mean by my program starting over after radio form submit: the setInterval part that precedes form starts again. I don't want it to. I want to keep giving user more forms and messages (after the radio form) without the whole program starting over. Thanks for direction:

var start = ["First greeting", "Second greeting" ];var counter = 0; var elem2 = document.getElementById("start");setInterval(change2, 1000);function change2() {elem2.innerHTML = start[counter]; counter++;if(counter >= start.length) { counter = 1; } } 

Edited May 8, 2014 by paulm

[justsomeguy]

If Radio1.income.current contains the name of the property that you want to print, then you would access it using Radio1.income[Radio1.income.current].

[paulm]

"undefined" in console, after radio button click.

var Radio1 = {"income": {"current": null,"yes": "You said yes","no": "You said no"}}function output1(val) {Radio1.income.current = val;document.getElementById("start").innerHTML = Radio1.income[Radio1.income.current];}

[Hadien]

Are your input elements in the html still using value="yes1"? or did you also update them to value="yes" like I shown in my example?

 

 

 

I'm wondering why you're using multiple forms. When you submit a form, the browser will only submit one of the forms, and will garbage the data in the other forms. That said don't do form submits when selecting a Radio. If you want, you can instead resort to using AJAX calls to submit part of a form information is said information is needed to render the rest of a form.

 

Also, I'm not sure why you're using setInterval in a situation that would seem to only need to fired twice. after you switch to the 'second greeting' the setInterval is still firing in the background when you don't need it to. When using setInterval, the function will return a special ID number that references to the looping construct thats constantly firing. when you're done with setInterval, use clearInterval to stop it from firing.

 

Going back to your previous code snippet:

var start = ["First greeting", "Second greeting" ];var counter = 0; var elem2 = document.getElementById("start");//modify this linevar intervalID = setInterval(change2, 1000);function change2() {elem2.innerHTML = start[counter++]; if(counter >= start.length) {   //modify this line  clearInterval(intervalID)} } 

[paulm]

Thanks Hadien for clearInterval bit; that indeed stops loop. Using davej's solution for message for now; hoping to get your object approach working, to compare.

 

What's the best way to fire new text or form (make appear) only after a previous clearInterval sequence? I can do this by increasing the ms in each setInterval, but thinking there must be a programmatic way?

Edited May 8, 2014 by paulm

[davej]

It might be helpful to outline the series of features you are trying to implement. We don't know if you have some overall goal in mind or if you are just experimenting with random ideas.

[paulm]

Thanks, last post revised as form hidden onClick now.

 

My overall goal is to keep coding appearing and disappearing text and forms in a sequential fashion. set/clearInterval is key, but I'm wondering if there is a better programmatic way rather than setting each form or text with increasing ms in setInterval. Like: after each clearInterval, then display the new form or text.

Edited May 8, 2014 by paulm

[davej]

The only way to do that would be to establish a server-side session so that you can keep track of how many forms have been completed.

[paulm]

Thanks, so unless using setInterval, I need to track how many forms completed in order to fire new form. Possible to do this in cookie session or HTML5 local storage?

[davej]

Well, are you submitting these forms to the server or not? You could use a cookie or local storage but aren't you submitting them to the server one by one?

[paulm]

Not submitting forms to server or db, just browser-based program.

[davej]

Then why use forms?

[paulm]

wasn't aware there was another way to interact with user.

[davej]

Well, forms just define a group of named input elements that are going to be submitted to the server. I guess it doesn't matter, but I've seen them cause unexpected submits. Maybe someone else here can offer advice on that.

[paulm]

When trying radio buttons without form, I was able to select multiple buttons, which was a problem. Else yes I really don't need forms for this per se.

[davej]

So what is the goal here? Are you accumulating panels of user information until you can process and display a final result on the screen?

[Hadien]

You can still use forms. Forms already come with in-built usabilities which you can take advantage of, like the whole thing with Radio button behavior. This way you don't have to write out lines and lines of code logic yourself. Though you should disable any way of submitting that form (a simple html attribute onsubmit="return false;" should suffice).

 

However, you should have also made a disclaimer that you were planning to not use forms for their original intent. It just helps us follow along with what you're trying to do sooner.