Reputation: 29

Two window.open in one function

I have a form that opens two new windows with JS function (with pause)

Problem is, that this JS script works correctly in Firefox, but not in other browsers (opens only one window). Anyone could help?

function win_open1() {
  var form = document.getElementById('form');
  form.addEventListener('submit', async function(e) {
    e.preventDefault();

    if (document.getElementById('vl').checked == true) {
      var dok = document.getElementById('vl').value;
    } else {
      var dok = '';
    }

    if (document.getElementById('vb01').checked == true) {
      let href = document.getElementById('va').value + document.getElementById('vb01').value + dok;

      window.open(href, '_blank');
      await new Promise(r => setTimeout(r, 3000));
    }

    if (document.getElementById('vb02').checked == true) {
      let href = document.getElementById('va').value + document.getElementById('vb02').value + dok;

      window.open(href, '_blank');
      await new Promise(r => setTimeout(r, 3000));
    }
  });
}

part of HTML form

<form id="form">  
<input name="va" id="va" type="hidden" value="https://domain/index.php?op=gt&lang=pol&bdm=">

Type: 
A: <input type="checkbox" id="vb01" name="vb" value="B&w=01ds&rid=B">  
B: <input type="checkbox" id="vb02" name="vb" value="S&w=01ds&rid=S">   
<button type="submit"  onclick="win_open1()">--- search ---</button>
</form>

Upvotes: 1

Answers (1)

treckstar

Reputation: 2112

Like the comments are saying, there is some issues occuring, I'm not sure how your submitted code works in Firefox, could be some missing code, but I don't see any element named #vl for starts.

