点击进行搜索的点击后如何插回按钮?

问题描述 投票:-4回答:2

您好我创建了一个简单的应用程序,允许我进行数据库搜索。我用javascript创建了一个带有函数的html页面。这是显示我的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>

在更改中插入坐标然后搜索之后,我的输出将是一个单独的行,如果路径存在与否,我可以打印到屏幕,即:找不到路线或找到路线。我的问题是在搜索中插入一个按钮返回到这一点,以便返回到起始页面或index.html。问题是我只有一个html页面(index.html),所以任何命令只能将它插入搜索页面而不是结果页面(结果页面只是一个打印的字符串不是另一个html页面)。该页面还与烧瓶相互作用。我希望我很清楚。非常感谢您的关注。

javascript html flask
2个回答
0
投票

据我所知,你所拥有的是index.html做回发,并且该回发的响应使用插入结果重新定义了一个不同的页面。这就是你要回到index.html的结果页面。嗯,你有两个选择:

1.在结果页面中,创建一个如下按钮:

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

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

这为您提供了一些灵活性,因为它不依赖于您的index.html页面的路线。

2.只需在结果页面中包含指向index.html页面的链接:

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

0
投票

如果要在提交(并清除)表单后使用表单输入中的值,则需要事先在某处记住该值。一种方法是为blur事件添加(到输入)一个监听器(当输入失去焦点时发生,这意味着用户已完成编辑输入)。

在侦听器函数中,您可以将值存储在javascript变量中以供日后使用,例如

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

现在你可以添加一个新的按钮元素(比如<button id="myBtn">Try again</button>并给它一个点击监听器,将输入的值设置回像之前的firstMyPosInput.value = myPosValue那样。

© www.soinside.com 2019 - 2024. All rights reserved.