I'm fairly new to php and ran into an issue adapting someone else's program. I am trying to implement a shopping cart style php and javascript program. The shopping cart accepts new entries by POSTing values by way of a submit button including id, quantity, name and price.
<form method="post" style="border:0px solid yellow;" ><fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="1" />
<input type="hidden" name="my-item-name" value="apples" />
<input type="hidden" name="my-item-price" value="2" />
<input type="hidden" name="my-item-qty" value="1" size="3" />
<input id="apples" type="submit" name="my-add-button" class="add" value=" "/>Apples - $2
</fieldset></form>
The cart removes items by way of GET commands through the php file
if($_GET['jcartRemove'] && !$_POST) {
$this->remove_item($_GET['jcartRemove']);
}
This GET command can be triggered through
no more apples
But this will only trigger once. What I want is to have a list of items
apples
oranges
bananas
and when one is selected and added to the cart through the form post method, the other two are automatically removed from the cart. Is there a way to use AJAX to push the jcartRemove function and remove two items by their ID?
Any help would be appreciated on this.
Rather than making multiple AJAX calls, you'd be better off modifying your PHP and allowing the remove function to accept an array instead of just one item. Then you could pass it one or many items to remove all at once.
For example:
if($_GET['jcartRemove'] && !$_POST) {
if (is_array($_GET['jcartRemove'])) {
foreach($_GET['jcartRemove'] as $item) {
$this->remove_item($item);
}
} else {
$this->remove_item($_GET['jcartRemove']);
}
}
Your link would look like this with multiple items:
no more apples or bananas
Because we're checking if jscartRemove is an array, you can still pass it a single item like you always have and it will continue to work as well.
Related
I've looked through some topics but they either have auto-submit where each checkbox is as a separate parameter in the URL or they need submit button. What I am trying to achieve is:
My current HTML form:
<form name="status" id="status" method="get">
<input type="checkbox" name="status[]" value="0" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="1" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="2" onchange="document.getElementById('status').submit()" />
</form>
With this, I have auto-submit whenever a checkbox is checked, but I have an URL like ...&status%5B%5D=0&status%5B%5D=1
What I need is a comma-separated parameter in the URL like &status=0,1 while keeping the auto-submit option. Also, there are some more parameters in the URL, so this must be appended at the end while keeping the rest parameters.
Is this possible? I'm not familiar with javascript but I think there might be a way ...
I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command.
What I want to do is to limit the selection possibilities - as you select one option, others are removed. For instance, if I have three options: Apples, Oranges, Bananas you are only able to select one.
Apples
Oranges
Bananas
If you select Apples, I want to post the value "Apples" whilst using a GET command to remove "Bananas" and "Oranges".
Currently I am doing this to post the values:
<form method="post">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="id" value="Apples" />
<input type="hidden" name="name" value="Apples" />
<input type="hidden" name="color" value="red" />
<input type="hidden" name="shape" value="round" />
<div id="apples" >
<input type="submit" name="my-add-button" class="add" value=" "/>  Apples
</div>
</fieldset>
</form>
And to remove the items I do this:
remove Bananas and Oranges
Is there a way to do both at the same time? I have tried doing an onclick event like this:
<div id="Apples" >
<input type="submit" name="my-add-button" class="add" value=" " onclick="location.href='index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges';" />  Apples
</div>
and I have also tried to use an action at the start of the form
But neither of these work - they will still submit the new item, but will not remove the item. Any idea of a good way to do both together?
Technically, yes, but it's a hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
If the form is set to POST, then any <input> and <textarea> within the form will go as POST data, but any query strings you place into the action's url will show up at the server as GET data:
$_GET['x'] -> 'y'
$_POST['a'] => 'b'
$_POST['x'] => undefined index
But note that clicking a link that's inside a <form> does NOT submit the form. it's like clicking any other link and will just go to the new address.
You can use $_REQUEST. As per the php documentation, quoted as follows:
An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE
As above, you can then use the following hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
EDIT: If both of the GET and POST requests work individually, it is possible that your PHP is where the problem lies - You haven't posted it, so I can't see where the issue could be. You could just put together some javascript to fire the remove request then fire the add request when clicked:
jQuery("input[name|='my-add-button']").click(function() {
var addform = jQuery(this);
event.preventDefault();
$.get("index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges", function(data) {
addform.submit();
});
});
I have seen hundreds of these questions on stackoverflow and none really explain in detail how its done step by step. I am still learning JS but I cannot find anything that shows step by step tutorial style how this is done. There are dozens, upwards of 70 questions asking how to implement this and most have no best answer chosen. So this is a generic form - using PHP $_POST that I would love to get some help with. I want to have this form refresh two divs. Here is my code;
<!-- This <form> for ENTERING measurements and SELECTING picture -->
<form name="log_data" method="post" action="" enctype="multipart/form-data" />
<input type="hidden" name="user_id" value="<?php echo $current_user->ID; ?>"/>
<input type="number" step="any" class="form-control" placeholder="Enter Length" name="length" value="" required="required"/>
<br />
<input type="number" step="any" class="form-control" placeholder="Enter Ground" name="ground" value="" required="required"/>
<br />
<label for="date">Week Of:</label>
<input type="date" name="date" class="form-control" value="" required="required"/>
<br />
<input type="file" name="file" class="form-control" value="" />
<br />
<input type="submit" name="submit" value="submit" class="btn btn-primary"/>
</form>
<?php
$post_id = NULL;
if(!empty($_FILES['file']['name'])) { //new code to fix string error
foreach ($_FILES as $file => $array)
{
$newupload = insert_attachment($file,$post_id);
}
} else { $newupload = '';} //new code to fix string error
if (isset($_POST['submit']))
{
$wpdb->insert(wp_jo_plugin_options, array (
'user_id' => $_POST['user_id'],
'length' => $_POST['length'],
'ground' => $_POST['ground'],
'date' => $_POST['date'],
'file' => $newupload
) );
}
?>
the form needs to update two divs. One named results_chart, and one named data_table. The idea is to do this without a page refresh. I currently use wordpress, and this is for a plugin. Additionally, I use ISSET to post, without a separate file. That may need to change based on what I read about implementing this feature.
The $newupload controls inserting a pictures post-id into a separate table. I am aware of the lack of validation in place, I am not to sure how to implement that so instead I took the JS validation approach.
NetTuts+ has a good tutorial as well:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
$.ajax({
async: false,
type: 'post',
dataType: 'json',
url: '/locationOfYourPHPFunction',
data: $('#form').serializeArray(),
success: function(__data) {
$('#firstDiv').html(__data.firstThing);
$('#secondDiv').html(__data.secondThing);
};
});
You must have your function that that is giving the post data to the AJAX call return json_encode($data); so that the format will be output properly. This assumes you have an associative array with the keys firstThing and secondThing. (e.g. array('first' => '', 'second' => '');).
async tell the AJAX function to not run these in unison, depending on what you're running this can make things not work properly.
.serializeArray() looks for your form that contains the id form and sends that data. Data can be appended to that array by pushing in JSON format: ({country: 'DE', time: '12:00'});
All this can be placed in a js function to be called onclick="" or through a jQuery().click();.
If you are using a framework like CakePHP make sure to place $this->autoRender = false; at the beginning of the function, otherwise you will run into problems.
EDIT: I missed the using wordpress part, all is still relevant but I would highly recommend to stop using wordpress. It's terribly unsecure, poorly structured, bloated and unfriendly for SEO & ones' sanity.
I have multiple classes with different values. The values are generated from MySql. How do I get the value of all the 'VALUEs' i.e 1,2,3,4 in order to post it to my query? Each input has its own button and form. If i click the first button i want it to post 1, then the next button and form will post 2.
<input type="hidden" class="hideID" name="id" value="1">
<input type="hidden" class="hideID" name="id" value="2">
<input type="hidden" class="hideID" name="id" value="3">
<input type="hidden" class="hideID" name="id" value="4">
My jquery code currently only gets the first value (1):
$('.addToCart').click(function(){
var hideID = $('.hideID').val();
alert(hideID);
});
you need a loop for this. $(".hideID") is returning an array with all your elements with the class "hideID". so you need something like this to read all values
$.each($(".hideID"),function(index,element){
console.log($(element).val());
});
This should return all the values of your hidden fields in alert popups but maybe you should give them all different names. name="id" might conflict somewhere down the line.
$('.addToCart').click(function(){
$.each($('.hideID'),function(index,element){
alert($(element).val());
});
});
You can play around with it on jsFiddle.
I am having some trouble with the sorting provided by table-plus feature in hobo. Let's say I have some javascript functions to display different tables:
function showTable1() {
...
}
function showTable2() {
...
}
function showTable3() {
...
}
Event.observer(windows, 'load', showTable1);
and I am using to display the tables. As we can see, Table 1 will be shown by default and every time when I try to sort, let say, Table 2 after displaying it, the page will refresh and then it will automatically switch back to show Table 1.
I am planning to replace the default behavior by a handler:
function showHandler() {
if (case1) showTable1();
else if (case2) showTable2();
else showTable3();
}
Is this possible to implement it by adding cookies to the table-plus behavior? is there any better way to do it?
It's generally easiest if you do everything all server-side or all client-side in a Rails or Hobo app.
So either switch to hobo_data_tables and sort on the client side or do the display toggling server side. To do the latter, you can add forms like this:
<form action="">
<input type="hidden" name="search" value="¶ms[:search]"/>
<input type="hidden" name="sort" value="¶ms[:sort]"/>
<input type="hidden" name="page" value="¶ms[:page]"/>
<input type="hidden" name="table" value="2"/>
<submit label="Show page 2"/>
</form>
Then put if statements around each table:
<if test="¶ms[:table].to_i==2">
<h2> table 2 </h2>
<table-plus .../>
</if>
I also recommend posting to hobo-users -- there's a much more active community there.