The page is getting reset on submitting form after a while in HTML, javascript-CodePudding

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.

CodePudding user response：

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()

CodePudding user response：

String.prototype.link() is deprecated. Simply use the <a> tag.
What is web in your code? Why you define onclick in 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>

CodePudding user response：

I think adding this code will solve your problem event.preventDefault();

submit.addEventListener("submit",(event)=>{
event.preventDefault();
// your function displayDetails code});