jQuery remove element not working onClick - javascript

I have the following code that gets generated in PHP.
<?php
foreach ($quote->lineItems as $lineItem) {
$name = "line_item_" . rand();
$txtValue = "Supplier: " . $lineItem->supplierName . " Model: " . $lineItem->modelName . " Price: " . $lineItem->price . " Quantity: " . $lineItem->quantity;
?>
<table style="width:900px">
<tr>
<td><input type='hidden' name='<?= $name ?> id='<?= $name ?>''
value='<?= $lineItem->id ?>,<?= $lineItem->supplierId ?>,<?= $lineItem->supplierName ?>
,<?= $lineItem->modelId ?>,<?= $lineItem->modelName ?>,<?= $lineItem->price ?>
,<?= $lineItem->quantity ?>'/>
<?= $txtValue ?>
</td>
<td>
<button type='button' onclick="onBtnRemove('<?= $name ?>')" class="btn btn-secondary">
Remove
</button>
</td>
</tr>
</table>
<?php
}
?>
The onBtnRemove function looks like this.
function onBtnRemove(idToRemove) {
const toRemove = $("#" + idToRemove);
toRemove.remove();
}
I cannot figure out why the element does not remove.

Related

Populating dynamic form row from generated list PHP

I'm making something for a stocktake.
I have a form that generates with 4 fields. item_code, item_name, packing, quantity
<form action="goods.php" method="post">
<table>
<!-- Headers -->
<tr>
<td><b>Item Code</b></td>
<td><b>Description</b></td>
<td><b>Packing</b></td>
<td><b>Quantity</b></td>
</tr>
<?php
for ($i = 0; $i <= 50; $i++) {
?>
<tr>
<td>
<INPUT TYPE="TEXT" NAME="item_code[<?php echo $i; ?>]" SIZE="6" VALUE="
<?php
if (!empty($_POST["item_code"][($i)])) {
echo $_POST["item_code"][($i)];
}
?>"></td>
<td><?php
if (!empty($_POST["item_code"][($i)])) {
$result = FetchData($_POST["item_code"][($i)]);
echo $result['category'];
}
?>
</td>
<td>
<?php
if (!empty($_POST["item_code"][($i)])) {
echo $result['item_name'];
}
?></td>
<td>
<?php
if (!empty($_POST["item_code"][($i)])) {
echo $result['packing'];
}
?></td>
<td><INPUT TYPE="TEXT" NAME="quantity[<?php echo $i; ?>]" SIZE="5" VALUE="
<?php
if (!empty($_POST["quantity"][($i)])) {
echo $_POST["quantity"][($i)];
} else {
echo "";
}
?>"></td>
A js function for the button
<script>
function fillForm(value) {
document.getElementById('value').innerHTML = value;
}
</script>
and a list that is generated with 3 fields. item_code, item_name, packing
<?php
$dbh = dbh_get();
$sql = 'SELECT * FROM goods as goods(item_code, sort) order by human_sort(goods.item_code)';
$v = array();
$stmt = $dbh->prepare($sql);
$stmt->execute();
while (true) {
$r = $stmt->fetch();
if (is_bool($r)) break;
print '
<tr>
<td class="buttonL" id="<php ' . $r['item_code'] . ' ?>" onclick="fillForm()">' . $r['item_code'] . '</td>
<td>' . $r['item_name'] . '</td>
<td>' . $r['packing'] . '</td>
</tr>' . "\n";
}
dbh_free($dbh);
?>
}
I want to put a button on each list row and when it's clicked it populates the first three fields in the form, leaving quantity to be filled out. Then when another is clicked it populates the next form row etc,. It's working fine manually entering from the list, but the list is nearly 5000 items so it's a hassle to keep searching then scrolling up and entering the values.
I don't see how to do this with PHP so I assume I need a javascript function, which is where I'm lost. Let me know if you need more info.

Put information message that user cant continue ,if number of rows is not true

