Sending form data to a popup on button submit

Question

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 completely

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 ?

Possible duplicate: http://stackoverflow.com/questions/16681773/pass-variable-to-a-popup-window-using-javascript — Casey Falk, Jul 04 '14 at 20:06

score 3 · Accepted Answer · answered Jul 04 '14 at 20:09

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.net/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>

This worked correctly. However, I have a doubt. Can I not open another popup window from a popup window? The form itself is opened in a popup window, then, when we click on the Upgrade button, another popup should open up with `$_GET['opt']`. It opens correctly, but it displays the value in the same popup window. — user3605847, Jul 04 '14 at 20:22
Yes, that is because you need to give a different targetName for your popup window, or give it the `'_blank'` target. More info you can find here: http://stackoverflow.com/questions/12778726/is-there-any-limit-for-using-window-open-in-javascript — Icepickle, Jul 04 '14 at 22:27

Indranil Mondal · Answer 2 · 2014-07-04T20:12:16.240

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>

Except for `focus()`, I fail to see any other jQuery method here? — faerin, Jul 04 '14 at 20:23

score 1 · Answer 3 · answered Jul 04 '14 at 20:06

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

faerin · Answer 4 · 2014-07-04T20:20:36.543

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.com/serialize/

Sending form data to a popup on button submit

Error now fixed, but not completely

4 Answers4