Web Analytics Made Easy -
StatCounter I need help - cant seem to find my error - CodingForum

Announcement

Collapse
No announcement yet.

I need help - cant seem to find my error

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • I need help - cant seem to find my error

    I want one text box to enter a name then when clicking submit the there name is to appear on the last document.write line in my code. Or if the press clear the text box is cleared out. There is my code so far.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> How Many Days till Christmas? </TITLE>

    </HEAD>

    <center><div id="latest-post" class="wide-post">
    <h1 class="title" align="left">JavaScript - How Many Days till Christmas?</a></h1>
    <div class="entry"><br>
    <p align="left">
    </center>

    <form name=userform>
    Name: <input type=text name=name size=15 value="" onChange="this.form.name.value=this.value;">
    <input type="button" name="submit" value="Submit">
    <input type="button" name="clear" value="Clear"><br>
    </form>

    <script language="javascript">
    <!---Hide from non-javascript browswers

    function KeyUpEvent()
    {
    var txt1 = document.getElementById("txt1");
    }
    function XmasDays(CurrentDay)
    {
    var XYear=CurrentDay.getFullYear();
    var XDay=new Date("December 25, 2009");
    XDay.setFullYear(XYear);
    var DayCount=(XDay-CurrentDay)/(1000*60*60*24);
    DayCount=Math.round(DayCount);
    return DayCount;
    }
    function MonthTxt(MonthNumber)
    {
    var Month=new Array();
    Month[1]="January";
    Month[2]="February";
    Month[3]="March";
    Month[4]="April";
    Month[5]="May";
    Month[6]="June";
    Month[7]="July";
    Month[8]="August";
    Month[9]="September";
    Month[10]="October";
    Month[11]="November";
    Month[12]="December";
    return Month[MonthNumber];
    }
    function clear()
    {
    document.getElementById("<%= Txt1.ClientID %>").value = "";
    }
    //Stop hiding--->
    </script>

    </HEAD>
    <script language="JavaScript">
    var Today=new Date("December 25, 2009");
    var ThisDay=Today.getDate();
    var ThisMonth=Today.getMonth()+1;
    var ThisYear=Today.getFullYear();
    var DaysLeft=XmasDays(Today);
    var MonthName=MonthTxt(ThisMonth);
    document.write("Today is "+MonthName+" "+ThisDay+" <br>");
    if (DaysLeft > 5)
    {
    document.write("Only "+DaysLeft+" days till Christmas");
    }
    else
    {
    document.write("Happy Holidays from "+name+" <br>");
    }
    // Stop hiding
    </script>
    </HTML>

  • #2
    Use innerHTML

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> How Many Days till Christmas? </TITLE>
    
    </HEAD>
    
    <center><div id="latest-post" class="wide-post">
    <h1 class="title" align="left">JavaScript - How Many Days till Christmas?</a></h1>
    <div class="entry"><br>
    <p align="left">
    </center>
    
    <form name=userform>
    Name: <input type=text name="name" size=15 value="" onChange="this.form.name.value=this.value;readout.innerHTML+=this.value">
    <input type="button" name="submit" value="Submit">
    <input type="button" name="clear" value="Clear"><br>
    </form>
    <div id="readout"></div>
    <script language="javascript">
    <!---Hide from non-javascript browswers
    
    var readout=document.getElementById("readout");
    
    
    function KeyUpEvent()
    {
    var txt1 = document.getElementById("txt1");
    }
    function XmasDays(CurrentDay)
    {
    var XYear=CurrentDay.getFullYear();
    var XDay=new Date("December 25, 2009");
    XDay.setFullYear(XYear);
    var DayCount=(XDay-CurrentDay)/(1000*60*60*24);
    DayCount=Math.round(DayCount);
    return DayCount;
    }
    function MonthTxt(MonthNumber)
    {
    var Month=new Array();
    Month[1]="January";
    Month[2]="February";
    Month[3]="March";
    Month[4]="April";
    Month[5]="May";
    Month[6]="June";
    Month[7]="July";
    Month[8]="August";
    Month[9]="September";
    Month[10]="October";
    Month[11]="November";
    Month[12]="December";
    return Month[MonthNumber];
    }
    function clear()
    {
    document.getElementById("<%= Txt1.ClientID %>").value = "";
    }
    //Stop hiding--->
    </script>
    
    </HEAD>
    <script language="JavaScript">
    var Today=new Date("December 25, 2009");
    var ThisDay=Today.getDate();
    var ThisMonth=Today.getMonth()+1;
    var ThisYear=Today.getFullYear();
    var DaysLeft=XmasDays(Today);
    var MonthName=MonthTxt(ThisMonth);
    readout.innerHTML+="Today is "+MonthName+" "+ThisDay+" <br>";
    if (DaysLeft > 5)
    {
    readout.innerHTML+="Only "+DaysLeft+" days till Christmas"
    }
    else
    {
    readout.innerHTML+="Happy Holidays from "+name+" <br>";
    }
    // Stop hiding
    </script>
    </HTML>
    clark101 is offline Add to clark101's Reputation Report Post   	Reply With Quote
    Last edited by TinyScript; Apr 12, 2009, 05:34 PM.

    Comment


    • #3
      New problem

      Thanks for the help TinyScript,

      I just thought of something else that needs to be added in the code and I think I am just adding in the wrong area...I want an error message to come up if the text box is left null. I have added a new function called name(field) the code looks like this

      function name(field)
      {
      if(field.value==" ")
      readout.innerHTML+=this.value;
      }
      else
      {
      alert("You must enter a name");
      field.focus();
      }
      }

      I added this as the first function.

      Comment


      • #4
        you shouldn't use name as a variable or as an id.
        i changed it to fieldname
        Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
        <HTML>
        <HEAD>
        <TITLE> How Many Days till Christmas? </TITLE>
        
        </HEAD>
        
        <center><div id="latest-post" class="wide-post">
        <h1 class="title" align="left">JavaScript - How Many Days till Christmas?</a></h1>
        <div class="entry"><br>
        <p align="left">
        </center>
        
        <form name=userform>
        Name: <input type=text name="name" size=15 value="" onChange="this.form.name.value=this.value;fieldname(this.value);readout.innerHTML+=this.value">
        <input type="button" name="submit" value="Submit">
        <input type="button" name="clear" value="Clear"><br>
        </form>
        <div id="readout"></div>
        <script language="javascript">
        <!---Hide from non-javascript browswers
        
        var readoutNew=false
        var readout=document.getElementById("readout");
        
        
        function KeyUpEvent()
        {
        var txt1 = document.getElementById("txt1");
        }
        function XmasDays(CurrentDay)
        {
        var XYear=CurrentDay.getFullYear();
        var XDay=new Date("December 25, 2009");
        XDay.setFullYear(XYear);
        var DayCount=(XDay-CurrentDay)/(1000*60*60*24);
        DayCount=Math.round(DayCount);
        return DayCount;
        }
        function MonthTxt(MonthNumber)
        {
        var Month=new Array();
        Month[1]="January";
        Month[2]="February";
        Month[3]="March";
        Month[4]="April";
        Month[5]="May";
        Month[6]="June";
        Month[7]="July";
        Month[8]="August";
        Month[9]="September";
        Month[10]="October";
        Month[11]="November";
        Month[12]="December";
        return Month[MonthNumber];
        }
        function clear()
        {
        document.getElementById("<%= Txt1.ClientID %>").value = "";
        }
        //Stop hiding--->
        </script>
        
        </HEAD>
        <script language="JavaScript">
        
        function fieldname(field)
        {
        if (isNaN(field)) {
        readoutNew=true;
        }
        else
        {
        readoutNew=false
        
        alert("You must enter a name");
        field.focus();
        }
        }
        
        
        var Today=new Date("December 25, 2009");
        var ThisDay=Today.getDate();
        var ThisMonth=Today.getMonth()+1;
        var ThisYear=Today.getFullYear();
        var DaysLeft=XmasDays(Today);
        var MonthName=MonthTxt(ThisMonth);
        readout.innerHTML+="Today is "+MonthName+" "+ThisDay+" <br>";
        if (DaysLeft > 5)
        {
        readout.innerHTML+="Only "+DaysLeft+" days till Christmas"
        }
        else
        {
        if (readoutNew==true)readout.innerHTML+="Happy Holidays from "+name+" <br>";
        }
        // Stop hiding
        </script>
        </HTML>
        clark101 is offline Add to clark101's Reputation Report Post   	Reply With Quote

        Comment


        • #5
          if(field.value=="")is a very weak validation as even a single space or a ? will return false (i.e. pass the validation). !isNaN() simply checks that the value is not a number. (I now see that your statement was if(field.value==" ") which means "if the value is just a single space".
          Use something like this:-

          Code:
          function username(field) {
          x = field.value;
          x = x.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces
          x = x.replace.([^a-z\-\'\s]/gi,"");  // strip anything but a-z space hyphen apostrophe - no other chararcters can appear in a proper name
          if (x.length < 3) {   // minimum 2 characters
          alert ("You must enter a name");
          field.focus();
          return false;
          }
          else {
          readout.innerHTML += x;  // i.e a validated name
          }
          }

          <script language="javascript"> is deprecated and obsolete. Use <script type = "text/javascript"> instead.
          <!---Hide from non-javascript browsers has been obsolete and unneeded since IE4.

          Finally, do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose.
          Last edited by Philip M; Apr 13, 2009, 03:36 AM.

          All the code given in this post has been tested and is intended to address the question asked.
          Unless stated otherwise it is not just a demonstration.

          Comment

          Working...
          X