I have code
if($rowcount1 > 0){
?>
<h3 class="text-muted"><u>DEPARTURE</u></h3>
<h4><?php echo "$origin to $destination "?></h4>
<table class="table table-hover">
<thead>
<tr>
<th>FLIGHT NO.</th>
<th>DEPART</th>
<th>ARRIVE</th>
<th>AIRPORT</th>
<th>DURATION</th>
<th>FLY ONLY</th>
<th>FLY + BAGGAGE</th>
</tr>
</thead>
<tbody>
<?php
foreach ($query as $flightr) {
echo "<tr>";
echo "<td>".$flightr['id']."</td>";
echo "<td>".$flightr['depart']."</td>";
echo "<td>".$flightr['arrive']."</td>";
echo "<td>".$flightr['airport']."</td>";
echo "<td>".$flightr['duration']."</td>";
echo "<td> <label for=lbl7> <input type='radio' checked id='lbl7' name='flight[]' value='".$flightr['flyonly']."'> PHP ".number_format($flightr['flyonly'])."</label></td>";
echo "<td> <label for=lbl8> <input type='radio' checked id='lbl8' name='flight[]' value='".$flightr['flybaggage']."'> PHP ".number_format($flightr['flybaggage'])."</label></td>";
echo "</tr>";
}
?>
</tbody>
</table>
<hr>
<?php
}else{
echo " <div class='alert alert-info' role='alert'>
No results found on <BIG class='text-muted'>Departure</BIG> pick another flight thank you.
</div>
";
}
}
}
?>
<button type="button" name="forform" onclick="" class="hit">hit</button>
how to put info message that user cant continue (and they cant click the button to continue), if number of rows is not true. Via button onclick. begginer in js sorry. Thanks in advance
Add disabled attribute of button based on rowCount
<button type="button" name="forform" onclick="" class="hit"
<?php echo ($rowcount1 > 0) ? '' : 'disabled'; ?>>hit</button>
You can do that by put button in if else condition with disable attributes
if ($rowcount1 > 0) {
?>
<h3 class="text-muted"><u>DEPARTURE</u></h3>
<h4><?php echo "$origin to $destination " ?></h4>
<table class="table table-hover">
<thead>
<tr>
<th>FLIGHT NO.</th>
<th>DEPART</th>
<th>ARRIVE</th>
<th>AIRPORT</th>
<th>DURATION</th>
<th>FLY ONLY</th>
<th>FLY + BAGGAGE</th>
</tr>
</thead>
<tbody>
<?php
foreach ($query as $flightr) {
echo "<tr>";
echo "<td>" . $flightr['id'] . "</td>";
echo "<td>" . $flightr['depart'] . "</td>";
echo "<td>" . $flightr['arrive'] . "</td>";
echo "<td>" . $flightr['airport'] . "</td>";
echo "<td>" . $flightr['duration'] . "</td>";
echo "<td> <label for=lbl7> <input type='radio' checked id='lbl7' name='flight[]' value='" . $flightr['flyonly'] . "'> PHP " . number_format($flightr['flyonly']) . "</label></td>";
echo "<td> <label for=lbl8> <input type='radio' checked id='lbl8' name='flight[]' value='" . $flightr['flybaggage'] . "'> PHP " . number_format($flightr['flybaggage']) . "</label></td>";
echo "</tr>";
}
?>
</tbody>
</table>
<hr>
<button type="button" name="forform" onclick="" class="hit">hit</button>
<?php
} else {
echo " <div class='alert alert-info' role='alert'>
No results found on <BIG class='text-muted'>Departure</BIG> pick another flight thank you.
</div>
";
echo '<button type="button" name="forform" onclick="" class="hit" disable="disable">hit</button>';
}
?>

How to post the information using javascript for a preview table

