www.webdeveloper.com
Results 1 to 9 of 9

Thread: Form Trouble HELP!!!

Hybrid View

  1. #1
    Join Date
    Mar 2009
    Posts
    4

    Exclamation Form Trouble HELP!!!

    okay this code is supposed to be able to write out different responses for my check boxes but of course it is not working so here is the code

    <script type="text/javascript">
    function get_boxes()
    {
    var many = document.week.day.length;
    document.write("the length of the checkboxes is " + many + "<br />");
    document.write(i + "<br />");
    for(i=1; i<many; i++)
    {
    if (document.week.day[i].checked==true)
    {
    document.write(i);
    }

    }
    var weekday = document.week.day[2].value;
    document.write(weekday);
    }/*closes function*/



    </script>
    </head>
    <body>
    <fieldset>
    <legend>
    Checkbox Attributes
    </legend>
    <form name="week">

    <input type="checkbox" name="day" value="s"/>Sunday<br>
    <input type="checkbox" name="day" value="m"/>Monday<br>
    <input type="checkbox" name="day" value="t"/>tuesday<br>
    <input type="checkbox" name="day" value="w"/>Wednesday<br>
    <input type="checkbox" name="day" value="th"/>Thursday<br>
    <input type="checkbox" name="day" value="f"/>Friday<br>
    <input type="checkbox" name="day" value="sa"/>Saturday<br>
    <input type="button" value="submit" onClick="get_boxes()">

    </form>
    </fieldset>


    </body>

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    You are calling document.write() after the page has finished loading, and so it will overwrite the entire web page.

    first, you want to start with valid HTML:
    Code:
    <form method="get" action="#" name="week">
      <fieldset>
        <legend>Checkbox Attributes</legend>
        <input type="checkbox" name="day" value="s">Sunday<br>
        <input type="checkbox" name="day" value="m">Monday<br>
        <input type="checkbox" name="day" value="t">tuesday<br>
        <input type="checkbox" name="day" value="w">Wednesday<br>
        <input type="checkbox" name="day" value="th">Thursday<br>
        <input type="checkbox" name="day" value="f">Friday<br>
        <input type="checkbox" name="day" value="sa">Saturday<br>
        <input type="button" value="submit" onClick="get_boxes(this.form)">
        <div id="message"></div>
      </fieldset>
    </form>
    Fieldset tags go inside form tags. You also seem to be mixing XHTML with HTML. Decide on one or the other and stick with it. In the code I posted, I decided on plain old HTML, as most browsers do not truly support XHTML and instead read XHTML as invalid HTML. Only if you set the content-type HTTP header to application/xml+xhtml does the browser parse the XHTML document using its XML parser. Internet Explorer does not support XHTML right now, so I normally just use good-ole fashioned HTML.

    Anyhow. Back on topic.

    Notice that the get_boxes() function call has been changed. It is passed this.form. The "this" keyword is a pointer in the onclick to the submit button. Each form button and field has a property called "form" which points to the <form> tag that contains the field or button, so the get_boxes function gets passed a document object model node reference to the <form> tag. You don't need to use the document.forms.form_name.field_name syntax.

    Code:
    function get_boxes(form)
    {
      var many = form.elements.day.length;
      var message = "the length of the checkboxes is " + many + "<br>");
      var i = 0;
      var weekday = form.elements.day[2].value;
      
      for(i; i < many; i++)
      {
        if (form.elements.day[i].checked)
        {
          message += "<br>" + i;
        }
      }
      message += "<br>" + weekday;
      
      document.getElementById("message").innerHTML = message;
    }
    I removed the document.write function calls and replaced them with the message variable. At the end of the function, the message is added to the <div id="message"> tag.

  3. #3
    Join Date
    Mar 2009
    Posts
    4
    thank you very much

  4. #4
    Join Date
    Mar 2009
    Posts
    4
    okay I put it in to the program and yet still it does not work, the only part that does not work would be the part with seeing which check box is checked and writing out its response

  5. #5
    Join Date
    Mar 2009
    Posts
    4

    Question Forms

    okay this code is supposed to be able to write out different responses for my check boxes as in if you click the Sunday box and then click submit you are supposed to get a document.write stating "Sunday" and so on but of course it is not working so here is the code

    <script type="text/javascript">
    function get_boxes()
    {
    var many = document.week.day.length;
    document.write("the length of the checkboxes is " + many + "<br />");
    document.write(i + "<br />");
    for(i=1; i<many; i++)
    {
    if (document.week.day[i].checked==true)
    {
    document.write(i);
    }

    }
    var weekday = document.week.day[2].value;
    document.write(weekday);
    }/*closes function*/



    </script>
    </head>
    <body>
    <fieldset>
    <legend>
    Checkbox Attributes
    </legend>
    <form name="week">

    <input type="checkbox" name="day" value="s"/>Sunday<br>
    <input type="checkbox" name="day" value="m"/>Monday<br>
    <input type="checkbox" name="day" value="t"/>tuesday<br>
    <input type="checkbox" name="day" value="w"/>Wednesday<br>
    <input type="checkbox" name="day" value="th"/>Thursday<br>
    <input type="checkbox" name="day" value="f"/>Friday<br>
    <input type="checkbox" name="day" value="sa"/>Saturday<br>
    <input type="button" value="submit" onClick="get_boxes()">

    </form>
    </fieldset>


    </body>

  6. #6
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Comment out (or delete) the line that reads :

    Code:
    document.write(i + "<br />");
    i doesn't exist at that point so you will error out.
    54 68 65 42 65 61 72 4D 61 79

  7. #7
    Jgy3183 is offline Web Applications Develope
    Join Date
    Mar 2009
    Posts
    29
    check line 20:
    var message = "the length of the checkboxes is " + many + "<br>"; )
    There is a ) character at the end; remove it, and the function should then work.

  8. #8
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Multiple Threads merged....
    54 68 65 42 65 61 72 4D 61 79

  9. #9
    Jgy3183 is offline Web Applications Develope
    Join Date
    Mar 2009
    Posts
    29
    Look at the following. Remember, because the values of the input boxes are s,m,t,..., that is what it will display.

    Code:
    <script type="text/javascript">
    function get_boxes()
    {
    	//Get the number of checkboxes
    	var many = document.week.day.length;
    
    	//Set message string to blank
    	var msg = "";
    
    	//Begin Population of Message string
    	msg+="The length of the checkboxes is " + many + "<br />";
    	msg+="Values Checked:<br>";
    
    	//Loop through the checkboxes - * Start at ZERO and go to (many-1)
    	for(var i=0; i<many-1; i++)
    	{
    		//Check to see if checked
    		if (document.week.day[i].checked==true)
    		{
    			//Checked-- append msg string
    			msg+=document.week.day[i].value+"<br>";
    		}
    
    	}//End Loop
    
    	//Identify Msgbox By Id (see below in HTML)
    	var msgBox = document.getElementById('message');
    	
    	//Populate "message" div with msg string
    	msgBox.innerHTML=msg;
    	
    }/*closes function*/
    
    
    
    </script>
    </head>
    <body>
    <fieldset>
    <legend>
    Checkbox Attributes
    </legend>
    <form name="week">
    
    <input type="checkbox" name="day" value="s"/>Sunday<br>
    <input type="checkbox" name="day" value="m"/>Monday<br>
    <input type="checkbox" name="day" value="t"/>tuesday<br>
    <input type="checkbox" name="day" value="w"/>Wednesday<br>
    <input type="checkbox" name="day" value="th"/>Thursday<br>
    <input type="checkbox" name="day" value="f"/>Friday<br>
    <input type="checkbox" name="day" value="sa"/>Saturday<br>
    <input type="button" value="submit" onClick="get_boxes()">
    
    </form>
    </fieldset>
    
    <!--- Used to hold the message -->
    <div id="message"></div>
    
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles