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.
Related
I have a page that has two different inputs that contain same ID but each one in different form. and I'm actually setting values to inputs from javascript using get element by ID. I know this is not valid. but the thing is if i change one of the input id's I'm gonna need to re write a bunch of code in 'shopping cart ' cuz these input's pass value to cart. I'm actually not planning to touch that for now. So, is there any trick that can target one input instead of the other even if they have the same id's??
ex:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
thanks in advance!!
Although it is a wrong practice, and you should use different id's, you could add a different class attribute to each one.
<input class="input1" type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
<input class="input2" type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value=""/>
var x = document.getElementsByClassName("input1")[0];
Again: I strongly recommend you to find time to change the logic of your program to use unique id's.
If they are in different forms you can target them by selecting IDs where they are inside a certain class. You can also change the name attribute and select that instead.
HTML
<div class="form1">
<input type="hidden" name="rename1" id="cart_1_ID_Add2" value="">
</div>
<div class="form2">
<input type="hidden" name="rename2" id="cart_1_ID_Add2" value="">
</div>
JS
$(".form1 #cart_1_id_add2")
//Or
$("input[name*='rename1']")
However you shouldn't really have the same id twice on one page otherwise it makes it hard to maintain and debug. If it's not a huge job to change your approach I'd recommend you do that.
Add another attribute to one or both tags.
For example, you can make them
<input type="hidden"name="cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add100" class="myInput" value=""/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" data-id="add101" class="myInput" value=""/>
Then get their values with jQuery
var myInput = $('[data-id=add100]').val();
console.log(myInput);
OR use plain javascript by adding a class and getting the value
var myVal = document.getElementsByClassName("myInput")[0];
console.log(myVal.value);
Hope this helps
Yes.
That code shouldn't have duplicate id properties in Dom btw.
You can use a custom HTML element property:
<input type="hidden" name="cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier"/>
<input type="hidden" name=cart_1_ID_Add2" id="cart_1_ID_Add2" value="" my-property="some_identifier2"/>
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.
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 a group of input boxes that are dynamically built and added to the page. I can control the ID that is placed on the elements but it is wrapped in with a bunch of garbage. For example, I give it an ID of clientTest it will render an id of j_id0:j_id2:theForm:clientTest_mod. There is a total of 7 input boxes that contain this Id but contain different endings. The first part of the ID is also dynamic so I can not hard code anything in.
An example,
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lkid" id="j_id0:j_id2:theForm:clientTest_lkid" value="000000000000000">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lkold" id="j_id0:j_id2:theForm:clientTest_lkold" value="null">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lktp" id="j_id0:j_id2:theForm:clientTest_lktp" value="001">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lspf" id="j_id0:j_id2:theForm:clientTest_lspf" value="0">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_lspfsub" id="j_id0:j_id2:theForm:clientTest_lspfsub" value="0">
<input type="hidden" name="j_id0:j_id2:theForm:clientTest_mod" id="j_id0:j_id2:theForm:clientTest_mod" value="0">
How can I search through and find the input boxes that I want to target?
extending #Michael Chaney
// select the collection
var inputs = $("input[id*='theForm']");
// loop through each element.
$("input[id*='theForm']").each(function(ind, ele){
$("#textPlace").append("<li>"+ $(ele).attr("id")+"</li>");
});
http://jsfiddle.net/1zsj0zcc/1/
Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.
You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});
For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?