Hey I need to know how to post the information to another php page using javascript to provide a preview table.
Here's my HTML that has a onchange tag that sends the productID to the function.
<form action="Home.php" method="Post">
<div>
<p>
<span class="text">Please Select a product:</span>
<select id="Select_Product" name="Select_Product" onchange="productInfo(this.value)" class="select">
<?php
//setting the select statement and running it
$search = "SELECT * FROM Library.Products order by Name";
$return = mysql_query($search);
//echo "<select id=Select_Product name=Select_Product onchange=productInfo(this.value) class=select>";
while ($row = mysql_fetch_array($return)) {
echo "<option value='" . $row['ProductID'] . "' selected='selected'>".$row['Name'] . "</option>";
}
?>
</select>
</p>
<table>
<tr>
<td>
<input name="action" type="submit"class="button" id="button_Add" value="Add"/>
</td>
<td>
<input name="action" type="submit" class="button" id="button_Remove" value="Remove"/>
</td>
<td>
<input name="action" type="submit" class="button" id="button_empty" value="Empty"/>
</td>
</tr>
</table>
</div>
From there I want it to send it to catalogue.php.
<script>
function productInfo(key) {
//Send key to catalogue.php
}
</script>
If I can get the other page to get that variable I can run a MYSQL command to get the information. Here is what catalogue.php looks like at the moment.
<?php
$sql = "SELECT Name, Price FROM Library.Products WHERE ProductID = " . $product_id;
echo "<table border=\"1\" padding=\"3\" width=\"650px\"><tr><th>Name</th><th>Description</th><th>Price</th><th width=\"80px\">Image</th></tr>";
echo "<tr>";
echo "<td>" .$product_id . "</td>";
echo "<td> Hi</td>";
echo "<td></td>";
echo "<td align=\"center\"><img alt=\"\" src=\"productImages/".$product_id.".jpg\ width=\"120\" height=\"120\"/></td>";
echo "</tr>";
echo "</table><br>";
document.
?>
So in a sense I want to turn the key in productInfo(key) to be assigned to the variable $product_id in catalogue.php. Thanks for helping.
You can add an invisible form :
<script>
function productInfo(key) {
//Send key to catalogue.php
document.getElementById( "key" ).value = key;
document.getElementById( "frm" ).submit(); // SUBMIT FORM.
}
</script>
<form action="catalogue.php" method="post" id="frm"
style="display:none" target="_blank">
<input type="text" id="key" name="key"/>
</form>
catalogue.php needs one little change :
<?php
$product_id = $_POST[ "key" ]; //<================== VALUE FROM THE INVISIBLE FORM.
$sql = "SELECT Name, Price FROM Library.Products WHERE ProductID = " . $product_id;
echo "<table border=\"1\" padding=\"3\" width=\"650px\"><tr><th>Name</th><th>Description</th><th>Price</th><th width=\"80px\">Image</th></tr>";
echo "<tr>";
echo "<td>" .$product_id . "</td>";
echo "<td> Hi</td>";
echo "<td></td>";
echo "<td align=\"center\"><img alt=\"\" src=\"productImages/".$product_id.".jpg\ width=\"120\" height=\"120\"/></td>";
echo "</tr>";
echo "</table><br>";
document.
?>
Or you can use Ajax :
html file
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript">
function myAjax ( key ) {
$.ajax( { type : 'POST',
data : { 'param' : key },
url : 'catalogue.php',
success: function ( data ) {
document.getElementById( "my_div" ).innerHTML = data;
},
error: function ( data ) {
alert( "error" );
}
});
}
function productInfo( key ) {
//Send key to catalogue.php
myAjax( key );
}
</script>
</head>
<body>
<button onclick="productInfo('123')">Click here to get the data</button>
<div id="my_div">
- data will show here -
</div>
</body>
</html>
catalogue.php
<?php
$key = $_POST[ "param" ];
echo "<table border='1'>" .
" <tr>" .
" <td>$key</td>" .
" <td>ABC</td>" .
" </tr>" .
"</table>";
?>

Get input before submitting to insert into action url

