How can I utilize "function init()" with the code I have in JavaScript?-CodePudding

I have been tinkering for a while now with some code that I have made. I am looking for a way to include <form action="#" method="post" id="theForm"></form> in it. Why? Because I forgot to add it in my HTML when creating it, and I want to know if I can. I have been told that it is semantically incorrect to have a submission with input fields without it?

Problem: If I try and add the JS code:

function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = insertyourfunctionhere;
}
window.onload = init;

In conjunction with the HTML <form action="#" method="post" id="theForm"></form>, which ideally would replace the wrapper to my existing code, I cannot find a way to modify my code to use this setup. Any insight would be great.

Here is my code: HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Averager</title>
    <link rel="stylesheet" href="css/styles.css">
    <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

    <div class="grid-container">
        <div class="item1">
            <div class="wrapper">
                <fieldset>
                    <legend>Enter in two temperatures</legend>

                    <div><label for="tempLow">Low Temp:</label><input type="text" id="tempLow" required></div>



                    <div><label for="tempHigh">High Temp:</label> <input type="text" id="tempHigh" required></div>

                    <div><button id="submit" onclick="return validateForm()">Add the temperatures!</button></div>

                    <table id="myTable"></table>


                </fieldset>
            </div>
        </div>
    </div>


</body>

</html>

and here is my javascript:

var tempLOW = [];
var tempHIGH = [];

var i = 0;

var todayS = "";
var today = new Date();


function datePrint() {
    'use strict';
    var dd = today.getDate(),
        mm = today.getMonth()   1,
        yyyy = today.getFullYear();

    if (dd < 10) {
        dd = '0'   dd;
    }

    if (mm < 10) {
        mm = '0'   mm;
    }

    todayS = mm   '/'   dd   '/'   yyyy;
    today.setDate(today.getDate() - 1);
}


function deleterow() {
    'use strict';
    var table = document.getElementById("myTable"),
        rowCount = table.rows.length;

    table.deleteRow(rowCount - 1);
}

function generateRow(dt, tL, tH) {
    'use strict';
    var table = document.getElementById("myTable"),
        row = table.insertRow(-1),
        cell1 = row.insertCell(0),
        cell2 = row.insertCell(1),
        cell3 = row.insertCell(2);
    cell1.innerHTML = dt;
    cell2.innerHTML = tL;
    cell3.innerHTML = tH;
}

function calcAvg() {
    'use strict';
    var table = document.getElementById("myTable"),
        sumLow = 0,
        sumHigh = 0,
        avgLow,
        avgHigh;

    for (var i = 0; i < tempLOW.length; i  ) {
        sumLow  = parseInt(tempLOW[i]);
        sumHigh  = parseInt(tempHIGH[i]);
    }

    avgLow = sumLow / tempLOW.length;
    avgHigh = sumHigh / tempHIGH.length;

    generateRow("Averages", avgLow.toFixed(2), avgHigh.toFixed(2));

}

function validateForm() {

    var t1 = document.getElementById("tempLow").value;
    var t2 = document.getElementById("tempHigh").value;


    if (t1 == "" || t2 == "") {

        alert("Both temprature values must be entered");
        return false;

    } else {

        tempLOW.push(document.getElementById("tempLow").value);
        tempHIGH.push(document.getElementById("tempHigh").value);

        if (i == 0) {

            generateRow("Date", "LOW TEMP", "HIGH TEMP");
            datePrint();
            generateRow(todayS, t1, t2);

            calcAvg();
            i  ;

        } else {
            deleterow();
            datePrint();
            generateRow(todayS, t1, t2);
            calcAvg();

            i  ;

        }


    }

}

CodePudding user response：

Well, according to MDN:

“The HTML element represents a document section containing interactive controls for submitting information.”

If you intend to submit user input, why not to use it? I agree that not using, it’s kinda semantically incorrect.

Injecting dynamically tags is a possible technique, but you should ask yourself if this would be the a good approach or not.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms

CodePudding user response：

Add an ID to a div:
From: <div class="item1">
To: <div class="item1" id="withForm">

var node = document.createElement("form");
node.setAttribute("action", "#");
node.setAttribute("method", "post");
node.setAttribute("id", "theForm");
node.setAttribute("onsubmit", "doSubmit()");

var textnode = document.createTextNode("Add text here: ");
node.appendChild(textnode);

var textboxChild1 = document.createElement("input");
textboxChild1.setAttribute("id", "mytextbox");
textboxChild1.setAttribute("type", "text");
node.appendChild(textboxChild1);

document.getElementById("withForm").appendChild(node);

function doSubmit(){
  alert(1);
}
window.onload = doSubmit();

#withForm {
  border: 1px solid green;
}

form {
  margin: 5px;
  padding: 15px;
  border: 1px solid red;
}

<div id="withForm">
  <div id="childDiv">
    Something in child div 1
  </div>
  <div id="childDiv">
    Something in child div 2
  </div>
</div>

And then add your onsubmit as required.

Note:
If you face any problem submitting a form without any elements, create a hidden element (input type=hidden) and then try