SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code:
    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:

    Code:
    	 <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. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by manleybruce View Post
    .....Instead it is displaying the message as its own on the page......
    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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking at an example in stackoverflow which another user asked something like this, I tried this but this didn't work:

    Code:
    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. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    <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. #6
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry another typo, figured it out


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •