how to insert the button back after the click of a click that makes a search?

Question

Hello I created a simple application that allows me to do a database search. I created an html page with functions in javascript. This is what shows my index.html

<hmtl>
<body onload="initialize()">
        <h1>Choose your route:</h1> 
        <form action="/find" method="POST" autocomplete="on">
          <td><input type="text" name="mypos" placeholder="Your Position" size="20" /></td>
          <td><input type="text" name="yourpos" placeholder="Destination" size="20" /></td>
          <td><button type="submit">Search</button></td>
          <button type="Reset" value="Reset">Reset</button> 
       <div id="map_canvas" style="1500px; 1000px"></div>
         </body>
        </html>

After inserting the coordinates in the changes and then searching, my output will be a separate line where I can print to the screen if the route exists or not ie: Route not found or Route found. My problem is to insert a button to go back to this point in the search so as to go back to the start page or index.html. The problem is that I only have one html page (index.html) so any command can only insert it in the search page and not in the results page (the results page is just a printed string is not another html page). This page also interacts with flask. I hope I was clear. Thank you very much for the attention.

Why there are two opening body tags and no closing form-tag? — alexP, Feb 20 '19 at 14:24
Possible duplicate of [How to reset (clear) form through JavaScript?](https://stackoverflow.com/questions/3786694/how-to-reset-clear-form-through-javascript) — Serge K., Feb 20 '19 at 14:26
The two are two body I was wrong to transcribe the code but that is not the problem. alexP. — Carmelo10, Feb 20 '19 at 15:05
I saw the question you asked me, but it has nothing to do with anything. I'm sorry. Serge K. — Carmelo10, Feb 20 '19 at 15:07

score 0 · Answer 1 · answered Feb 20 '19 at 14:48

As far as I could understand, what you have is index.html doing a postback, and the response of that postback renderizes a different page with the result of the insertion. And it's that result page from where you want to back to index.html. Well, you have two options:

1. In the result page, create a button like this:

<button class="backbutton">Back</button>

<script>
    // Somewhere in your initialization code:
    const backbutton = document.querySelector('.backbutton');
    backbutton.addEventListener('click', function(){
        window.history.back();
    });
</script>

That gives you some flexibility because it doesn't depend on the route to your index.html page.

2. Simply include a link to your index.html page in your result page:

<a href="index.html">Back to search form</button>

Thanks a lot for the answer. I modified the question.I tried your solution and it does not work because I think it's ok if I had two html pages connected while I own only one. — Carmelo10, Feb 20 '19 at 15:16

Cat · Answer 2 · 2019-02-20T16:25:37.507

If you want to use the values from a form input after the form is submitted (and cleared), you need to have memorized the value somewhere beforehand. One way to do this is to add (to the input) a listener for the blur event (which happens when the input loses the focus, implying that the user is done editing the input).

In the listener function, you can store the value in a javascript variable for later, like

const firstMyPosInput = document.getElementsByName("myPos")[0];
let myPosValue = firstMyPosInput.value;

Now you can add a new button element (like <button id="myBtn">Try again</button> and give it a click listener that sets the input's value back to what it was before like firstMyPosInput.value = myPosValue.

Thanks a lot for the answer. I modified the question maybe I explained the problem badly. — Carmelo10, Feb 20 '19 at 15:15

how to insert the button back after the click of a click that makes a search?

2 Answers2