How to reuse an ajax form-loading function to open up several tabs with different parameters each?

Question

I have a 3 forms on different web pages, each with a submit button. Clicking submit on an individual page, opens up an AJAX call to process_form function of unknown origin (see function below), which loads the form for you. Essentially, upon clicking Submit, the function assembles form values, into a request and loads up a sub-page via an AJAX request.

Each form of the 3 is the same at its core, but has slight variations and options.

What I want to do is to merge the 3 forms into a single one, and then have my clicking Submit open up 3 new browser tabs, one for each specific form option.

So I am looking for a way to reuse this process_form function (desirable), to open up the windows, or maybe modify it (undesirable as its being used by lots of other files) to accomplish my goal.

See snippet below to see how it works on my end. An answer I am seeking is to have a single form that opens up the 3 original forms, but each being in a new tab window.

 
//abridged version of the library function I use for AJAX
function process_form(form, url, redir, response, method, delay) {
  var formObj = document.getElementById(form);

  var post_str = "";

  if (method == "POST") {
    for (var i = 0; i < formObj.length; i++) {
      if (formObj.elements[i].tagName == "INPUT") {
        if (formObj.elements[i].type == "text") {
          post_str += escape(formObj.elements[i].name) + "=" + encodeURIComponent(formObj.elements[i].value) + "&";
        }
      }
    }
  }

  //here this will be a load_page() call
  //but replaced here with alert to show functionality
  alert("Load Form with [" + post_str + "]");
}

<form id="a">
  <input name="opt_a" type="text" value='4' />
  <input type="button" onclick="process_form('a', '', '', '', 'POST', '')" value="SelectA" id="selButton" name="selButton" />
</form>

<form id="b">
  <input name="opt_b" type="text" value='5' />
  <input type="button" onclick="process_form('b', '', '', '', 'POST', '')" value="SelectB" id="selButton" name="selButton" />
</form>

<form id="c">
  <input name="opt_c" type="text" value='6' />
  <input type="button" onclick="process_form('c', '', '', '', 'POST', '')" value="SelectC" id="selButton" name="selButton" />
</form>

Merged Form will look something like this (unfinished)

<form id="a_b_c">
  <input name="opt_a" type="text" value='4' />
  <input name="opt_b" type="text" value='5' />
  <input name="opt_c" type="text" value='6' />

  <!-- submit functionality opening up separate tabs is what I seek -->
  
</form>

in reality `process_form` opens up an ajax request to load a new page for submitted form results — Dennis, Feb 03 '15 at 21:14
Have a look at this. Sounds similar.http://stackoverflow.com/questions/18372865/how-can-i-open-two-urls-in-two-tabs-in-a-single-click — DevDonkey, Feb 03 '15 at 21:15
You can open 3 tabs with javascript (window.open) and every one with different parameters in the url. — Remigius Kijok, Feb 03 '15 at 21:16

Travesty3 · Answer 1 · 2015-02-03T21:25:07.007

Your <form> tags have no attributes, so if your actual code does the same, it's sending the form values via GET.

Using JavaScript, you could grab the values of the form elements, build the appropriate URLs with the values from the forms included in the URL (ex. mypage.php?input1=value1&input2=value2), and then use window.open() to open three new tabs with the appropriate URL in each.

Example:

function process_form() {
  var value1 = document.getElementById('value1').value;
  var value2 = document.getElementById('value2').value;
  var value3 = document.getElementById('value3').value;
  
  window.open('mypage.php?value1=' + value1);
  window.open('mypage.php?value2=' + value2);
  window.open('mypage.php?value3=' + value3);
}

<form>
<input type="text" name="value1" id="value1" />
<input type="button" onclick="process_form()" value="SelectA" id="selButton" name="selButton" />  
</form>

<form>
<input type="text" name="value2" id="value2" />
<input type="button" onclick="process_form()" value="SelectB" id="selButton" name="selButton" />  
</form>

<form>
<input type="text" name="value3" id="value3" />
<input type="button" onclick="process_form()" value="SelectC" id="selButton" name="selButton" />  
</form>

My form goes to an ajax.js script (of unknow origin) that has function `function process_form(form, url, redir, response, method, delay)`. And the way it's called is `process_form('select_a', 'select.php?mode=product', '', 'output', 'POST');`, so I specify POST in that function call. `process_form` then cleans form values, checks method, and submits values for you to the PHP file, in this case via POST. So I am looking for a way to reuse that `process_form` function — Dennis, Feb 03 '15 at 21:29

How to reuse an ajax form-loading function to open up several tabs with different parameters each?

1 Answers1