使用jquery将表单输入直接加载到页面中

发布于 2024-09-25 00:10:27 字数 603 浏览 5 评论 0原文

我在一页上有一个表单，一些表单数据是从我的 mysql 数据库中的各个表中提取的 - 这些表保存不同选择的选项，因此以下是我的数据在 php 脚本运行后的显示方式：

 <select name="vehicleStyle">
    <option value="empty" selected="selected">- select -</option>
    <option value="coupe">Coupe</option>
    etc....
  </select>

我有第二个表单，可以在 iframe 中加载此页面，此第二个表单允许我更新此 mysql 表中包含的数据，以便我可以动态向表单添加选项。一切都工作得非常好，但是，如果我动态更新（添加值）到该表，我必须刷新页面以便新数据显示在主页上的第一个表单中。我尝试过自动刷新页面，但这有点令人讨厌。

有没有办法通过 jquery 直接将此表单数据添加到我的原始页面中？

我认为当您添加推文时，Twitter 会执行类似的操作（我不使用 Twitter），但它将您最近的推文添加到页面顶部，而无需实际重新加载整个页面。

非常感谢！

原文

I have a form on one page, some of the form data is pulled from various tables in my mysql database -- the tables hold the options for different selects, so the following is the way my data will look after the php scripts are run:

 <select name="vehicleStyle">
    <option value="empty" selected="selected">- select -</option>
    <option value="coupe">Coupe</option>
    etc....
  </select>

I have a second form that loads over this page in an iframe, this 2nd form allows me to update the data included in this mysql table so that I can add options to the form on the fly. Everything works absolutely fine and wonderful however, if I update (add a value) to this table on the fly, I have to refresh the page in order for the new data to show up in the first form on the main page. I've played with auto-refreshing the page, but that's kind of obnoxious.

Is there a way to add this form data directly into my original page via jquery?

I think twitter does something like this when you add a tweet (I don't use twitter) but it adds your recent tweet onto the top of the page without actually reloading the entire page.

Thanks so much!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无需解释 2024-10-02 00:10:27

我相信最好的方法是使用 load jQuery 函数 (http://api.jquery.com/load/ ）。
它允许您直接从 javascript 从 url 加载页面。

这是我要做的：

将选择的创建移动到新的 url（例如 fillselect.php）
加载页面而不创建选择：
在 onload javascript 事件中创建一个 div 标签（例如将其命名为 divforselect）页面，这样写：
$("#divforselect").load("fillselect.php") 这将导致 div 标签 insideText 设置为 fillselect.php 页面的内容。所以 url fillselect.php 不会是一个完整的 html 页面，而只会包含 select 标签。

之后，只要您想刷新选择，就可以调用 $("#divforselect").load("fillselect.php") ！

回复收藏 0 原文

讽刺将军 2024-10-02 00:10:27

我认为你想使用 JS 进行 DOM 操作。您所要做的就是将一个带有用户输入值的新 OPTION 标记附加到 SELECT 中，如下所示：

var option = $('<OPTION/>');
$(option).html('INSERT YOUR VALUE HERE');
$('SELECT').append(option);

请记住：这只是在客户端添加一个 OPTION。因此，如果您实际的表单提交（在 iframe 中）无法将数据推送到数据库，这将为您的用户带来不一致的视图（他会认为创建了新选项，但实际上失败了）。

因此，您必须将 UI 更新与后端响应联系起来。通常，您会在更新后端的调用的 AJAX 响应中刷新此 UI。

I think you want to do DOM manipulation using JS. All you have to do is append a new OPTION tag with the user-input value to the SELECT like:

var option = $('<OPTION/>');
$(option).html('INSERT YOUR VALUE HERE');
$('SELECT').append(option);

Remember: this is adding an OPTION just on the client side. So if your actual form submission (in your iframe) fails to push the data to your database, this would represent an inconsistent view for your user( where he would think new OPTION is created but its actually failed).

So, you would have to tie your UI update with your backend response. Typically, you would refresh this UI in the AJAX response of the call updating the backend.

回复收藏 0 原文