Im trying to get a value of an input into my buttons action url before the button is pushed.
I need to get the value of:
id="qty<?php echo $i;?>"
Into where it says:
<?php echo VALUE OF $qtyforaction; ?>
My Code is:
<?php $i = $_product->getId();?>
<form action="<?php echo $this->helper('checkout/cart')->getAddUrl($_product); ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<input type="text" name="qty" id="qty<?php echo $i;?>" maxlength="12" value="1" title="Qty" class="cartnum" />
<?php $qtyforaction = 'qty'.$i; ?>
<?php echo $qtyforaction; ?>
<button type="button" class="addtocartbutton button btn-cart" onclick="setLocation('<?php echo $this->helper('checkout/cart')->getAddUrl($_product); ?>qty/<?php echo VALUE OF $qtyforaction; ?>')" ><span><span>Order Again</span></span></button>
</form>
Would I have to use javascript to get it into the url string? My javascript is a bit ropey, would something like this work?
<script type="text/javascript">
var something= document.getElementById('<?php echo $qtyforaction;?>');
</script>
UPDATE WITH FULL CODE:
<?php
if (Mage::getSingleton('customer/session')->isLoggedIn()) {
/* Get the customer data */
$customer = Mage::getSingleton('customer/session')->getCustomer();
/* Get the customer's email address */
$customer_email = $customer->getEmail();
}
$collection = Mage::getModel('sales/order')->getCollection()->addAttributeToFilter('customer_email', array(
'like' => $customer_email
));
$uniuqProductSkus = array();
foreach ($collection as $order) {
$order_id = $order->getId();
$order = Mage::getModel("sales/order")->load($order_id);
$ordered_items = $order->getAllItems();
foreach ($ordered_items as $item)
{
if (in_array($item->getProduct()->getSku(), $uniuqProductSkus)) {
continue;
} else {
array_push($uniuqProductSkus, $item->getProduct()->getSku());
$_product = Mage::getModel('catalog/product')->load($item->getProductId());
$product_small_image_path = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(200);
$product_thumbnail_path = Mage::helper('catalog/image')->init($_product, 'small_image')->resize(150);
$summaryData = Mage::getModel('review/review_summary')->load($item->getProductId());
echo "<li>";
echo "<div class='previous-name'><p><a style='color:black; font-weight:bold; font-size:14px;' href='" . $_product->getProductUrl() . "'>";
echo $item->getName() . "</a></p></div>";
echo "<div class='previous-image'><a href='" . $_product->getProductUrl() . "'>";
echo "<img src='" . $product_small_image_path . "' />";
echo "</a></div>";
echo "<div class='previous-rating'>";
echo "<p><a style='color:black; font-weight:bold; font-size:14px;' href='" . $_product->getProductUrl() . "#product_tabs_review_tabbed'>Review this beer now</a></p>";
echo $summaryData->getRatingSummary() . '% Would buy again <br/>';
echo "<div class='rating-box' style='float:left;'>";
echo "<div class='rating' style='width:" . $summaryData->getRatingSummary() . "%'></div></div>";
echo "</div>";
/**echo "<div class='previous-button'>";
echo '<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation(\'';
echo $this->helper('checkout/cart')->getAddUrl($_product);
echo '\')"><span><span>Order Again</span></span></button>';
echo "</div>";**/
?>
<?php $i = $_product->getId();?>
<div class='previous-button'>
<form action="<?php echo $this->helper('checkout/cart')->getAddUrl($_product); ?>" method="post" id="product_addtocart_form_<?php echo $_product->getId()?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<input type="text" name="qty" id="qty<?php echo $i;?>" maxlength="12" value="1" title="Qty" class="cartnum" />
<?php $qtyforaction = 'qty'.$i; ?>
<script type="text/javascript">
var xy = document.getElementsByTagName("input")[0].getAttribute("qty");
var x = "<button type='button' class='addtocartbutton button btn-cart' onclick='setLocation()'><span><span>Order Again</span></span></button>";
document.getElementById("buttonaddcart").innerHTML = x;
</script>
<div id="buttonaddcart">
<button type="button" class="addtocartbutton button btn-cart" onclick="setLocation('<?php echo $this->helper('checkout/cart')->getAddUrl($_product); ?>qty/')" ><span><span>Order Again</span></span></button>
</div>
</form>
</div>
<?php
echo "<div class='previous-clear'></div>";
echo "</li>";
}
}
}
?>
You need to get the value of the id attribute:
var x = document.getElementsByTagName("input")[0].getAttribute("id");
But how do you plan on using PHP to echo out this variable if PHP is loaded and done with before Javascript even comes into play? You could use Javascript though to display this variable on the page if that's all you needed.
If you had something in your HTML to target, you could do it like this:
document.getElementById("result").innerHTML = x;
But anyways, get the action attribute value...
var y = document.getElementsByTagName("form")[0].getAttribute("action");
Then set the action attribute to this + the qty...
document.getElementsByTagName("form")[0].setAttribute("action", x + y);
That should work for you, if not, try wrapping x + y in additional parentheses...("action", (x + y));