Secondly for an async/await or Promise event, I would remove the onclick="win_open1()" from your HTML`.

This is important, the win_open1() is declaring the form.addEventListener('submit', async function(e) {..} over & over.. so just remove the addEventListener() out of the function you are using.

const form = document.getElementById('form');
form.addEventListener('submit', async function(e) {
  e.preventDefault();
  console.log('woohoo submitted form, and prevented default!')
  await win_open1();
});

Now you can see I added the call to the win_open1() function at the end. The next step is declaring that function to begin with async:

async function win_open1() { ... }

So here is a fully updated script that opens windows, not sure if this was your goal but hopefully you can get some progress with it. It is important to organize and check for undefined variables before trying to access properties .checked and methods. You may not see the windows open on the SO code runner, but it does show one on jsfiddle if you allow it. Edit: Updated the function to take a parameter of the checkbox since it was doing the same thing twice.

NOTE!! See updated version below this snippet!!

const form = document.getElementById('form');
form.addEventListener('submit', async function(e) {
  e.preventDefault();
  console.log('woohoo submitted form, and prevented default!')

  let cb_vb01 = document.getElementById('vb01');
  let cb_vb02 = document.getElementById('vb02');

  await win_open(cb_vb01);
  await win_open(cb_vb02);
});

async function win_open(cb) {
  let cb_vl = document.getElementById('vl');
  let cb_va = document.getElementById('va');
  let dok = '';
  
  // cb "vl" doesn't exist in OP code...
  if (cb_vl && cb_vl.checked == true) {
    dok = cb_vl.value;
  } else {
    dok = '';
  }

  if (cb && cb.checked == true) {
    let href = (cb_va) ? cb_va.value + cb.value + dok : cb.value + dok;
    console.log('cb href: ' + href);
    window.open(href, '_blank');
    await new Promise(r => setTimeout(r, 3000));
  }
}

<form id="form">
  <input name="va" id="va" type="hidden" value="https://example.com/index.php?op=gt&lang=pol&bdm="> Type: A: <input type="checkbox" id="vb01" name="vb" value="B&w=01ds&rid=B"> B: <input type="checkbox" id="vb02" name="vb" value="S&w=01ds&rid=S">
  <button type="submit">--- search ---</button>
</form>

Edited Version!

Here is an updated version based on the full links that the OP had provided in the comments. I added some code comments to help. Remember there are plenty of ways to do this, so this is just one I came up with now. Check out the jsfiddle of the updated code to see the popups, because they might not work on the SO code snippet.

// get hidden field + text input elements
const va = document.getElementById('va');
const vc = document.getElementById('vc');
const vd = document.getElementById('vd');
const ve = document.getElementById('ve');
const vf = document.getElementById('vf');
const vg = document.getElementById('vg');
const vh = document.getElementById('vh');
const vi = document.getElementById('vi');
const vj = document.getElementById('vj');
const vk = document.getElementById('vk');

// get one last checkbox for "dok" var
const vl = document.getElementById('vl');

// get the form 
const form = document.getElementById('form');

// on the submit of form, prevent the actual submit to open popups
form.addEventListener('submit', async function(e) {
  e.preventDefault();

  // returns a simple array with the link value of each popup
  let links = getAllHrefs();
  console.log(links);

  if (links.length <= 0) {
    console.log('No windows to open.')
    return false;
  }


  // NOTE: The client must allow pop-ups to open in their Browser Site Settings
  // This applies for Chrome/FF/Brave/etc.
  // They will not show on stackoverflow because:
  // The request was made in a sandboxed frame whose 'allow-popups' permission is not set
  // loop through array and open each popup, and wait 3 seconds.
  for (let i = 0; i < links.length; i++) {
    // open window in new tab
    window.open(links[i], '_blank');
    // return promise to wait 3ms
    await new Promise(r => {
      setTimeout(r, 3000)
    })
  }
});

// creates an array of objects with props: 
// 1) name(input name) 2) val(input value)
function getFormDataToObj(selector) {
  var ele = document.querySelectorAll(selector);
  var eleArray = Array.prototype.map.call(ele, function(obj) {
    return {
      'name': obj.name,
      'val': obj.value
    };
  });
  return eleArray;
}

function getAllHrefs() {
  // get all "checked" checkboxes with cb-vb class 
  var cbArray = getFormDataToObj('.cb-vb:checked');
  if (cbArray.length <= 0) {
    console.log('At least one checkbox must be checked.')
    return false;
  }

  // get the "dok" variable, using ternary operator
  var dok = (vl.checked) ? vl.value : '';

  // setup query string for textbox, using String Literal
  var tb_vd = `&vd=${vd.value}`;
  var tb_vf = `&vf=${vf.value}`;
  var tb_vh = `&vh=${vh.value}`;
  var tb_vj = `&vj=${vj.value}`;

  // href link pattern per OP
  // va + vb01 + vc + vd + ve + vf + vg + vh + vi + vj + vk + dok
  var hrefs = [];
  for (let i = 0; i < cbArray.length; i++) {
    // setup the format for href, using a String Literal

    let href = `${va.value}${cbArray[i].val}${vc.value}${tb_vd}${ve.value}${tb_vf}${vg.value}${tb_vh}${vi.value}${tb_vj}${vk.value}${dok}`;
    hrefs.push(href);
  }

  // return array of links to open in popup
  return hrefs;
}

<form id="form">
  <input name="va" id="va" type="hidden" value="https://example.com/index.php?op=gt&lang=pol&bdm=">
  <input name="vc" id="vc" type="hidden" value="&vc=vc_hidden_value">
  <input name="ve" id="ve" type="hidden" value="&ve=ve_hidden_value">
  <input name="vg" id="vg" type="hidden" value="&vg=vg_hidden_value">
  <input name="vi" id="vi" type="hidden" value="&vi=vi_hidden_value">
  <input name="vk" id="vk" type="hidden" value="&vk=vk_hidden_value">
  <table border="1">
    <tbody>
      <tr>
        <td><label for="vd">VD</label><input id="vd" name="vd" type="text" placeholder="VD" /></td>
        <td><label for="vb01">CB 01</label><input id="vb01" class="cb-vb vb-01" name="vb01" type="checkbox" value="&vb01=checked" /></td>
        <td><label for="vb02">CB 02</label><input id="vb02" class="cb-vb vb-02" name="vb02" type="checkbox" value="&vb02=checked" /></td>
        <td><label for="vb03">CB 03</label><input id="vb03" class="cb-vb vb-03" name="vb03" type="checkbox" value="&vb03=checked" /></td>
        <td><label for="vb04">CB 04</label><input id="vb04" class="cb-vb vb-04" name="vb04" type="checkbox" value="&vb04=checked" /></td>
        <td><label for="vb05">CB 05</label><input id="vb05" class="cb-vb vb-05" name="vb05" type="checkbox" value="&vb05=checked" /></td>
        <td><label for="vb06">CB 06</label><input id="vb06" class="cb-vb vb-06" name="vb06" type="checkbox" value="&vb06=checked" /></td>
        <td><label for="vb07">CB 07</label><input id="vb07" class="cb-vb vb-07" name="vb07" type="checkbox" value="&vb07=checked" /></td>
        <td><label for="vb08">CB 08</label><input id="vb08" class="cb-vb vb-08" name="vb08" type="checkbox" value="&vb08=checked" /></td>
        <td><label for="vb09">CB 09</label><input id="vb09" class="cb-vb vb-09" name="vb09" type="checkbox" value="&vb09=checked" /></td>
        <td><label for="vb10">CB 10</label><input id="vb10" class="cb-vb vb-10" name="vb10" type="checkbox" value="&vb10=checked" /></td>
        <td><label for="vb11">CB 11</label><input id="vb11" class="cb-vb vb-11" name="vb11" type="checkbox" value="&vb11=checked" /></td>
        <td><label for="vb12">CB 12</label><input id="vb12" class="cb-vb vb-12" name="vb12" type="checkbox" value="&vb12=checked" /></td>
        <td><label for="vb13">CB 13</label><input id="vb13" class="cb-vb vb-13" name="vb13" type="checkbox" value="&vb13=checked" /></td>
        <td><label for="vb14">CB 14</label><input id="vb14" class="cb-vb vb-14" name="vb14" type="checkbox" value="&vb14=checked" /></td>
        <td><label for="vb15">CB 15</label><input id="vb15" class="cb-vb vb-15" name="vb15" type="checkbox" value="&vb15=checked" /></td>
        <td><label for="vb16">CB 16</label><input id="vb16" class="cb-vb vb-16" name="vb16" type="checkbox" value="&vb16=checked" /></td>
      </tr>
      <tr>
        <td><label for="vf">VF</label><input id="vf" name="vf" type="text" placeholder="VF" /></td>
        <td><label for="vb17">CB 17</label><input id="vb17" class="cb-vb vb-17" name="vb17" type="checkbox" value="&vb17=checked" /></td>
        <td><label for="vb18">CB 18</label><input id="vb18" class="cb-vb vb-18" name="vb18" type="checkbox" value="&vb18=checked" /></td>
        <td><label for="vb19">CB 19</label><input id="vb19" class="cb-vb vb-19" name="vb19" type="checkbox" value="&vb19=checked" /></td>
        <td><label for="vb20">CB 20</label><input id="vb20" class="cb-vb vb-20" name="vb20" type="checkbox" value="&vb20=checked" /></td>
        <td><label for="vb21">CB 21</label><input id="vb21" class="cb-vb vb-21" name="vb21" type="checkbox" value="&vb21=checked" /></td>
        <td><label for="vb22">CB 22</label><input id="vb22" class="cb-vb vb-22" name="vb22" type="checkbox" value="&vb22=checked" /></td>
        <td><label for="vb23">CB 23</label><input id="vb23" class="cb-vb vb-23" name="vb23" type="checkbox" value="&vb23=checked" /></td>
        <td><label for="vb24">CB 24</label><input id="vb24" class="cb-vb vb-24" name="vb24" type="checkbox" value="&vb24=checked" /></td>
        <td><label for="vb25">CB 25</label><input id="vb25" class="cb-vb vb-25" name="vb25" type="checkbox" value="&vb25=checked" /></td>
        <td><label for="vb26">CB 26</label><input id="vb26" class="cb-vb vb-26" name="vb26" type="checkbox" value="&vb26=checked" /></td>
        <td><label for="vb27">CB 27</label><input id="vb27" class="cb-vb vb-27" name="vb27" type="checkbox" value="&vb27=checked" /></td>
        <td><label for="vb28">CB 28</label><input id="vb28" class="cb-vb vb-28" name="vb28" type="checkbox" value="&vb28=checked" /></td>
        <td><label for="vb29">CB 29</label><input id="vb29" class="cb-vb vb-29" name="vb29" type="checkbox" value="&vb29=checked" /></td>
        <td><label for="vb30">CB 30</label><input id="vb30" class="cb-vb vb-30" name="vb30" type="checkbox" value="&vb30=checked" /></td>
        <td><label for="vb31">CB 31</label><input id="vb31" class="cb-vb vb-31" name="vb31" type="checkbox" value="&vb31=checked" /></td>
        <td><label for="vb32">CB 32</label><input id="vb32" class="cb-vb vb-32" name="vb32" type="checkbox" value="&vb32=checked" /></td>
      </tr>
      <tr>
        <td><label for="vh">VH</label><input id="vh" name="vh" type="text" placeholder="VH" /></td>
        <td><label for="vb33">CB 33</label><input id="vb33" class="cb-vb vb-33" name="vb33" type="checkbox" value="&vb33=checked" /></td>
        <td><label for="vb34">CB 34</label><input id="vb34" class="cb-vb vb-34" name="vb34" type="checkbox" value="&vb34=checked" /></td>
        <td><label for="vb35">CB 35</label><input id="vb35" class="cb-vb vb-35" name="vb35" type="checkbox" value="&vb35=checked" /></td>
        <td><label for="vb36">CB 36</label><input id="vb36" class="cb-vb vb-36" name="vb36" type="checkbox" value="&vb36=checked" /></td>
        <td><label for="vb37">CB 37</label><input id="vb37" class="cb-vb vb-37" name="vb37" type="checkbox" value="&vb37=checked" /></td>
        <td><label for="vb38">CB 38</label><input id="vb38" class="cb-vb vb-38" name="vb38" type="checkbox" value="&vb38=checked" /></td>
        <td><label for="vb39">CB 39</label><input id="vb39" class="cb-vb vb-39" name="vb39" type="checkbox" value="&vb39=checked" /></td>
        <td><label for="vb40">CB 40</label><input id="vb40" class="cb-vb vb-40" name="vb40" type="checkbox" value="&vb40=checked" /></td>
        <td><label for="vb41">CB 41</label><input id="vb41" class="cb-vb vb-41" name="vb41" type="checkbox" value="&vb41=checked" /></td>
        <td><label for="vb42">CB 42</label><input id="vb42" class="cb-vb vb-42" name="vb42" type="checkbox" value="&vb42=checked" /></td>
        <td><label for="vb43">CB 43</label><input id="vb43" class="cb-vb vb-43" name="vb43" type="checkbox" value="&vb43=checked" /></td>
        <td><label for="vb44">CB 44</label><input id="vb44" class="cb-vb vb-44" name="vb44" type="checkbox" value="&vb44=checked" /></td>
        <td><label for="vb45">CB 45</label><input id="vb45" class="cb-vb vb-45" name="vb45" type="checkbox" value="&vb45=checked" /></td>
        <td><label for="vb46">CB 46</label><input id="vb46" class="cb-vb vb-46" name="vb46" type="checkbox" value="&vb46=checked" /></td>
        <td><label for="vb47">CB 47</label><input id="vb47" class="cb-vb vb-47" name="vb47" type="checkbox" value="&vb47=checked" /></td>
        <td><label for="vb48">CB 48</label><input id="vb48" class="cb-vb vb-48" name="vb48" type="checkbox" value="&vb48=checked" /></td>
      </tr>
      <tr>
        <td><label for="vj">VJ</label><input id="vj" name="vj" type="text" placeholder="VJ" /></td>
        <td><label for="vb49">CB 49</label><input id="vb49" class="cb-vb vb-49" name="vb49" type="checkbox" value="&vb49=checked" /></td>
        <td><label for="vb50">CB 50</label><input id="vb50" class="cb-vb vb-50" name="vb50" type="checkbox" value="&vb50=checked" /></td>
        <td><label for="vb51">CB 51</label><input id="vb51" class="cb-vb vb-51" name="vb51" type="checkbox" value="&vb51=checked" /></td>
        <td><label for="vb52">CB 52</label><input id="vb52" class="cb-vb vb-52" name="vb52" type="checkbox" value="&vb52=checked" /></td>
        <td><label for="vb53">CB 53</label><input id="vb53" class="cb-vb vb-53" name="vb53" type="checkbox" value="&vb53=checked" /></td>
        <td><label for="vb54">CB 54</label><input id="vb54" class="cb-vb vb-54" name="vb54" type="checkbox" value="&vb54=checked" /></td>
        <td><label for="vb55">CB 55</label><input id="vb55" class="cb-vb vb-55" name="vb55" type="checkbox" value="&vb55=checked" /></td>
        <td><label for="vb56">CB 56</label><input id="vb56" class="cb-vb vb-56" name="vb56" type="checkbox" value="&vb56=checked" /></td>
        <td><label for="vb57">CB 57</label><input id="vb57" class="cb-vb vb-57" name="vb57" type="checkbox" value="&vb57=checked" /></td>
        <td><label for="vb58">CB 58</label><input id="vb58" class="cb-vb vb-58" name="vb58" type="checkbox" value="&vb58=checked" /></td>
        <td><label for="vb59">CB 59</label><input id="vb59" class="cb-vb vb-59" name="vb59" type="checkbox" value="&vb59=checked" /></td>
        <td><label for="vb60">CB 60</label><input id="vb60" class="cb-vb vb-60" name="vb60" type="checkbox" value="&vb60=checked" /></td>
        <td><label for="vb61">CB 61</label><input id="vb61" class="cb-vb vb-61" name="vb61" type="checkbox" value="&vb61=checked" /></td>
        <td><label for="vb62">CB 62</label><input id="vb62" class="cb-vb vb-62" name="vb62" type="checkbox" value="&vb62=checked" /></td>
        <td><label for="vb63">CB 63</label><input id="vb63" class="cb-vb vb-63" name="vb63" type="checkbox" value="&vb63=checked" /></td>
        <td bgcolor="red"></td>
      </tr>
      <tr>
        <td><input id="vl" class="cb-vl" name="vl" type="checkbox" value="&vl=checked" /> <label for="vl">VL</label></td>
        <td colspan="16"><button type="submit">Submit</button></td>
      </tr>
    </tbody>
  </table>
</form>

Upvotes: 1

Two window.open in one function

Answers (1)

NOTE!! See updated version below this snippet!!

Edited Version!

Related Questions