Question

我不是Javascript Guru。但是当我为一个Application编写Jquery时，我发现自己陷入了一个非常棘手的境地。情况：

我有一个不同领域的表格。其中一个字段包含多个值，比如电话号码。我在弹出窗口中填充这些数字 - 灯箱。现在，我面临的问题是我想点击表单按钮提交我的表单，但我的号码来自弹出框。好吧，让我试着用点来描述整个流程： -

表格有多个字段。对于一个字段 - 数字，我显示弹出框。
我点击弹出框上的一个按钮，将我发送到表单。但我无法在表格中找到这些数字。
最终点击在表单按钮上，该按钮将所有信息发送到服务器端。

但我没有在表格中获得这些数字的价值。那么，任何人都可以建议我解决这个问题的最佳方法吗？

注意： - 我尽力以明确的方式提出问题。但是，如果你们找不到我的话很清楚，抱歉！

Answer 1

我不完全确定我理解，但我会采取刺：

选项1）使用$（selector）.val（）;

将灯箱中的所有值从后面写回到第一个表单

选项2）将整个灯箱表单复制到第一个表单中的隐藏div中。

Answer 2

弹出框元素可能正在表单外添加，因此提交表单时不会提交弹出框中的任何输入元素。要检查这一点，请使用DOM Inspector（即firefox中的firebug或ie8或chrome中的dev工具）来查看包含灯箱的元素的位置（通常位于页面末尾）。

要解决此问题，您可以配置灯箱以在表单中添加div，或者只是使用一些javascript来获取弹出窗口中输入元素的值并填充实际位于其中的隐藏输入提交前的表格。

Answer 3

嗨，这有帮助。它会创建一个弹出窗口，您可以在其中编辑数据，然后填充回主页面，该页面在关闭弹出窗口之前由opener引用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<script type="text/javascript">
<!--
function fn() {
var popupwin = window.open("","","width=500,height=300");
popupwin.document.open();
popupwin.document.write("<html><head><script>function onOk(){opener.parent.document.getElementById('txtnumberfield').value=document.getElementById('txtpopup').value; window.close();}</script></head><body>Here are some popup values <input type='text' value='value from popup' name=txtpopup id=txtpopup />"+
"<input type=button onclick='onOk()' value='Done editing' /></body></html>");
popupwin.document.close();


}   
//-->
</script>
 <BODY>
<form action="#">
Number  <input type="text" id="txtnumberfield" /> <input type="button" value="open popup" onclick="fn();" /><br/>

 <input type="submit" />
 </form>
 </BODY>
</HTML>

Answer 4

如果我理解你的问题，一个解决方案就是设置关闭弹出窗口/灯箱的控件，首先填充底层表单上的一些隐藏字段。从灯箱窗口中的表单元素中获取值：

$('#the_lightbox').find('.multiple_phone_fields')
  .each( function(i,e){ // for each field
    $('<input name=' + $(this).attr('name') + 'type="hidden"/>') // new, hidden
      .val(this.value) // set hidden field value from this field
      .appendTo('#the_main_form'); // and add to the underlying form
});

当您提交#the_main_form时，这些隐藏的字段和值将会出现。显然，您需要根据弹出窗口或灯箱的具体情况调整选择器。

如何在jquery中解决这个特例？

4 个答案: