I’m a student tasked with creating various web forms as an assignment. I’ve created a simple form that, upon clicking submit, should capture the entered information and console.log it. As a simple test to make sure my jQuery event is working, I should see "hi" display in the console when I click submit. I am using preventDefault as is and this is still happening. I’m under the impression the preventDefault should be stopping that reload. Additionally, upon clicking submit, I notice a "?" is inserted in my url. For example, if I’m at "www.webpage.com/#create", once I click submit I see "www.webpage.com/?#create" with a question mark just before "#create". From what I’ve read, it kind of seems like my browser is "lost" upon reloading after clicking submit.
HTML - index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<nav>
<div class="bars">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="links">
<li><a href="#home">Home</a></li>
<li><a href="#create">Create</a></li>
<li><a href="#edit">Edit</a></li>
<li><a href="#login">Log-in/Create Account</a></li>
</ul>
</nav>
</header>
<div id="app">
<!-- inject html -->
</div>
<footer></footer>
<!-- javascript/jQuery -->
<script src="lib/jquery-3.7.1.min.js"></script>
<script type="module" src="model/model.js"></script>
<script type="module" src="app/app.js"></script>
</body>
</html>
html - injected into #app div by jQuery
<section class="create">
<h1>Create Form</h1>
<form>
<div class="inputRow">
<input type="text" id="fName" name="fName" placeholder="First Name" />
<input type="text" id="lName" name="lName" placeholder="Last Name" />
</div>
<div class="inputRow">
<input type="tel" id="pTel" name="pTel" placeholder="Personal Phone" />
<input type="tel" id="wTel" name="wTel" placeholder="Work Phone" />
</div>
<div class="inputRow">
<input type="email" id="email" name="email" placeholder="Email" />
<input type="number" id="age" name="age" placeholder="Age" />
</div>
<input type="url" id="website" name="website" placeholder="Website" />
<div class="inputRow three">
<input type="text" id="username" name="username" placeholder="Username" />
<input
type="password"
id="password"
name="password"
placeholder="Password"
/>
<input type="password" id="pin" name="pin" placeholder="Pin" />
</div>
<input type="submit" id="create-submit" value="Submit" />
</form>
</section>
jQuery - app.js
// changeRoute import from model.js
import { changeRoute } from "../model/model.js";
// initListener funtion
function initListener(){
// listens for hash changes to change content
$(window).on("hashchange", changeRoute);
changeRoute();
// listens for submit button click
$("#create-submit").click(function (e) {
e.preventDefault();
console.log("hi");
});
}
// calling funtions
$(document).ready(function(){
initListener();
});
jQuery - model.js
// function export to inject html
export function changeRoute(){
// declare varibables
let hashTag = window.location.hash;
let pageID = hashTag.replace("#", "");
// change content
if(pageID != ""){
$.get(`pages/${pageID}/${pageID}.html`, function(data){
$("#app").html(data);
});
}else{
$.get(`pages/home/home.html`, function(data){
$("#app").html(data);
});
}
}
I navigate by injecting html into my index using the jQuery above, which I believe is the issue. The listener for the submit click is in my app.js code above. One note of upmost importance – I can’t deviate from the method/function utilized above.
$("#create-submit").click(function (e) { e.preventDefault(); console.log("hi"); });
That has to be present per the assignment instructions. I’ve posed this question to others in the class but don’t yet have any responses.
I believe I’ve narrowed the issue down to the "navigation" via html injection, which is also something I need to keep. I basically copy/pasted all of my code into a new project and hard-coded the injected section into my index.html, then remove my model.js and the import from my app.js. At the point, I could click the submit button and "hi" shows in the console as expected.
To my very novice eyes, it looks like the page reloads upon click submit, at which point the "?" injects into the URL because the browser is essentially lost as to where it should be going.
2
Answers
I changed my listener from this:
to this:
...and I was able to console.log as intended, so the problem is technically solved. However, I don't fully understand "why" that change worked. Anyone able to offer any insight?
A better approach would be to use the submit event handler on the form itself. then via jQuery
.serialize()method to collect form data and the.split()and.join()methods to manipulate and format the data before logging it to the console.