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

时间:2014-09-02 15:32:43

标签: javascript jquery html forms

让我说我有这个:http://jsfiddle.net/oh0omatq/2/

<form>
    <input placeholder="my value">Country
    <button name="subject" type="submit" value="england">England</button>
    <button name="subject" type="submit" value="wales">Wales</button>
    <br />Your country is: Wales
    <input type="submit">
</form>

我可以使用英格兰和威尔士的提交按钮在表单中设置一个值,然后重新加载表单,但也不会丢失已经在表单中输入的信息,例如在输入框中。

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

1 个答案:

答案 0 :(得分:0)

我建议您使用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编辑值。当然,您可以在跨度中输入,允许所选值与表单一起发送。当然,选择框也可以。

那会做你想要的吗?

您可以在此处查看已修改的fiddle

请记住,这是一个快速草图。不建议使用javascript内联。