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>