Show results in different tabs if checkbox is checked

Question

I have a form whose results(a list of links) are displayed in a table right below the form. However, I want to add a functionality that if the checkbox is checked, then all the links in the results should be opened on different tabs. Given below is my code:

<div class="card" id="emulstatform">
        <div class="card-header">
          <div class="card-title">
            <div style="font-size: 25px"Filter</div>
          </div>
        </div>
        <br>
      <div class="card-body">
        <div class="row">
              <div class="col-xs-6">
                    <label name="start_date" class="control-label" style="width:35%;padding-left:15px">Start date</label>
                    <input type="date" id="start_date" style="color:black;width:100px" ></input>
                </div>
          <div class="col-xs-6">
              <label name="end_date" class="control-label" style="width:35%">End Date(Default: Current Date)</label>
              <input style="color:black;width:100px" id="end_date" type="date"></input>

          </div> 
        </div>
        <br>
        <div class="row">
          <div class="col-xs-6">
             <label name="fruit_name" class="control-label"  style="width:35%; padding-left:15px">Select a fruit</label>
              <select class="js-example-placeholder-single1 js-example-basic-multiple form-control" id="fruit_name" placeholder="Select" style="width:210px" multiple="multiple"> 
              </select>
          </div>
          <div class="col-xs-6">
              <label name="fruit_test" class="control-label" style="width:35%">Select fruit_TEST</label>
              <select class="js-example-placeholder-single2 js-example-basic-multiple form-control" style="width:210px" id="fruit_test" multiple="multiple">

              </select>             
          </div> 
        </div>

        <div class="row">
          <div class="col-xs-6">
             <label name="fruit_version" class="control-label" style="width:35%; padding-left:15px">Select fruit message</label>
              <select class="js-example-placeholder-single3 js-example-basic-multiple form-control" style="width:210px" id="fruit_message1" multiple="multiple">   
              </select>
          </div>
        </div>
        <div class="text-center">
                <div class="checkbox">
                    <label><input type="checkbox" value="0" id="newTabs" ><em>Open on Different tabs</em></label>  
                </div>
                <button class="btn btn-md btn-default" v-on:click="loadResults">
                    <i class="fa fa-arrow-circle-right"></i> Submit
                </button> 
                <button class="btn btn-md btn-default" type="reset" name="searchreset" value="reset">
                    <i class="fa fa-arrow-circle-right"></i> Reset
                </button>
           </div>

      </div>

    </div>

Here is the AJAX through which I fetch my data from backend:

document.onload(getformdata())
function getformdata() {
    var self = this;
    $.ajax({
        url : window.location.href,
        type:'GET',
        cache:false,
        data:{type:'formdata'},
        success:function(res){
            if(res.message){
                alert("Error getting data for the form")
            }
            ele1 = document.getElementById('fruit_name');
            ele2 = document.getElementById('fruit_test');
            ele4 = document.getElementById('fruit_message1');
            for (var i = 0; i<res.options.fruit_name.length; i++){
                var opt = document.createElement('option');
                opt.value = res.options.fruit_name[i];
                opt.innerHTML = res.options.fruit_name[i];             
                ele1.appendChild(opt);              
            };
            for (var i = 0; i<res.options.fruit_test.length; i++){ 
                var opt = document.createElement('option');
                opt.value = res.options.fruit_test[i];
                opt.innerHTML = res.options.fruit_test[i];
                ele2.appendChild(opt);
            }  
            var start_date = document.getElementById('start_date')
            var end_date = document.getElementById('end_date')
            start_date.innerHTML = res.options.start_date
            end_date.innerHTML = res.options.end_date

        },
        error : function(err){
            self.message = "Error getting data for the form";            
        }
    });
}

The url of each link is of the form fruitdata/?id=1000 , where id is the only parameter that changes for a different fruit. How do I achieve this functionality of opening these links on different pages??

Answer 1

If I understood your question correctly you need something like below to open new tab:

<button onclick="myFunc()">open google in new tab</button>
<script>
    function myFunc() {
        window.open("https://www.google.com");
    }
</script>

for opening multiple tab you can use this code but If the end-user is running Popup Blocking software (like that built into Chrome) then it may automatically stop those other windows/tabs from opening.

let urls = ["https://stackoverflow.com", "https://stackexchange.com/"];
for (var i = 0; i<2; i++){
  window.open(urls[i]); 
}

for find out when your check box is checked this code can help:

$("input[type=checkbox]").on('change',function(){
    if($("input[type=checkbox]").is(':checked'))
        alert("checked");  
    else{
        alert("unchecked");  
    }
 }

I hope this code help you.