How to make an HTML form interact with JS.

events.md

Events in jQuery - How to make an HTML form interact with JS.

Caution: MINDBLOWING!

[[[ EDIT ----- I've found an easier way to get the information from form - update at the end ]]]

I would like to share with you a thing that I've learned today. Thank you Sofie and Matt for helping me understand that.

Let's get straight into the problem. I have a static html website with (among others) a form to increase a temperature.

<div class="onething" id="increase">
  <div class="description">
    <p1> Increase your temperature by: </p1>
  </div>
  <form class="increase_form">
    <input type="text" name="temperature" placeholder="num" class="input_form test"> <br>
    <input type="submit" value="submit" class="main_page_input">
  </form>
</div>

I would like to get the data from the form and make it interact with a javascript method (pass the number from the form as an argument in the function below):

Thermostat.prototype.increase = function(number) {
  if (this.temperature + number > this.currentMax) {
    this.temperature = this.currentMax;
  } else {
    this.temperature += number;
  }
}

In order to do it, I'll be using the following jQuery:

$('.increase_form').submit(function(e) {
  e.preventDefault(); // discussed at the end (seemed more logical)
  thermostat.increase(parseInt(e.target.temperature.value))
  updateTemperature()
})

Let's analyse the jQuery.

• $ is the jQuery sign - necessary to start the action.

• Then I specify the class inside HTML file which I would like my jQuery action to refer to. In this case it's the increase_form' class.

• Then I specify the type of action I'll be doing - since I'll be submitting a form, I pick a submit jQuery action.

• Then I start a function I want to be called by writing: function(e) and this is where it starts to be really interessting.

  • In jQuery each action (like ..click or .submit) creates and event - I've called it e.
  • If we console.log the event(console.log(e)), we'll see an object having various information concerning this submit action (I've pasted only some of them below.)

  n.Event {originalEvent: Event, type: "submit", isDefaultPrevented: ƒ, timeStamp: 12924.299999998766, jQuery2140905160188499293: true, …}
  altKey: undefined
  bubbles: true
  cancelable: true
  target: form.increase_form
  

  • Among this information we can find target. This property informs us of the target of the submit action. In our case it's the increase_form form.
  • When we open the target in the console, we will again get a very long list of information, this time about the target. Among them there are elements, inside of which there is temperature, inside of which there is value. Together it makes the path: e.target.temperature.value, which leads us to the number the user passed in the form. And this is what I call mindblowing.
  • since the value we've extracted is a string, we want to convert it into integer: parseInt(e.target.temperature.value.
  • Then we increase the temperature by this value we've extracted from the event.

  e.preventDefault();

• • I use e.preventDefault(); to prevent the default action of the event. In case of my code I want to prevent the website from putting the temperature back at default - once I increased the temperature by the form, I want it to stay increased. This is still a little bit of magic to me...

UPDATE

After some digging I've found even easier way to obtain the inforamtion from the form. Below I paste two queries - for increase for in an easier, updated way, and for decrease in the old way.

  $('.increase_form').submit(function(e) {
    e.preventDefault();
    var value = $( ".input_form" ).val();
    thermostat.increase(parseInt(value))
    updateTemperature()
    updateMode();
    updateUsage();
    thermostat.maxTemperatureAlert()
  })

  $('.decrease_form').submit(function(e) {
    e.preventDefault();
    thermostat.decrease(parseInt(e.target.temperature.value))
    updateTemperature()
    updateMode();
    updateUsage();
    thermostat.minTemperatureAlert()
  })