Getting results from different types of forms

Question

So I have created a from and i want to present the selected choices by the user to be displayed in an ordered list, when they push the submit button. I have tried everything i could find and the result i get for all three variables "info" is undefined. I would be happy if you could help me with this Thank you.

The following is te code written for the forms.

<form id="music">
                    <div id="m"> 
                    <p>What is your favourite genre of music?</p>
            <input type="radio" name="genre" value="Pop" id="Pop" checked> <label for ="Pop"> Pop </label>
            <input type="radio" name="genre" id="Rock" > <label for ="Rock"> Rock </label>
            <input type="radio" name="genre" id="Classical"> <label for ="Classical"> Classical </label>
            <input type="radio" name="genre" id="Rap/HipHop" > <label for ="Rap/HipHop"> Rap/HipHop </label>
            <input type="radio" name="genre" id="Electronic" > <label for ="Electronic"> Electronic </label>
            <input type="radio" name="genre" id="Country" > <label for ="Country"> Country </label>
            <input type="radio" name="genre" id="Other" > <label for ="Other"> Other </label>
            <input type="radio" name="genre" id="don't listen to music" > <label for ="don't listen to music"> I don't listen to music! (WUT??) </label>
            </div> 
            </br>
            </br>
            How do you usually commute to UVic?
            <div id="t">
            <form id="trans">
            <select name="commute">
                    <option value="Bus"> Bus </option>
                    <option value="Drive"> Drive </option>
                    <option value="Bike"> Bike </option>
                    <option value="Walk"> Walk </option>
                    <option value="Crawl"> Crawl -__- </option>
                    <option value="Fly"> Fly?!! </option>
            </select>
            </div>
            </br>
            <div id="p">
            <form id="pasta">
            What is your favourite type of sauce on pasta?
            <input type="text" name="sauce" value="Sauce boss"> 
            </div>
            </br>
            <button type="button" onclick="result()"> Submit </button>
            <button type="reset" value="Reset">Reset</button>
    <ol id="myResult"> &nbsp; </ol>

The following is the javascript written for the function "result()", which is suppose to work when the submit button is pushed.

function result() { 
        var info = new Array();

info[0] = document.getElementById("m").value;


info[1] = document.getElementById("t").value;


info[2] = document.getElementById("p").value;

info.sort();

var mySubmit = document.getElementById("myResult");

var y = " ";

for (var i=0; i<info.length; i++)

 {
  var x = info[i];

    y = y + "<ol>" + x + "</ol>";
 }

 mySubmit.innerHTML = y;

}

1) no need for multiple forms 2) http://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button (div have no value) 3) http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — sinisake, Apr 01 '15 at 20:30

Qianyue · Answer 1 · 2015-04-01T21:01:08.043

In fact, there are some problems in your codes. I have corrected some, and here is the jsfiddle working as you wish.

You shouldn't get the value of a div, a div element has NOT value attribute. This is the main problem of your codes. Besides, your don't have to separate the form, all the inputs can include in one form.

Also I add JQuery for getting the job easier, for example, to get the value of the radio button :
info[0] = $('input[name="genre"]:checked').val();

score 0 · Answer 2 · answered Apr 01 '15 at 21:15

I'm not gonna solve this for you as you simply will not learn for yourself so here's the issues:

No need for multiple forms
You haven't closed any forms (not that you need more than one) although it's not the cause of the errors.
In your javascript you're trying to get the value of a division. <div> is not a form field/element so it doesn't have a value. Hence undefined as the result.

My recommendation, check some basic tutorials on HTML forms and understand them properly. Check some examples. Otherwise you've pretty much got the right idea with your javascript except that you're trying to get data values from elements that don't have any values.

I hope this helps

Getting results from different types of forms

2 Answers2