javascript - Sending form data to a popup on button submit - Stack Overflow

admin管理员组

文章数量:1332383

I have a form with only one selectbox, now when the user hits submit button, a popup opens up. But I need this popup to contain the value from the form. I have written till here, but unable to pass the form values. Read online about this issue but still no help.

Any suggestion would be helpful.

<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>

Error now fixed, but not pletely

Ok, I seem to be able to get the value. But, no new popup opens up, it displays the value in the current popup, what would trigger this ?

I have a form with only one selectbox, now when the user hits submit button, a popup opens up. But I need this popup to contain the value from the form. I have written till here, but unable to pass the form values. Read online about this issue but still no help.

Any suggestion would be helpful.

<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>

Error now fixed, but not pletely

Ok, I seem to be able to get the value. But, no new popup opens up, it displays the value in the current popup, what would trigger this ?

• javascript
• jquery
• forms

Share Improve this question Follow edited Jul 4, 2014 at 20:41 user3605847 asked Jul 4, 2014 at 19:56 user3605847user3605847 6522 silver badges1111 bronze badges 1

• Possible duplicate: stackoverflow./questions/16681773/… – Casey Falk Commented Jul 4, 2014 at 20:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

It is easier in this scenario to use the Get method, and include the form value inside the url string.

You could also stop the submit of your form (so refreshing the page) by returning false on submit.

An example might be the following:

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;
}

see this link on jsfiddle: http://jsfiddle/Icepickle/7mU4m/

and some smaller changes on the 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>

You can do this using basic 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>

You can pass value to the popup window via query parameter:

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();
}

Using jQuery method serialize() will encode form elements to a string like 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();
    }

If you later on would like to add more form elements to your string, your javascript function popUp() will not need modification to send the form data. If you're having various forms on the same page it's advisable to add a unique ID to every form and use serialize this way $('#yourFormId').serialize().

Have a look here: http://api.jquery./serialize/

本文标签： javascriptSending form data to a popup on button submitStack Overflow