Javascript 表单上的HTML提交按钮重新加载但不丢失数据

假设我有：

国家
英格兰
威尔士

您的国家是：威尔士

我可以使用英格兰和威尔士的此提交按钮在表单中设置值，并重新加载表单，但也不能丢失表单中已输入的信息，例如输入框中的信息

---

上面这只是一个预览，但我希望能够根据用户单击的按钮重新加载和过滤表单中的输入元素，但也不要在字段中丢失以前输入的任何数据。

我建议为此使用

javascript

。我已经编辑了你的小提琴以使用onclick函数

<form>
    <input placeholder="my value">
    Country
    <button name="subject" value="england" type="button" onclick="document.getElementById('value').innerHTML = this.value">England</button>
    <button name="subject" value="wales" type="button" onclick="document.getElementById('value').innerHTML = this.value">Wales</button><br />
    Your country is: <span id="value">Wales</span>
    <input type="submit">
</form>

国家
英格兰
威尔士

你的国家是：威尔士

将按钮更改为

type=“button”

，这样它们就不会提交表单，从而允许javascript编辑该值。当然，您可以在范围之外进行输入，允许所选的值与表单一起发送。当然，选择框也可以工作

那能满足你的要求吗

你可以在这里看到编辑的

---

请记住，这是一个速写。不建议使用javascript内联。

那么你的意思是像两步表单一样？你使用的是什么服务器技术？将值重新发布回表单通常在那里完成（MVC/PHP等）。Cookie呢？它们与JS配合得很好。如果您将PHP store用作会话或cookie。如果您使用Ajax调用（例如使用jQuery）进行所有提交，您将永远不会离开页面，因此值将被保留。您的JSFIDLE没有说明您希望如何解决此问题。有很多线程已经在讨论此[link][1][1]：

<form>
    <input placeholder="my value">
    Country
    <button name="subject" value="england" type="button" onclick="document.getElementById('value').innerHTML = this.value">England</button>
    <button name="subject" value="wales" type="button" onclick="document.getElementById('value').innerHTML = this.value">Wales</button><br />
    Your country is: <span id="value">Wales</span>
    <input type="submit">
</form>