submit a form and open it in a pop-up using an href tag

Question

I want to submit a form using an href tag and load that submitted form inside a pop-up.

<form method='post' action='" . $paymentURL . "' id='frmPaymentDtl' onsubmit='target_popup(this)'>
  <a id=\"submit_full_payment\" onclick=\"target_popup(get_form(this).submit())\">Make Full Payment</a>
  <input type='hidden' name='customer_id' value='" . $customer_id . "'/>
  <input type='hidden' name='account_id' value='" . $account_id . "'/>
  <input type='hidden' name='invoice_number' value='" . $invoice_model[0]->number . "'/>
  <input type='hidden' name='detail_id' value='" . $bean->id . "'/>
  <input type='hidden' name='header_id' value='" . $_GET['record'] . "'/>
  <input type='hidden' name='detail_number' value='" . $bean->detail_id . "'/>
  <input type='hidden' name='amount' value='" . number_format($bean->amount,2) . "'/>
  <input type='hidden' name='description' value='" . $paymentSchedule->description . "'/>
  <input type='hidden' name='invoice_id' value='" . $invoice_model[0]->id . "'/>
  <input type='submit' name='submit_btn' class=\"listViewTdToolsS1\" value='Submit Bank/Credit Payment'/>
</form>
<script type='text/javascript'>
  function get_form( element )
  {
    while( element )
    {
      element = element.parentNode
      if( element.tagName.toLowerCase() == \"form\" )
      {
      //alert( element ) //debug/test
        return element
      }
    }
  return 0; //error: no form found in ancestors
  }

  function target_popup(form) {
    window.open('', 'formpopup', 'width=800,height=600,resizeable,scrollbars');
    form.target = 'formpopup';
  }
</script>

What happens here is that the pop-up is displayed but the form is loaded on the main page, when I want it to be loaded inside the pop-up page. Also, I can only use link here to access the form as the submit buttons are not allowed.

score 1 · Accepted Answer · answered Jul 28 '16 at 08:09

You are submitting the form and then passing the return value of calling submit() to target_popup().

You need to first call target_popup() and pass it the form, then you need to submit the form.

onclick="var frm = get_form(this); target_popup(frm); frm.submit()">

That said, you would be better off using a regular submit button and applying CSS to make it look the way you want.

score -1 · Answer 2 · edited May 23 '17 at 12:00

You need to use Ajax. Here is the list what you need to do:

Stop Form's submit event (which you can use e.preventDefault();)
Send data's with ajax and then

Do what ever you want ajax's success or error callbacks..

Please let me know if you need any further help :)

This was my previous answer and i get a mines for this so let me explain it..

1-) You dont need to use window.open()for a pop-up page. You can simply create a modal(which is a bootstrap element : http://getbootstrap.com/javascript/#modals) and display whatever you want in modal. Which in your case it will be your form element again if i understand your question correctly.

2-) If you want to stop page's reload on submit use this:

$('#frmPaymentDtl').submit(function(e)
  {
      e.preventDefault();
      //Take form's all data with this
      var data = $('#frmPaymentDtl').serialize();
      //Or you can assign all id's to a new variable if you'd like that way.
      //After this open your modal which you have a form inside that.
      //then write all data into input's from "data" variable.
  });

I know this one is kinda different but i know this will work for you as well.

One more thing. If you want to send this "data" variable to another page you need use Ajax.

If you don't know how check this: jQuery AJAX submit form

Oww by the way if you will try to use my way please delete your form's onclick event. :)

The OP wants to render the result in a new window. "Do what ever you want" is rather vague and doesn't explain how to get the result to display in a new window with all the URLs resolving correctly. — Quentin, Jul 28 '16 at 08:10

Ravistm · Answer 3 · 2016-07-28T08:51:04.450

Ajax code to submit details and get result:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
$('#submit_full_payment').click(function () {
    var url = 'YOUR_URL';
    $.ajax({
        type: 'POST',
        url: url,//url to post data
        data: "customer_id=" + $('name=customer_id').val() + "&account_id=" + $('name=account_id').val(),//add other form fields here
        success: function (data) {//process data here
            alert(data);
        },
        error: function (data) {
        alert(data);
        }
    });
});

step2: Use the Dialog to display the form and link. refer link this will hide the form on main page and use ajax as given above to process form and retain in the pop-up only. If you do not want to remain in pop-up above step can be ignored.

This shows the result in an alert, not in a new window. – Quentin Jul 28 '16 at 08:09 — Quentin, Jul 28 '16 at 08:09

submit a form and open it in a pop-up using an href tag

3 Answers3