I want to display a document.write in a particular <div> tag

JavaScript
1

I am going to use javascript to validate my radio buttons. What I need to do is that I want to use document.write so that the validation message appears in the <div> “radioalert” but I don’t know how to do this. Instead it is displaying the message as its own on the page.

Below is javascript function to check radio buttons:

function validation(){
	if(sessionform.sessionNo[0].checked==false && sessionform.sessionNo[1].checked==false && sessionform.sessionNo[2].checked==false
	&& sessionform.sessionNo[3].checked==false && sessionform.sessionNo[4].checked==false){
		document.write("Please select the Number of Sessions you Require");return false
		;}

below is my form:

	 <form action="create_session.php" method="post" name="sessionform">
  <table>
          <tr>
          <th>2: Number of Sessions :</th>
          <td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td>
		  <td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td>
		  <td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td>
		  <td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td>
		  <td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td>
		  </tr>
		  </table>
<p><strong>9: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="validation()" /></p>
<div id="radioalert"></div>
</form>
2

And that is the way it’s supposed to work…

If you use document.write() to output to the page while it is still loading, then the output will be on the current page. If you use document.write() after the page has finished loading, as in this case, the output goes to a new document.

What you need to do in this case is use getElementById() to get an object reference to the element you want to display the message in and then assign the message to the innerHTML property of the element’s object reference. And then the error message will appear on your current opened web page.

Also, checking each radio button individually is a very inefficient way of doing it and results in bloated code. A much more efficient way is to use a single loop to loop through your array of radio buttons to ensure one of them is checked.

3

Looking at an example in stackoverflow which another user asked something like this, I tried this but this didn’t work:

var radioAlert = document.getElementById("radioAlert");
	
function validation(){ 
	if(sessionform.sessionNo[0].checked==false && sessionform.sessionNo[1].checked==false && sessionform.sessionNo[2].checked==false 
	&& sessionform.sessionNo[3].checked==false && sessionform.sessionNo[4].checked==false){
		radioAlert.innerHTML = "Please select the Number of Sessions you Require";
		;}

I changed div tag id from ‘radioalert’ to ‘radioAlert’

Am i getting close?

4

my bad i did a typo in my div tag, i put RadioAlert when it should of been radioAlert. it is working now. Thank you :slight_smile:

5

A quick and simple demo radio button validator.

In this code you can add/remove as many radio buttons as you like without having to modify the javascript.

With your code, you will have to modify the js every time you add/remove radio buttons.

<script type="text/javascript">
            function validateForm() {
                var errMsgContainerO = document.getElementById('errMsgContainer');
                var btnRad1O = document.getElementsByName('btnRad1');
                var isbtnRad1Checked = false;
                for(i=0; i < btnRad1O.length; i++){
                    if(btnRad1O[i].checked){
                        isbtnRad1Checked = true;
                        var btnNum = i;
                        i = btnRad1O.length;
                    }
                }
                if(!isbtnRad1Checked) {
                   errMsgContainerO.innerHTML = 'Click a radio button';
                } else {
                    errMsgContainerO.innerHTML = 'radio button '+ btnNum + ' was selected';
                }
                return false;  //for demo purposes
            }
        </script>
    </head>
    <body>
        <form action="" method="post" onsubmit="return validateForm();">
            <fieldset>
                <input type="radio" name="btnRad1" />
                <input type="radio" name="btnRad1" />
                <input type="radio" name="btnRad1" />
                <input type="radio" name="btnRad1" />
                <input type="radio" name="btnRad1" />
            </fieldset>
            <input type="submit" value="Submit" />
        </form>
        <p id="errMsgContainer"></p>
    </body>
6

Hi,

Thanks for that simple validator code you have showed me. I can see why it will be better than my example. It does however have one problem though. If I do not select a radio button then it states “click a radio button” message which is obviously correct. But if I do choose a radio button and submit, the message does not change, it still states “click a radio button” and not the other message.

7

sorry another typo, figured it out