使用 jQuery 编辑多个输入

Posted 2023-04-18

【中文标题】使用 jQuery 编辑多个输入

【英文标题】：Edit multiple input with jQuery

【发布时间】：2011-07-30 01:13:05

【问题描述】：

我有一个动态的多文本输入：

<input type="text" id="text_1">
<input type="text" id="text_2">
<input type="text" id="text_3">
<input type="text" id="text_4">
<input type="text" id="text_5"> ....

如何使用 jQuery 获取每个文本输入的 id 进行编辑：

$('#form').submit(function()
  $.post('include/setting.php', 
    text_(id): $('#text_(id)').val(), // <--
  , 'json')
  return false;
)

而使用 php 我如何获取输入 id？

【参考方案1】：

使用serialize()

$('#form').submit(function()
  $('#form input[id]').each(function()
   $(this).attr('name', $(this).attr('id'));
  );
  $.post('include/setting.php', $('#form').serialize());
  return false;
)

【讨论】：

@Rocket 你是对的。我改变了我的答案（现在我将名称属性添加到每个输入取决于它的 id）。

你可以使用$('#form input[id]')来获取ids的输入，你不需要[id*=""']。

【参考方案2】：

首先，要与 php 共享信息，您需要使用 get 或 post 发送该 ajax 数据，这意味着在 php 中您将接受 $_REQUEST['url_var_name'] 的数据（两者都接受）。例如：

$requests = array('name', 'time', 'city'); // Request whitelist.
$params = array(); // Empty array to hold the final values.
foreach($requests as $param)
    $params[$param] = @$_REQUEST[$param]; // Null by default.

// End up with an array of whitelisted parameters in $params to cast or restrict.

其次，由于您要选择多个元素，您可能希望对所有元素使用一个类，然后使用 jQuery .each() 对它们进行迭代，或者只选择某个 div 中的输入元素，以进行操作更简单。例如：

<div id='#name-inputs'>
<input type="text" id="text_1">
<input type="text" id="text_2">
<input type="text" id="text_3">
<input type="text" id="text_4">
<input type="text" id="text_5">
</div>

然后您将通过$('#name-inputs input') 与输入进行交互，而不是通过 id 单独拉取它们。这样，您就可以真正为输入命名，而无需将它们限制为数字循环方案。

编辑：@ARTStudio 对serialize() 的建议可能比在 javascript 中单独处理输入更好（对我来说是新功能，我喜欢它）。

【讨论】：

谢谢！以及如何在 php 中以序列化形式获取值

正如 Rocket 所提到的，参数将被命名为您在表单中作为 name 属性放置的任何内容。所以<input type='text' name='city'> 将是somepage.php?city=SomeThing 的post 等价物，除了不在url 中，而是通过php 中的$_REQUEST['city'] 访问。在我上面给出的 php 代码示例的情况下，您只需坚持 $requests = array('city'); 作为稍后获取所选选项的起点。