HTML, JavaScript snippets

Page content

Simple input form

<!DOCTYPE html>
<html>
  <head>
    <title>The name at tab</title>
  </head>
  <body>
    <h1>First section - h1</h1>
    <p>First paragraph</p>
    <form action="/action_page.php">
      <label for="fname">First input:</label>
      <input type="text" id="first_input" name="input_1"><br><br>
      <label for="lname">Second input:</label>
      <input type="text" id="second_input" name="input_2"><br><br>
      <input type="submit" value="Text on button">
    </form>
  </body>
</html>

You should write action_page.php further. When tou click the button, it passes to /action_page.php?input_1=fistbox&input_2=secondbox.

Add text script

<p id="p1"></p>
<script>
  let p_element = document.getElementById("p1");
  p_element.innerHTML = "Sample text"
</script>

TypeScript in browser

Note: it doesn’t work for me and returns the error below.

Could not load content for https://rawgit.com/Microsoft/TypeScript/master/lib/typescriptServices.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

TypeScript is transcompiled to JavaScript. But we can use the following method so that browser “can read” TypeScript directly.

https://github.com/basarat/typescript-script

Radio button

https://www.w3schools.com/tags/att_input_type_radio.asp

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>

Split row

https://www.w3schools.com/howto/howto_css_two_columns.asp

Text area

https://www.w3schools.com/tags/tag_textarea.asp

form can bind it.

Date

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

Run JS when form is submitted

import script from header. onsubmit. action=#

Difference between onsubmit and action

action is page JS or PHP?

impoet js

<script type="text/javascript" src="script.js"></script> in header. BUt location is matter. Put your script AFTER the actual element, otherwise by the time your javascript code runs, there’s not yet such element in the DOM.

get elements from button

<input type="radio" name="button1" value="red">This is red.<br>
<input type="radio" name="button1" value="blue">This is blue.<br>

function generateEmail() {
  var color = "";
  var color_radios = document.getElementsByName("button1")
  for(i = 0; i < color_radios.length; i++) {
    if(color_radios[i].checked) {
      color = color_radios[i].value;
      break;
    }
  }
  // red or blue is stored in color variable.
}