How to open the URL in a new Tab and transfer the data

Question

First of all, I would like to address that I am a beginner at coding.

I have been handled a plane ticket WordPress website to edit from another programmer.

Here is the current situation:

Website A is my WordPress website. Website B is the website of the company that provides the API.

Website A sends data from the main Search form using Websites B API, and then in the same window where Website A is loaded, the site redirects to Website B where all the results are located.

Remember: The redirection happens on the same window from Website A to Website B, with no new tabs.

My goal is the following:

I want the user that is currently located in Website A after they press the Submit button of the main Search form, to open a new tab, and in the new tab, there should be Website B with all the results.

So one more time, a user in Website A after filling out the main search form and clicking Submit, should be redirected to a new Tab. This new Tab should have Website B with the results.

An example of what I am trying to do is if you go to https://www.kiwi.com/en/ and search for a flight. There you can exactly see what I am talking about.

Here is the code of the Submit Button:

export function initSearchButtonOnClick() {
  $("#search-button").on("click", function (e) {
    e.preventDefault();
    switch (flightType) {
      case "rt":
      case "ow":
        if (
          $("#from-destination")[0].reportValidity() &&
          $("#to-destination")[0].reportValidity()
        ) {
          const fromDestination = $("#from-destination")
            .val()
            .split("(")[1]
            .slice(0, -1);
          const toDestination = $("#to-destination")
            .val()
            .split("(")[1]
            .slice(0, -1);
          const fromDate = $("#depart-date").val();
          const returnDate = $("#return-date").val();
          const adultsQty = $(".traveller-select.adultsQty").val();
          const childQty = $(".traveller-select.childQty").val();
          const babyQty = $(".traveller-select.babyQty").val();
          const noOvernightStopover = $("#no-overnight-stopover").is(":checked")
            ? "on"
            : "";
          const noAirportChange = $("#no-airport-change").is(":checked")
            ? "on"
            : "";
          const directFlight =
            $("#direct-flight").is(":checked") ||
            $("#direct-flight-mobile").is(":checked")
              ? "on"
              : "";
          const timePickup = $("#time-pickup").val();
          const flightClass = $("#flight-class").val();
          const selectedAirline = $("#airline-select").val();

          activateLoadingOverlay();

          setTimeout(function () {
            if (flightType == "rt") {
              $.redirect(
                `${baseUrl}/${fromDestination}/${toDestination}/${fromDate}-${returnDate}/${adultsQty}/${childQty}/${babyQty}/rt`,
                {
                  NoOvernightStopover: noOvernightStopover,
                  NoAirportChange: noAirportChange,
                  PsgrDirect: directFlight,
                  FlexDatePOST: timePickup,
                  PsgrClass: flightClass,
                  PsgrCarrier: selectedAirline,
                }
              );
            } else {
              $.redirect(
                `${baseUrl}/${fromDestination}/${toDestination}/${fromDate}/${adultsQty}/${childQty}/${babyQty}/ow`,
                {
                  NoOvernightStopover: noOvernightStopover,
                  NoAirportChange: noAirportChange,
                  PsgrDirect: directFlight,
                  FlexDatePOST: timePickup,
                  PsgrClass: flightClass,
                  PsgrCarrier: selectedAirline,
                }
              );
            }
          }, 3000);
        }
        break;
      case "ms":
        const multiFromDestinationList = $(".multi-from-destination.tt-input");
        const multiToDestinationList = $(".multi-to-destination.tt-input");
        const multiDateList = $(".multi-datepicker");
        const adultsQty = $(".multi-traveller-select.adultsQty").val();
        const childQty = $(".multi-traveller-select.childQty").val();
        const babyQty = $(".multi-traveller-select.babyQty").val();
        const timePickup = $("#multi-time-pickup").val();
        const noOvernightStopover = $("#no-overnight-stopover").is(":checked")
          ? "on"
          : "";
        const noAirportChange = $("#no-airport-change").is(":checked")
          ? "on"
          : "";
        const directFlight =
          $("#multi-direct-flight").is(":checked") ||
          $("#direct-flight-mobile").is(":checked")
            ? "on"
            : "";
        const flightClass = $("#flight-class").val();
        const selectedAirline = $("#airline-select").val();

        let isFormValid = true;
        const numberOfFlights = multiFromDestinationList.length;
        for (let index = 0; index < numberOfFlights; index++) {
          if (
            !multiFromDestinationList[index].reportValidity() ||
            !multiToDestinationList[index].reportValidity() ||
            !multiDateList[index].reportValidity()
          ) {
            isFormValid = false;
          }
        }
        let dynamicQuery = "";
        if (!isFormValid) return;

        for (let index = 0; index < numberOfFlights; index++) {
          const fromDestination = multiFromDestinationList[index].value
            .split("(")[1]
            .slice(0, -1);
          const toDestination = multiToDestinationList[index].value
            .split("(")[1]
            .slice(0, -1);
          const flightDate = multiDateList[index].value;
          dynamicQuery += `/${fromDestination}/${toDestination}/${flightDate}`;
        }

        activateLoadingOverlay();

        setTimeout(function () {
          $.redirect(
            `${baseUrl}${dynamicQuery}/${adultsQty}/${childQty}/${babyQty}/ms/${numberOfFlights}`,
            {
              NoOvernightStopover: noOvernightStopover,
              NoAirportChange: noAirportChange,
              PsgrDirect: directFlight,
              FlexDatePOST: timePickup,
              PsgrClass: flightClass,
              PsgrCarrier: selectedAirline,
            }
          );
        }, 3000);

        break;
      default:
        return;
    }
  });
}

I have been trying to use window.open('MY URL', '_blank'); but I don't know how to pass the rest of the parameters/data:

{
NoOvernightStopover: noOvernightStopover,
NoAirportChange: noAirportChange,
PsgrDirect: directFlight,
FlexDatePOST: timePickup,
PsgrClass: flightClass,
PsgrCarrier: selectedAirline,
}

I have been searching the whole inte.net, but I can't find any help.

Thank you very much for your time and help.

If you want to know exactly the website that I am talking about, it is https://www.aviokarte.me/

Answer 1

Use this method (just add method & target to the end of your existed function call)

$.redirect(
            `${baseUrl}${dynamicQuery}/${adultsQty}/${childQty}/${babyQty}/ms/${numberOfFlights}`,
            {
              NoOvernightStopover: noOvernightStopover,
              NoAirportChange: noAirportChange,
              PsgrDirect: directFlight,
              FlexDatePOST: timePickup,
              PsgrClass: flightClass,
              PsgrCarrier: selectedAirline,
            }, 'POST', '_blank'
          );

this is the documentation https://github.com/mgalante/jquery.redirect