Your name or email adress:
Do you already have an account?
Forgot your password?
  • Log in or Sign up



    Advertise here
    Results 1 to 11 of 11
    1. #1
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Javascript Tutorial Part 8 - More Forms

      Introduction

      In the last part I explained a few of the things you can do using forms. In this, the final part, of the JavaScript tutorial I will explain how you can do some other things with your JavaScript forms.

    2. # ADS
      Advertise here Circuit advertisement
      Join Date
      My Birthday
      Posts
      Million and counting


       
    3. #2
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      Using The Submit Button

      The most common use of forms is to submit data to a script so that it can be processed. This is fine if you are using CGI to do a mailto form or something like that, but if you just want to run a piece of JavaScript from a form you will need to do things a little differently. The first part you must learn about is the return false; attribute. It can be used as follows:

      <form name="myform" onSubmit="return false;">
      <input type="submit" value="Submit">
      </form>

      You can try it out below:

      What this code does is tell the JavaScript that when the form is submitted it should do nothing. This stops Netscape from refreshing the page (as it would do if there was just a submit button and the form had no action). Now what you can do is to call a function using the submit button:

      <form name="myform" onSubmit="MyFunction(); return false;">

      Which will tell the browser to run the function 'MyFunction' when the Submit button is clicked. You can, of course, use this without the:

      return false;

      part. This would be useful if, for example, you want to validate a form before it is sent to a CGI script. You would include the form's action as normal. Then, in the onSubmit part you would call your function to check what had been entered.

    4. #3
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      Checkboxes

      Checkboxes and radio buttons are two of the remaining form items. First I will cover checkboxes.

      Checkboxes have two possible values:

      Unchecked Box
      Checked Box

      As there are only two possible values, the JavaScript to refer to a checkbox is slightly different to that of a text box. In the example below the checkbox has been given the name my_checkbox and is in the form example1.

      if(window.document.example1.my_checkbox.checked=tr ue)
      {
      alert('The box is checked!')
      }
      else
      {
      window.document.example1.my_checkbox.checked=true;
      alert('The box was not checked so I have checked it!');
      }

      I will now explain what this code does. It will check the value of the checkbox. If the value is ture (which means the checkbox is checked) then it will display an alert box which will tell you the box is checked. If it is not checked it will check the box (put a checkmark in it) and tell you what it has done.

      If, of course, you want to check or refer to the unchecked value of a checkbox the code would be:

      window.document.example1.my_checkbox.checked=false ;

      Remember that, when refering to check boxes you do not need to inclose true or false in quotations.

      As with all other form objects you can use onBlur, onChange and onFocus.

      Radio Buttons

      Radio buttons are usually found in groups like this:

      Blue
      Red
      Green

      Only one button in the group can be checked at a time. Radio buttons work in exactly the same way as a checkbox, having a .checked property which can either be true or false.

    5. #4
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      Selects and Menus


      The two remaining form elements are selects and menus. I will cover menus first. Menus are drop down boxes with several options in them (they are mainly used for things like selecting your country on a form). Selects are really just menus with multiple lines and scrollbars. To show how they work I will show you a quick example of a menu in action and the code for it. For a select box I would just change the height propery. To see the example click here. The code used is below:

      <form name="go" onSubmit="return false;">
      <select name="select" onChange="window.document.location=window.document .go.select.value;">
      <option value="#" selected>Please Select</option>
      <option value="http://www.microsoft.com">Microsoft</option>
      <option value="http://www.yahoo.com">Yahoo!</option>
      <option value="http://www.gowansnet.com">Gowansnet</option>
      </select>
      </form>

      What this code is doing is, when the select is changed it is telling the page in the browser to change its location to the value of the select box. The location of the document is accessed using:

      window.document.location

      As you can see, this is could be very useful, both for getting feedback from visitors and for redirecting them (as in the example above).

    6. #5
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      Conclusion

      In this tutorial I covered some of the most important parts of JavaScript and now you should be able to start writing some quite advanced scripts. There is still a lot of JavaScript left to learn with many more advanced commands. In the future I will do a tutorial on this. One way of improving your skills, though, is to look at the code of other people's pages that use JavaScript. Don't steal them but you can learn more about the language by doing this.

    7. #6
      Join Date
      Dec 2011
      Posts
      253
      MTV$
      999
      Thanks
      0
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      I hope that everyone is

      Has benefited from the my lesson

      Greetings: ...

      ahmadatta2009 - ahmad paolo

    8. #7
      Join Date
      Sep 2012
      Posts
      1,698
      MTV$
      5,031
      Thanks
      2
      Thanked 9 Times in 9 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      Javascript functions
      To keep the browser from executing a script as soon as the page is loaded you can write your script as a function.
      A function contains some code that will be executed only by an event or by a call to that function.
      You may call a function from any where within the page from other pages if the function is embedded in an external javascript files.
      Functions are defined at the beginning of a page in the <head> section.
      Function is a reusable code block that will be executed by an event or when the function is called.
      Ex:- 1
      <head>
      <script>
      Function display message()
      {
      Alert (“hello world !”)
      }
      </script>
      </head>
      <body>
      <input type=”button” value=”cluck me !” onclick=” display message()”>
      </body>

    9. #8
      Join Date
      Sep 2012
      Posts
      1,698
      MTV$
      5,031
      Thanks
      2
      Thanked 9 Times in 9 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      Javascript functions
      To keep the browser from executing a script as soon as the page is loaded you can write your script as a function.
      A function contains some code that will be executed only by an event or by a call to that function.
      You may call a function from any where within the page from other pages if the function is embedded in an external javascript files.
      Functions are defined at the beginning of a page in the <head> section.
      Function is a reusable code block that will be executed by an event or when the function is called.
      Ex:- 1
      <head>
      <script>
      Function display message()
      {
      Alert (“hello world !”)
      }
      </script>
      </head>
      <body>
      <input type=”button” value=”cluck me !” onclick=” display message()”>
      </body>
      what is this??? i dont know..... just copied

    10. #9
      Join Date
      Sep 2012
      Posts
      1,124
      MTV$
      3,336
      Thanks
      1
      Thanked 3 Times in 3 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      I will now explain what this code does. It will check the value of the checkbox. If the value is ture (which means the checkbox is checked) then it will display an alert box which will tell you the box is checked. If it is not checked it will check the box (put a checkmark in it) and tell you what it has done.

      If, of course, you want to check or refer to the unchecked value of a checkbox the code would be:

      window.document.example1.my_checkbox.checked=false ;

      Remember that, when refering to check boxes you do not need to inclose true or false in quotations.

      As with all other form objects you can use onBlur, onChange and onFocus.

      Radio Buttons

      Radio buttons are usually found in groups like this:

      Blue
      Red
      Green

      Only one button in the group can be checked at a time. Radio buttons work in exactly the same way as a checkbox, having a .checked property which can either be true or false.

    11. #10
      Join Date
      Sep 2012
      Posts
      1,037
      MTV$
      1,042
      Thanks
      2
      Thanked 2 Times in 2 Posts

      Re: Javascript Tutorial Part 8 - More Forms

      Using The Submit Button

      The most common use of forms is to submit data to a script so that it can be processed. This is fine if you are using CGI to do a mailto form or something like that, but if you just want to run a piece of JavaScript from a form you will need to do things a little differently. The first part you must learn about is the return false; attribute. It can be used as follows:

      <form name="myform" onSubmit="return false;">
      <input type="submit" value="Submit">
      </form>

    12. #11
      Join Date
      Jun 2013
      Posts
      769
      MTV$
      1,993
      Thanks
      0
      Thanked 1 Time in 1 Post

      Re: Javascript Tutorial Part 8 - More Forms

      javascript form is one of the part of the adding functionality, validate forms, communicate with the server such as css, events, nodes and so many other form things. they are used to allow one of the creating menus, validate forms, provide interactive and so many other form things.

    Thread Information

    Users Browsing this Thread

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

    Tags for this Thread

    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
    •