Question

我的表单中只有一个选择框，现在当用户点击提交按钮时，会打开一个弹出窗口。但是我需要这个弹出窗口来包含form的值。我写到这里，但无法传递表格值。在线阅读有关此问题的信息，但仍然没有帮助。

任何建议都会有所帮助。

<form action="" method="post">
                        <select name="sme">
                        <option value="sometinf">Someting</option>
                        <option value="p">p</option>
                        </select>
                        <input onclick="javascript:popUp();" type="submit" class="btn btn-lg btn-border" value="Upgrade">
                        </form>

<script type="text/javascript">
    function popUp()
    {
        popupWindow = window.open('admin_upgrade_user.php','User','resizable=yes,scrollbars=yes,width=650,height=550');
        popupWindow.focus();
    }
    </script>

错误现已修复，但不完全

好吧，我似乎能够获得价值。但是，没有新的弹出窗口打开，它会显示当前弹出窗口中的值，会触发这个值吗？

Answer 1

你可以使用基本的jquery来做到这一点： -

<form action=""  method="post">
<select id="sme">
    <option value="sometinf">Someting</option>
    <option value="p">p</option>
</select>
<input onclick="popUp();" type="submit" class="btn btn-lg btn-border" value="Upgrade">
</form>

<script type="text/javascript">
function popUp()
{
    var value = document.getElementById('sme').value;
    //Now if you want to access the select field value in the new window url then write
    var popupWindow = window.open('admin_upgrade_user.php?value=' + value,'User','resizable=yes,scrollbars=yes,width=650,height=550');
    //else if you want to just access the value within the new popup window page they write
    var popupWindow = window.open('admin_upgrade_user.php','User','resizable=yes,scrollbars=yes,width=650,height=550');
    popupWindow.selectField=value;
    // Now, you can access the value as window.selectField within admin_upgrade_user.php page
    popupWindow.focus();
}
</script>

Answer 2

您可以通过查询参数将值传递给弹出窗口：

function popUp()
{
    var popupValue = document.querySelector('select[name=sme]').value;
    var popupWindow = window.open('admin_upgrade_user.php?value=' + popupValue,'User','resizable=yes,scrollbars=yes,width=650,height=550');
    popupWindow.focus();
}

Answer 3

在这种情况下，使用Get方法更容易，并在url字符串中包含表单值。

您也可以通过在提交时返回false来停止提交表单（以刷新页面）。

示例可能如下：

function popUp() {
    var sme = document.getElementById('sme'), opt;
    if (sme) {
        opt = sme.options[sme.selectedIndex].value;
        popupWindow = window.open('admin_upgrade_user.php?opt=' + opt,'User','resizable=yes,scrollbars=yes,width=650,height=550');
        popupWindow.focus();
        return false;
    }
    return false;
}

在jsfiddle上看到此链接：http://jsfiddle.net/Icepickle/7mU4m/

和html上的一些较小的更改

<form onsubmit="return popUp();">
    <select name="sme" id="sme">
        <option value="sometinf">Someting</option>
        <option value="p">p</option>
    </select>
    <input type="submit" class="btn btn-lg btn-border" value="Upgrade" />
</form>

Answer 4

使用jQuery方法serialize（）会将表单元素编码为字符串 myinput=minpuntvalue&myinputtwo=mysecondinputvalue。

 function popUp() {
    var formData = $('form').serialize();
    var popupWindow = window.open('admin_upgrade_user.php?'+ formData +' ','User','resizable=yes,scrollbars=yes,width=650,height=550');
    popupWindow.focus();
    }

如果您以后想要在字符串中添加更多表单元素，则不需要修改javascript函数popUp()来发送表单数据。如果您在同一页面上有各种表单，建议您为每个表单添加一个唯一ID，并以serialize $('#yourFormId').serialize()方式使用{{1}}。

看看这里：http://api.jquery.com/serialize/

将表单数据发送到按钮提交的弹出窗口

错误现已修复，但不完全

4 个答案: