The page is getting reset on submitting form after a while in HTML, javascript
Question
In the HTML page I am creating, I have two url inputs. One for website and one for Image url. The link and the image at the url will be displayed. But when I submit, the page resets after few seconds after displaying the result. I am attaching my minimum reproducible code here. When only one of the inputs is https then it works not otherwise. Why it is behaving like this. There is no error also.
HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<script type = "text/javascript" src="script.js"></script>
<body>
<form>
<label for="Website" >Website</label>
<input type="url" id="Website" >
<label for="ImageLink" >Image Link</label>
<input type="url" id="ImageLink" >
<button type="submit" onclick="displayDetails()" id="submit">Submit</button>
</form>
<table id="display">
<tr>
<th>Description</th>
<th>Image</th>
</tr>
</table>
</body>
</html>
The script is as follows:
script.js:
var row = 1;
var submit = document.getElementById("submit");
submit.addEventListener("submit",displayDetails);
function displayDetails(){
var website = document.getElementById('Website').value;
var imageSrc = document.getElementById('ImageLink').value;
var display = document.getElementById("display");
var Row = display.insertRow(row);
var cell = Row.insertCell(0);
var cell2 = Row.insertCell(1);
web = website.link(website);
cell.innerHTML = web ;
img = document.createElement("img");
img.src = imageSrc;
cell2.appendChild(img);
row++;
}
If i enter random website name without https, then it works but not when both are valid https sites.
3 answers
solution1
0 2022-09-15 08:38:52
String.prototype.link() is deprecated. Simply use the
<a>tag.What is
webin your code? Why you defineonclickin html AND add event listener in js? Things like this will give you weird problems sooner or later.The button in your form submits the form, thus navigates to url. Simply add
event.preventDefault()or move the buton outside of the form.
var row = 1; var xyz = document.getElementById("xyz"); xyz.addEventListener("click", (event) => displayDetails(event)); function displayDetails(event) { event.preventDefault(); var website = document.getElementById("Website").value; var imageSrc = document.getElementById("ImageLink").value; var display = document.getElementById("display"); console.log(website, imageSrc, display) var row = display.insertRow(row); var cell = row.insertCell(0); var cell2 = row.insertCell(1); const aTag = document.createElement('a'); aTag.href = website; aTag.innerText = website; cell.appendChild(aTag); img = document.createElement("img"); img.src = imageSrc; cell2.appendChild(img); console.log(display) row++; }
<form> <label for="Website">Website</label> <input type="url" id="Website"> <label for="ImageLink">Image Link</label> <input type="url" id="ImageLink"> <button id="xyz">Submit</button> </form> <table id="display"> <tr> <th>Description</th> <th>Image</th> </tr> </table>
solution2
0 ACCPTED 2022-09-15 08:39:53
That is because whenever a form is submitted, a refresh event is triggered by default. You have to prevent this behavior. Update your code as follows.
Pass in parameter event to your function.
<button type="submit onclick="displayDetails(event)" id="submit">Submit</button>
Also, you have to update your JavaScript function as follows
function displayDetails(e) {
e.preventDefault();
var website = document.getElementById("Website").value;
var imageSrc = document.getElementById("ImageLink").value;
var display = document.getElementById("display");
var Row = display.insertRow(row);
var cell = Row.insertCell(0);
var cell2 = Row.insertCell(1);
web = website.link(website);
cell.innerHTML = web;
img = document.createElement("img");
img.src = imageSrc;
cell2.appendChild(img);
row++;
}
Notice that the parameter event is received as e and the default behaviors are prevented by e.preventDefault()
solution3
-1 2022-09-15 08:40:51
I think adding this code will solve your problem event.preventDefault();
submit.addEventListener("submit",(event)=>{
event.preventDefault();
// your function displayDetails code});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.