我正在尝试从 HTML 表单中获取输入并将其传递给 JavaScript 函数

Question

我创建了一个 if 语句来测试任一字段是否为空，并确保表单的值正在传递给函数。我在过程的两端尝试了 HTML 和 JavaScript 的一些变体，但仍然没有任何反应。我已经在下面发布了我当前的 HTML 文档和 JavaScript 代码。任何帮助将不胜感激。谢谢！

还没有设置所有 document.getElementById('').innerHTML = ; 和 <td> 标签。

HTML

<DOCTYPE html>

<!-- LINKS TO STYLES AND JAVASCRIPT -->

<!-- <script src="weatherPull.js" type="text/javascript"> </script> -->

<script src="getWeatherData.js" type="text/javascript"> </script>

<link rel="stylesheet" href="page3.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Girassol&family=Noto+Sans+JP&display=swap" rel="stylesheet">

<!-- START OF PAGE AND PAGE TITLE -->

<html>

<header>
<title> Weather </title>
</header>
<body>

<!------ TITLE AND NAV BAR ------>

<div id="titleBar">

<h1 id="title"> The Title </h1>

</div>
<div id="navBar">

<nav>
<a href="index.html" > Home </a>

<a href="page1.html" > Page 1 </a>

<a href="/phpmyadmin" > phpMyAdmin </a>

<a href="about.html" > About </a>

<a href="template.html" > Page 3 </a>
</nav>

</div>

<!---- LOCATION SELECTION FORM ---->

<div id="weatherForm">

<h1> Weather Data Pull</h1>

<form action="" method="POST" name="weatherForm">
 
<label id="zipCode" for="zipCode"> Enter Zip Code: </label>
<input type="text" name="zipCode" placeholder="Required" id="zipCodeEnter"><br>

<label for="country" id="country"> Select Country: </label>
<select name="country" form="country" id="countrySelect" >
  <option value="us">US</option>
  <option value="canada">Canada</option>
  <option value="mexico">Mexico</option>
  <option value="france">France</option>
</select><br>

<input type="submit" value="Submit" onclick="getWeather()">

</form>

</div>

<!------- WEATHER RESULTS -------->

<div id="weatherResults">

<h1 id="location"></h1>
<table>
    <tr>
        <td id="longitude">stuff</td>
        <td id="latitude">stuff</td>
    </tr>
    
    <tr>
        <td id="weather">stuff</td>
        <td id="windSpeed">stuff</td>
    </tr>
    
    <tr>
        <td id="windGust">stuff</td>
        <td id="">stuff</td>
    </tr>
    
    <tr>
        <td id="">stuff</td>
        <td id="">stuff</td>
    </tr>
    
    <tr>
        <td id="">stuff</td>
        <td id="">stuff</td>
    </tr>
    
</table>

</div>

<!------------------------------->
    
</body>
</html>

JavaScript

function getWeather() {
    var zipCode = document.getElementById('zipCodeEnter').value;
    var country = document.getElementById('countrySelect').value;
    if(zipCode=="" || country=="") {
        alert("Please complete form");
    }
    else{
        continue;
    }
    document.getElementById("location").innerHTML = "stuff";
    document.getElementById("longitude").innerHTML = "stuff";
    document.getElementById("latitude").innerHTML = "stuff";
    document.getElementById("weather").innerHTML = "stuff";
    document.getElementById("windSpeed").innerHTML = "stuff";
    document.getElementById("windGust").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
    document.getElementById("").innerHTML = "stuff";
}

Answer 1

我认为更好的方法是将 required 属性简单地放在 HTML 输入中，这样您就不需要 javascript 来验证它，因为表单获胜' 让用户提交，除非输入有一些价值。

示例：

<input type="text" name="zipCode" placeholder="Required" id="zipCodeEnter" required>

参考和工作演示： https://www.w3schools.com/tags/att_input_required.asp

Answer 2

这种情况下不需要使用标签，如果使用标签，在getWeather函数中，必须使用this.preventDefault()方法来防止页面跳转到“另一个”页面形成 post 动作。可以把form换成div label.Then，id的意思，id是identifier的缩写，如果一个page或frame有很多id值相同的元素，只选择第一个。

我正在尝试从 HTML 表单中获取输入并将其传递给 JavaScript 函数

I'm trying to take inputs from an HTML form and pass it to a JavaScript function

html

javascript

dom

function

html-formhandler