I'm coding a shopping cart type functionality where I am querying a database for a number of items (SKU, qty, name) in an $(.ajax) call. I'd like to display a table with all the items that match what the user is looking for, with the option where the user can specify a quantity desired. They can then click an 'Add' to add their selection to a "cart".
Here's a simplified example:
<table>
<tr><td>Item A</td><td>SKU: 001</td><td>Qty: <input name="qty-sku001"> <input type="button" value="Add"></td></tr>
<tr><td>Item B</td><td>SKU: 002</td><td>Qty: <input name="qty-sku002"> <input type="button" value="Add"></td></tr>
<tr><td>Item C</td><td>SKU: 003</td><td>Qty: <input name="qty-sku003"> <input type="button" value="Add"></td></tr>
</table>
What is the ideal way to get information from just one row, when it's button is clicked?
I was thinking of adding an onclick="AddToCart(x);" to each button, but that'd just pass in an HTML Form Element object. Do I need to make each row it's own form, or can I get the button's parent TR and then grab the values from that row's input and other elements?
The data will end up being appended to a "Cart" div's table, so I'll need the three pieces of data I loaded in from my ajax call. I suppose I can add hidden elements to each row, but there must be a more efficient and graceful solution.
Thanks!
assuming that you use jQuery, you can use this:
$("input[type=button]").click(function(evn){
var rowName = $(this).prev().attr('name'); // this will give you the name attribute of element that is before the button in the DOM
// do here whatever you need with rowName
});
edit
you can add a class to buttons to prevent running this code for all buttons on your page like this:
<input class="row-button" type="button" value="Add">
and use this javascript:
$(".row-button").click(function(evn){
// the code from above
}
$("input:button").click(function(){var $tr = $(this).closest('tr');});
$tr is the jquery row object that a button has been clicked
Related
I have created a cart page from a table named booking .
The cart page has item name and asubmit button named "delete".
There has a lot of items in the cart sheet and every item has a "delete" submit type button.
The items are inside one form.
I need to delete one item from the table booking by clicking the "delete" button of the item.
How can I do it using PHP.
<form action="delete.php" method="POST">
<div>
<h2>Item1</h2>
<input type="submit" name="item1" value="delete">
</div>
<div>
<h2>Item2</h2>
<input type="submit" name="item2" value="delete">
</div>
<div>
<h2>Item3</h2>
<input type="submit" name="item3" value="delete">
</div>
...
<!--There has a lot of items like that-->
</form>
Now for example I need to delete item100. How can I do it?
Edit: Here is the delete.php code-
<?php
$query = mysql_query("delete from notification where item = 'item100'") or die(mysql_error());
?>
You do not need form and submit input. You could use links:
delete
This is a GET so you need to perform a redirect to your incoming page to avoid back button problems or use Ajax or both.
If you want to use your form and submit button you could add some Javascript to set an hidden input or use a <button />
Although there is sql injection risks you will need to deal with, this is how you would do it using your current method. Keep in mind you will still need to modify your code to prevent sql injections.
<?php $query = mysql_query("delete from notification where item = '".$_POST['name']."'") or die(mysql_error()); ?>
So this is the deal:
I have an order page and I use two forms.
The first form contains input data for ONE order item and when I press OK I will pass the form's input data to javascript through onsubmit=send_item_data(this) and at the end i will return false; in send_item_data function so it doesn't get posted.
In the second one I want to append/substract the former data in div groups (so I can add more or delete them easily) but I can't think (or find) of a solution that puts in group the data from the first form in one div and appends that child div to the second form.
In the end, by the push of a button, the second form will post all the divs' data and I will handle it with PHP backend code.
Code body:
<form action="" id="first_form" method="post" onsubmit="return send_item_data(this)">
<div id="Select_list">
<select blah blah>
---bunch of options---
</select>
</div>
<div id="extras">
---Some extras that you can choose by a checkbox input (I generate it via PHP)---
example:
<input name="checkbox[<?php echo $row['column_data_from_query']?>]" type="checkbox" value="checked">
</div>
--->Possibly two more input fields here<---
<input type="button" value="clear" onclick="clear_form()">
<input type="submit" value="OK">
</form>
<form action="" id="finalize_order_form" method="post">
--->This is the second form<---
--->In here I want to put the data from the first form so i can handle them by group<---
if I click OK three times in the first form there should be three groups here that contain each form's data
<input type="submit" class="button" value="Finallize order"/>
</form>
I mainly use PHP Mysql and Javascript (including AJAX, not jQuery).
So you want to have the order items listed in the second form like a pre-checkout shopping cart. If you use divs for that, they will not be submitted with the POST data to the server - they will be display-only. So you need to follow Robert's advice and save the 1st form's data to the DB each time an item is added/removed (in addition to his other reasons like not losing a customer's session info). That way the DB will already be up-to-date when they click Confirm Order. Or else you need to hook the Confirm Order button to a JS function that converts the divs back to JSON and posts that to the server to be stored in the DB.
As far as creating the display-only div from the 1st form's data, your send_item_data function needs to loop over all the form's inputs, get their values, and add them to the div however you want them to be displayed. Then you can just insert the div into the second form. Since you are passing "this" to the function, which is the form object itself, you can get the inputs via something like:
var inputs = this.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'submit') continue; //ignore the Submit button
var name = inputs[i].name, value = inputs[i].value;
---use the name and value of this input to construct a span or something to insert inside your div---
}
---now you can insert the div into the 2nd form---
This .php file outputs items from an XML file onscreen and gives the user the chance to click on the add to cart submit button which is displayed after each item. The idea is that the ID, Name etc are further used in a shopping cart system, but I am still in the starting stages of the shopping cart. (This is for an assignment)
But the problem is that this method does not work since when all the iterations are done, irrespective to which button is clicked, the computer will always refer to the values stored in the variables in the last iteration of the for loop.
I want to write some code in order to be able to have a UNIQUE button for each ID, and when this button is pressed, the corresponding information to that item is put through thi: action="add.php"
Any help would deeply be appreciated because I am stuck, and I have no idea
<?php
$doc = new DOMDocument();
$doc->load('menu.xml' );
$Wraps = $doc->getElementsByTagName ("Wraps");
foreach ($Wraps as $w) {
$wrapsid = $w->getElementsByTagName("id")->item(0)->nodeValue;
$wrapsname = $w->getElementsByTagName("Type")->item(0)->nodeValue;
$wrapsprice = $w->getElementsByTagName("Price")->item(0)->nodeValue;
echo "Wraps ID: $wrapsid <br> Wraps Name: $wrapsname <br> Wraps Price: $wrapsprice";
?>
<form action="add.php" method="post">
<td class='view_td' width='10%'><center>
<INPUT TYPE=HIDDEN NAME='ID' value='{$wrapsid}'/>
<input type='submit' value='Add to cart' /></center></td><br>
</form>
<?php
}
?>
you can't put form tags around a TD it has to go around the whole table, either use divs and style it to replicate a table layout using CSS or use GET as you are only passing the ID back to the server eg. use an anchor instead of your input
To identify the submitted form, you can use:
•A hidden input field.
•The name or value of the submit button.
The name of the form is not sent to the server as part of the POST data.
more information
Have a query that should hopefully be nice and simple to answer.
I have a form that will be used to add rows into a database. The default number of rows to show when loading the page is 6. I would like to add the option to add more rows to the form, by changing a field, or clicking a button etc.
I currently use a while loop to print out the form. I simply say:
while($rows > 0) {
echo "FORM INPUTS HERE";
$rows = $rows - 1;
}
So the loop goes through a prints a set of inputs for record 1, and then takes one off the count, then prints a set of inputs for record 2, and so on.
Is there a way I can get the while loop to print more without refreshing the page? The simplest way would be to have a small form at the top of the page, with an extra columns field, and submit button. This would then post the value back to the same page, and add it to the default number of rows.
I would like to do this without having to submit, post or GET anything, but to have it happen then and there.
I think it may be tricky, as the while loop will have already run, and I dont know how to get it to run a second time.
Cheers
Eds
If you need an empty form, use Javascript and add this new form elements to the DOM on the fly! :)
Do you need to load some information on that form?
You can use ajax to make your wish. It doesn't refresh page, but sends out a request to the server asynchronously and fetches the content and appends to the form.
Example, if you have a code this way:
<form method="post">
<ul>
<li><label><strong>Field 1:</strong> <input type="text" /></label></li>
<li><label><strong>Field 2:</strong> <input type="text" /></label></li>
<li><label><strong>Field 3:</strong> <input type="text" /></label></li>
<li><label><strong>Field 4:</strong> <input type="text" /></label></li>
<li><label><strong>Field 5:</strong> <input type="text" /></label></li>
</ul>
</form>
Now using jQuery's $.getScript function, you can fetch a script, which is similar to this:
$("form ul").append('<li><label><strong>Field ' + $currentValue + ':</strong> <input type="text" /></label></li>');
This works out for you.
Thanks for all the suggestions guys.
I decided to just go for a small 1 filed form at the top of my page, where a user enters the number of rows they want to add, and then press the add button.
It should suffice, as the page doesnt NEED to be too fancy, and is much quicker and simpler to implement.
Thanks very much
Eds
So I am a beginner and as the title says I want to be able to; on the click of a button, allow the user to add another input field to my form. I would also like to be able to remove this.
The use of the form is adding students to a student group, which I will then be storing in my database.
my form example:
<form name="addstudents" id="addstudents" method="post" action="add_students.php">
<table><tr><td>Student:</td><td>
<input type='text' name="1" size='20'></td><td><input type="button" id="add" value="+">
</td><td><input type="button" id="remove" value="-"></td>
</table></form>
However from what I have been looking at there are different suggestions such as using a clone() function or Jquery appendto().
which is the best method for doing so?
thanks
$('form').append('<input ...'); //take care of appending valid DOM elements
//Create the input element
var $el = $('<input>')//Set the attribute that you want
.attr('id','inputID')
.attr('readonly',true);
//And append it to the form
$('#addstudents').append($el);
Remember you also can remove any DOM from your form just find the appropiate jquery selector
$('form > input:last').remove(); // to remove last input
check this working sample that a made on jsfiddle.net to help you with this
I would use JavaScript, I already answered this question here. Just uses plain JavaScript to edit the HTML of the page. Hope this helps!