PHP not getting variables from jscript

I have trying to create a php cart and I have a table with a couple of products, when I click on the submit button some javascript is called and then the form is submitted.
When I execute the page and press the button I get a page "productcart.php?productid=1&command=add" and chrome says that there is an internal server error. I believe that there is a jscript or PHP error that is not letting the variables be pulled into the php code block. Can anyone see if there is something else I am doing wrong?
also what does the "?productid=1&command=add" mean? why does the browser return that?
<script type="text/javascript">
function addtocart(prod_id)
{
document.productform.productid.value = prod_id;
document.productform.command.value = 'add';
document.productform.submit();
}
</script>
<?php
include("local-connect.php");
include("productfunctions.php");
if($_REQUEST['command'] == 'add' && $_REQUEST['productid'] > 0)
{
$product_id = $_REQUEST['productid'];
add_to_cart($product_id, 1);
echo 'it worked';
//header("Location:cart.php");
exit();
}
?>
<form name="productform" action="">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
<table id="product_table">
<?php
$query = "SELECT * FROM products";
$result = mysqli_query($dbc,$query) or die ("Error querying database");
while($row = mysqli_fetch_array($result))
{
echo '<tr>
<td><img id="shopping_img" src="' .$row['image'] . '"/></td>
<td><p><strong>' . $row['name'] . '</strong></p>
<p>' . $row['descri'] . '</p>
<p>Price:<strong>$' . $row['price'] . '</strong></p></td>
<td><input type="button" value="Add to Cart" onclick="addtocart(' . $row['id'] . ')" /></td>
</tr>';
}
?>
</table>
</form>
This will fix the "?productid=1&command=add" in the URL and protect from code injection.
I added method="post" and used $_POST I also used intval() to insure an integer is sent to your function.
<script type="text/javascript">
function addtocart(prod_id)
{
document.productform.productid.value = prod_id;
document.productform.command.value = 'add';
document.productform.submit();
}
</script>
<?php
include("local-connect.php");
include("productfunctions.php");
if($_POST['command'] == 'add' && $_POST['productid'] > 0)
{
$product_id = intval($_POST['productid']);
add_to_cart($product_id, 1);
echo 'it worked';
//header("Location:cart.php");
exit();
}
?>
<form name="productform" action="" method="post">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
<table id="product_table">
<?php
$query = "SELECT * FROM products";
$result = mysqli_query($dbc,$query) or die ("Error querying database");
while($row = mysqli_fetch_array($result))
{
echo '<tr>
<td><img id="shopping_img" src="' .$row['image'] . '"/></td>
<td><p><strong>' . $row['name'] . '</strong></p>
<p>' . $row['descri'] . '</p>
<p>Price:<strong>$' . $row['price'] . '</strong></p></td>
<td><input type="button" value="Add to Cart" onclick="addtocart(' . $row['id'] . ')" /></td>
</tr>';
}
?>
</table>
</form>

Categories

Resources