Integer + 2x radio button set inputs --> output

Question

I have a form with three sections for variables: the first section is a text field that requires the user to enter a number lets call this user_number; next, is a set of radio buttons. three of them, that determine the 'type' variable of the output. we shall call this banner_type. finally, there is another set of radio buttons, this time, sixteen of them. these determine the 'style' variable of the output, and we can name it banner_style.
To get the script going, there is a button named Generate. it is NOT a submit button. finally, the output area is a div which will show the right results.

Now, the purpose of this form is to allow a user to choose a certain type of image, one that can change in type and style, and output different information for different users, hence the three variables.

If it helps, this is supposed to be simplify the selection of a Folding@Home sig banner. the coding is as follows:

<form>
User Number: <input type="text" id="user_number" /><br /><br />
Team & User Info: <input type="radio" name="banner_type" value="type0" /><br /><br />
Team Info Only: <input type="radio" name="banner_type" value="type1" /><br /><br />
User Info Only: <input type="radio" name="banner_type" value="type2" /><br /><br />
1: <input type="radio" name="banner_style" value="1" /><br /><br />
2: <input type="radio" name="banner_style" value="2" /><br /><br />
3: <input type="radio" name="banner_style" value="3" /><br /><br />
4: <input type="radio" name="banner_style" value="4" /><br /><br />
5: <input type="radio" name="banner_style" value="5" /><br /><br />
6: <input type="radio" name="banner_style" value="6" /><br /><br />
7: <input type="radio" name="banner_style" value="7" /><br /><br />
8: <input type="radio" name="banner_style" value="8" /><br /><br />
9: <input type="radio" name="banner_style" value="9" /><br /><br />
10: <input type="radio" name="banner_style" value="10" /><br /><br />
11: <input type="radio" name="banner_style" value="11" /><br /><br />
12: <input type="radio" name="banner_style" value="12" /><br /><br />
13: <input type="radio" name="banner_style" value="13" /><br /><br />
14: <input type="radio" name="banner_style" value="14" /><br /><br />
15: <input type="radio" name="banner_style" value="15" /><br /><br />
16: <input type="radio" name="banner_style" value="16" /><br /><br />
<input type="button" id="Generate" value="Generate" />
</form>

Image URL: <div id="URL" style=display:inline;></div>

<script type="text/javascript">
document.getElementById('Generate').addEventListener('click',function() {
*SOMETHING NEEDS TO GO HERE*
document.getElementById('URL').innerHTML = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?u=' + user_number + banner_style + banner_type;
});
</script>

So my end goal is to have the basic image address, as shown at the end of the script, then the user number, which should be an exact copy of whatever the user inputs in the text field, then the banner style, which will look something like this:

&c1=000000&c2=000000&c3=000000&c4=000000&c5=000000

This will be different for each different banner_style. Each value represents a hex colour code for different elements on the image itself. Finally, the banner type, which will look something like this:

&bg=0

This will either be 0, 1, or 2.

At this point, i should make it clear that i hardly ever use javascript, so ill need everything explained to me clearly, so i can also learn from it. Also, if at all possible, id like this to be pure JS... none of that jQuery stuff, or similar.

JBB JBB · Accepted Answer · 2012-08-07T22:50:47

Sheesh, no jQuery?

Let me give you the jQuery version first since its far easier.

// load when page is done loading
$(function(){

  // jQuery is just like CSS in that you use selectors to target a node element
  $("#Generate").on("click", function(){

    // get form values for each style we need
    var user = $('#user_number').val();
    var style = $('form input[name=banner_type]:checked').val();
    var type = $('form input[name=banner_style]:checked').val();

    // set image variable by concatenating the values together
    var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;

    // insert image path using the image variable set above into element with id of "URL"
    $("#URL").html( image );
  });

}); // close jquery on page load

Now in plain JavaScript... here goes.

// have to iterate each group to obtain the value
// function has borrowed from http://www.somacon.com/p143.php/
function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";
}

var user = document.getElementById('user_number').value;
var style = getCheckedValue('banner_style');
var type = getCheckedValue('banner_type');

// set image variable
var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;

// insert image into element node with ID of "URL"
document.getElementById("URL").innerHTML = image;

Integer + 2x radio button set inputs --> output

1 Answers