Basic Tutorial JavaScript : Displaying HTML Form Selection Result On One Page

At this time I will explain how to display the HTML form in accordance with our own choice, for penjelesannya please refer to my tutorial below

What Will I Learn?

• You will how to display the html form according to the option
• You will use the basic form of HTML javascript usage
• You will be able to use the if and other functions in javascript

Requirements

• You already have basic HTML knowledge
• You must have a text editor and browser to learn this tutorial

Difficulty

• Basic

Tutorial Contents
In this tutorial I will discuss the use of var, form and if else to create a javascript programming code in order to display the results of the program pilhan, then see through this tutorial.

• Open your text editor then save with html extension, example: basic-part2.html
• Next inside basic-part2.html write the html element as usual.

< html>
< head >
< title > Displaying HTML Form Selection Result On One Page< /tilte>
< /head >
< body >
< /body >
< /html >

Next, before starting the program we will generate < SCRIPT language = "Javascript"> < / script> function to start and introduction of programming language which will be executed and put after < head> and before < /head>

• Now we will generate the javascript command code From the HTML form, I create a show function () that will be executed when the button is pressed.

function show(){
  var name_rules=document.getElementById("form_utopian").select1.value;
  var rules_description=document.getElementById("description"); }

Explanation :

• in the first line I create variable nama_rules to be taken the contents of the tag select from the form. by using the document.getElementById command to get an HTML object by using the id attribute. As soon as document.getElementById ("form_utopian") will generate an HTML object with id = "form_utopian" . In this case the HTML tag that has id = "form_utopian" is the only form in the HTML code.

• Next, to get from the select tag from form_utopian, we create the command: document.getElementById ("form_utopian"). Select1.value. The select1.value command will be assigned from the select tag that is currently selected. To save sparingly later, I save this in variable name_rules.

• while the second variable is rules_description. This variable contains the 'object' of the container where the description of the city will be displayed. I also use the document.getElementById command for this object. The code we create from the < p> tag in our HTML code is: container.

• After getting the value of name_rules currently selected, next we just select and display the appropriate results. Since we create three rules, we need three conditions if to check and display the appropriate data.
  Here is the code:

if (name_rules=="tutorial")
    {
      rules_description.innerHTML="Tutorials may only be about the technical aspects of the project or how-tos for the final users";
    }
  else if (name_rules=="video-tutorial")
    {
      rules_description.innerHTML="The video and audio recording should be in HD (720 the min)";
    }
  else if (name_rules=="suggestions")
    {
      rules_description.innerHTML="Suggestions are minor features/enhancements that you would like to have in an Open Source project"; }

Explanation :

• If the variable name_utopian is Tutorial, it will display the word "Tutorials may only be about the technical aspects of the project or how-tos for the final users" in "description".

• To get this result, I use the innerHTML property of an HTML object. Thus, to display the sentence inside the

  tag with id = description, we can use the command: document.getElementById ("description"). InnerHTML = "sentence".

• But I have already accommodated the value of document.getElementById ("description") on the rules_description variable, so stay using the rules rules_description.innerHTML = "Tutorials may only be about the technical aspects of the project or how-tos for the final users". For Video Tutorials and Suggestions, I just need to repeat the condition of the IF so that the results are appropriate.

• At this stage we have successfully created the javascript code, then we will display the results, that is by using the HTML element
  Here is the code:

< h2>Displaying HTML Form Selection Result On One Page< /h2>
< form id="form_utopian" name="form_utopian" onsubmit="return false">
  < label for="select1">Select Rules: < /label>
  < select id="select1" name="select1">
    < option value="tutorial">Tutorial< /option>
    < option value="video-tutorial">Video Tutorial< /option>
     < option value="suggestions">Suggestions< /option> 
  < input type="submit" value="Show Description" onclick="show()">
< /form>
< p id="description">< /p>

Explanation :

• The above code is placed after and before </ body> and there we create a form with id = "form_utopian" and name = "form_utopian" attribute. This form has only one form object, ie select and one submit button to submit form results.

• in the < select> form Object we give attribute id = "select1". and name = "select1". Each value of select (tag < option>) has its own value, ie three rule names: Tutorials, Video Tutorials and Suggestions. If noted, the < form> tag has the onsubmit = "return false" attribute. This attribute is a JavaScript code that serves to stop the standard feature of the form when the submit button is clicked.

• in the < submit> tag, I added an HTML attribute that works to 'associate' JavaScript, ie onclick = "show ()". This attribute serves as a JavaScript event that will be called when the submit button is clicked. The show function () is what we will create the program using JavaScript.

After the HTML code to create the form, I added a < p id = "description"> < /p> tag that will be used as the result form description.

• Then save and run in the browser, if all the code you write is correct then the result as below.
  

Full Code :

Live Code : Codepen.io
Github : basic-part2.html

Curriculum

• Basic Tutorial Javascript : Learn To Program To Determine Odd Number Or Even Number




---

Posted on Utopian.io - Rewarding Open Source Contributors

---