innerHTML Hiding after display

Question

I have this HTML tag problem, i loop a div content and trying to display,but after i display itenter code here hides. I was wondering what is my mistakes or needs to display properly

let track;

track =
  '[ {"status":"Initialize","date":"2022-04-24"}, {"status":"Process","date":"2022-04-25"}, {"status":"Completed","date":"2022-04-27"} ]';

function DisplayTrack() {
  populateTrack(track);
}

function populateTrack() {
  var container = document.querySelector("#track_detail");
  var data = JSON.parse(track);

  for (i = 0; i < data.length; i++) {
    if (i + 1 == data.length) {
      container.innerHTML +=
        '<div class="node_active"><h3>' +
        data[i].status +
        "</h3><p>" +
        data[i].date +
        "</p></div>";
    } else {
      container.innerHTML +=
        '<div class="node_done"><h3>' +
        data[i].status +
        "</h3><p>" +
        data[i].date +
        "</p></div>";
    }
  }
}

<div class="trackBox">
  <h1>Search</h1>
  <form>
    <input type="text" name="" placeholder="Type.." id="txt_search">
    <input type="submit" name="" value="Search" id="btn_search" onclick="DisplayTrack()">
  </form>

  <div id="listItem">
    <div class="row1">
      <div class="title"></div>
    </div>
    <div class="row2">
      <div class="description"></div>
    </div>
  </div>
</div>
</div>

<div class="track_progress" id="track_detail">
</div>

It display the loop content but it hides after the display

You have a
there, and since you're submitting it without stating `method` or `action`, these default to GET and the current URL, which is the equivalent of reloading the page. Just remove the form tags, you're using inline code to handle the click anyway. — , Apr 27 '22 at 06:27
I see! thanks man, basically I was doing a step progress bar, I was using the form search Searching the ID, and call api with json return and display the content. — Maki Tamayo, Apr 27 '22 at 06:32
This question is marked as `[duplicate]`. Other than the above one, you may also consider to find answer from this post: [Get value from input with onclick](https://stackoverflow.com/a/42177516/10100812) — Edwin, Apr 27 '22 at 06:43

score 1 · Answer 1 · answered Apr 27 '22 at 06:29

1

Just change input button type to button instead of submit because type of submit will trigger page reload.

<input type="button" name="" value="Search" id="btn_search" onclick="DisplayTrack()">

answered Apr 27 '22 at 06:29

fmsthird

1,745
2
17
34

If the answer is easy and obvious to you, it's a dupe. Search for the dupe and mark the question accordingly in that case. – Apr 27 '22 at 06:35

score 1 · Accepted Answer · answered Apr 27 '22 at 06:31

You set type submit to the input, so when you search it submits the form and reloads the page, you need to prevent the standard behaviour if you want the page not to refresh:

const form = document.querySelector("form")
form.onsubmit = e => e.preventDefault()

const form = document.querySelector("form")
form.onsubmit = e => e.preventDefault()


let track;

track =
  '[ {"status":"Initialize","date":"2022-04-24"}, {"status":"Process","date":"2022-04-25"}, {"status":"Completed","date":"2022-04-27"} ]';

function DisplayTrack() {
  populateTrack(track);
}

function populateTrack() {
  var container = document.querySelector("#track_detail");
  var data = JSON.parse(track);

  for (i = 0; i < data.length; i++) {
    if (i + 1 == data.length) {
      container.innerHTML +=
        '<div class="node_active"><h3>' +
        data[i].status +
        "</h3><p>" +
        data[i].date +
        "</p></div>";
    } else {
      container.innerHTML +=
        '<div class="node_done"><h3>' +
        data[i].status +
        "</h3><p>" +
        data[i].date +
        "</p></div>";
    }
  }
}

<div class="trackBox">
  <h1>Search</h1>
  <form>
    <input type="text" name="" placeholder="Type.." id="txt_search">
    <input type="submit" name="" value="Search" id="btn_search" onclick="DisplayTrack()">
  </form>

  <div id="listItem">
    <div class="row1">
      <div class="title"></div>
    </div>
    <div class="row2">
      <div class="description"></div>
    </div>
  </div>
</div>
</div>

<div class="track_progress" id="track_detail">
</div>

They shouldn't use a submit button in the first place, rather than denying the default behaviour. — connexo, Apr 27 '22 at 06:35
Why not, he might want to perform an ajax while displaying the results, it's a common pattern to use a `submit` event listener on a form, to perform an ajax with the form data retrieved directy from the submit event target . — Cesare Polonara, Apr 27 '22 at 06:42

score 1 · Answer 3 · answered Apr 27 '22 at 06:34

I suppose that the content disappear because the form is getting submitted. By default, if you do not provide any ''action'' property to your html form, the page will be refreshed on submit.

To cancel the form submit, you can try this :

<form id="my-form">
  ...
</form>

document.getElementById("my-form").onsubmit = function (event) {
  event.preventDefault()
}

innerHTML Hiding after display

3 Answers3