0

I have a PHP website that i am building where i am adding a basic product order form. I have created the form elements and once a user selects an option, i would like to open a new window (not tab), have that new window present as the focus and have variables delivered to the newly opened window through the GET method.

Currently when i submit the form, the target form opens per js, however the url variables are not passed to the new window. My code somehow concurrently also opens a new tab and transfers the GET url to the new tab and not the new window resulting in a new tab with the correct url and a new window without the correct url.

I appreciate there are many similar questions like this and i have spent hours trying to fix to no avail.

Thanks in advance for your time

Source form HTML:

        <div class="prdContainer">
            <form method="GET" target="_blank" action="members_order.php" onsubmit="openMemberOrder()"  id='bcpot002' class="prdInput">
                <div class="prodDiv">
                    <button type="submit" id="catOrder" class="catOrder"><img id="prdImgThumb" name="bcpot002" src="../../../Images/Product_Catalogue/bcpot002/bcpot002_thumb.jpg" ></button>
                </div>
                <div class="formDiv">
                    <label for="cat_ID" value="">Product Name:</label>
                    <input type="text" id="catID" name="cat_ID" value="bcpot002" readonly><br>
                    <label for="cat_Desc">Product Description:</label>
                    <input type="text" id="catDesc" name="cat_Desc" value="Red_Pot" readonly><br>
                    <label for="cat_val">Per unit price $:</label>
                            <input type="number" id="catVal" name="cat_val" value="" readonly>
                    <input type="hidden" id="divHeight" name="DivHeight" value="1036" readonly>
                    <input type="hidden" id="divWidth" name="DivWidth" value="1543" readonly>
                </div>
            </form>
        </div>

Source form JS:

function openMemberOrder(url) {
    newwindow = window.open('members_order.php', 'members_order', 'width=1600px,height=2000px,toolbar=no,scrollbars=no,resizable=no');
    if (window.focus) {newwindow.focus()}

      if (!newwindow.closed) {newwindow.focus()}
    return false;
}

Receiving page HTML:

<?php require_once('xxxxx/initialize.php');

        $catID = $_GET['cat_ID'];
        $catDesc = $_GET['cat_Desc'];
        $DivHeight = $_GET['DivHeight'];
        $DivWidth = $_GET['DivWidth'];

        echo "ID: " . $catID . "<b>";
        echo "Desc: " . $catDesc . "<b>";
        echo "Val: " . $catVal . "<b>";
        echo "H: " . $DivHeight . "<b>";
        echo "W: " . $DivWidth . "<b>";

?>

<body>
    <header id="memOrderHead" ></header>
    <div class="gridContainer" id="gridContainer" ></div>
        <article class="article" >
            <div class="orderDiv">
                <h3>Order Item</h3>
                <form class="orderInput">
                      <label for="cat_ID">Product name:</label>
                                <input type="text" id="catID" name="cat_ID" value="<?php echo $catID; ?>" readonly>
                                <label for="cat_Desc">Product description:</label>
                                <input type="text" id="catDesc" name="cat_Desc" value="<?php echo $catDesc; ?>" readonly>
                      <label for="cat_val">Per unit price $:</label>
                                <input type="number" id="catVal" name="cat_val" value="<?php echo $catVal; ?>" readonly>
                      <label for="cat_quant">Quantity ordered:</label>
                                <input type="number" id="orderQuant" name="cat_quant" min="0" placeholder="0">
                      <label for="cat_Total">Total Price $:</label>
                                <input type="number" id="orderTotal" name="cat_Total" min="0" placeholder="0" readonly>
                      <button type="button" class="orderButton" onclick="clearForm()">Clear</button>
                      <button type="button" class="orderButton" onclick="total()">Calculate Total</button>
                      <button type="button" class="orderButton" onclick="orderConfirm()" id="confirmReset">Submit</button>
                </form>
            </div>
        </article>
KFOz
  • 25
  • 5
  • You are basically trying to send data between pages? – Ayubhai Shah Jul 08 '20 at 09:20
  • yes, i want to send some of the ID's to a new page which has a few other features. the user can then hit order and that submits via POST. – KFOz Jul 08 '20 at 09:22
  • Why not use cookies? – Ayubhai Shah Jul 08 '20 at 09:23
  • _“i would like to open a new window (not tab)”_ - that is not your choice, that is something I as the user control via the settings in my browser. – CBroe Jul 08 '20 at 09:25
  • i suppose, i hadn't thought of that at all, it's a good idea... i am very new to HTML/PHP. I am really trying to figure this out as i am sure i will need to do this in the future and i dont like not finding answers – KFOz Jul 08 '20 at 09:26
  • Preferred to use cookies and destroy on post – Ayubhai Shah Jul 08 '20 at 09:28
  • @CBroe fair, so your saying that no matter what the method of a new window could be flawed because the user could in effect block a new window opening? – KFOz Jul 08 '20 at 09:28
  • @AyubhaiShah thanks i will look into that – KFOz Jul 08 '20 at 09:29
  • No, I am saying that when you call `window.open` (or use `target="_blank"`), my browser decides whether that will open a new window, _or_ a new tab. This is nothing you can control, I do, via my browser settings. – CBroe Jul 08 '20 at 09:29
  • https://stackoverflow.com/q/13734893/7385148 check this out, maybe it solves your query – Ayubhai Shah Jul 08 '20 at 09:32

1 Answers1

0

You can pass data from the webpage to a new window using HTML 5 local storage. Some other alternatives are given in the post below JavaScript - How do I open a new page and pass JSON data to it?

Ayubhai Shah
  • 97
  • 10