phpmyadmin Question posted in
The official documentation can be found here.

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

I created an if statement to test if either field is blank and to make sure the values of the form are making it to the function. I’ve tried a few variations to the HTML and JavaScript on either ends of the process but still nothing happens. I’ve posted my current HTML document and JavaScript code below. Any help would be greatly appreciated. Thanks!

Also not all of the document.getElementById('').innerHTML = ; and <td> tags are set up yet.

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";
}
Tags:

2

Answers


  1. 0

    I think a better way would be to simply put the required attribute in your HTML inputs, this way you don’t need javascript to validate it as the form won’t let the user submit unless the input has some value.

    Example:

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

    Reference and working demo:
    https://www.w3schools.com/tags/att_input_required.asp

    Login or Signup to reply.
  2. 0

    In this circumstance, there’s no need to use the label, if you use the label, in the getWeather function, you must use this.preventDefault() method to prevent the page jumped to "another" page by form post action. you can replace form with div label.Then, the meaning of id, id is short for identifier, if one page or frame has many elements with the same id value, only the first was selected.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search