多个按钮的javascript查询字符串

Question

您好，我正在尝试创建一个类似于此处可用的查询字符串： http://andrewu.co.uk/tools/request/examples/example1.html

我遇到的问题是我的页面上有多个按钮，即使我的 id 是唯一的，我的所有数据都同时显示在操作页面上。我用于按钮的代码是：

<label for="name_1">Name:</label>
        <input type="text" name="name" id="name_1" tabindex="1" size="40" value="Donald Duck" />

        <br />
        <br />

        <input type="submit" id='view1' value="Submit" tabindex="2" />
        <label for="name_1">Name:</label>
        <input type="text" name="name" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />

        <br />
        <br />

        <input type="submit" id='view2' value="View" tabindex="2" />

我的页面上有超过 2 个按钮。单击按钮时，我希望看到类似于此页面上的结果：

http://andrewu.co.uk/tools/request/examples/example1_process.html?name=Andrew+Urquhart

但我得到的是名字：唐老鸭，名字：米老鼠。我必须添加或更改什么才能一次只获得一个要显示的名称，但它是否会根据按下的按钮而有所不同？

Answer 1

按钮只是提交包含它的表单。它不绑定到任何特定字段。

如果您只想将一个名称/值对发送到服务器，则需要单独的表单元素：

<form id="name_1_form">
  <input name="name" value="Andrew" />
  <button>Submit</button>
</form>

<form id="name_2_form">
  <input name="name" value="Mickey" />
  <button>Submit</button>
</form>

Answer 2

您的表单的问题是两个输入都有 name="name" 当您提交表单时，两者都会发送。

你可以：

• 使用不同的名称输入并根据按下的按钮选择正确的名称，或

• 使用 2 个表单，每个按钮一个

• 使用 javascript 发送正确的数据（这会有所帮助：http://api.jquery.com/serialize/、http://api.jquery.com/submit/）

Answer 3

<input type="submit" id='view1' name="Name" value="Mickey Mouse" tabindex="2" />
<input type="submit" id='view2' name="Name" value="Donald Duck" tabindex="2" />

或

<input type="text" name="name_1" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<input type="submit" id='view1' name="Name" value="Submit" onClick="this.name=this.form.name_1.value" tabindex="2" />

<input type="text" name="name_2" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<input type="submit" id='view2' name="Name" value="View" onClick="this.value=this.form.name_2.value" tabindex="2" />

如果您不想将名称发送两次，您可以禁用输入