sabecs
asked on
JavaScript - document.getElementById vs jQuery
Hi,
I am currently using document.getElementById to pass values to my AddItem function but wondering if I should use jQuery instead.
I would also like to pass data-price to my function AddItem?
Your help would be appreciated.
Thanks
I am currently using document.getElementById to pass values to my AddItem function but wondering if I should use jQuery instead.
I would also like to pass data-price to my function AddItem?
Your help would be appreciated.
Thanks
function AddItem(id, qty, spec1, spec2, specsfound){
alert(" id "+id+" qty "+qty+" spec1 "+spec1+" spec2 "+spec2+" specsfound "+specsfound)
if (!(qty > 0)) {
alert("Sorry this item is currently out of stock.");
exit;
}
var updateURL = "/index.php?id="+id+"&action=add_item&qty="+qty+"&spec1="+spec1+"&spec2="+spec2;
$.ajax({
url: updateURL, success: function(data){
etc
..
.
}
<div class="curvedbox styled-select" >Size</br>
<select class="shop_product" name="spec1_grid3" id="spec1_grid3" style.zindex="-6">
<option value="115" data-price="27.39">115 - $ 27.39</option>
<option value="120" data-price="27.39">120 - $ 27.39</option>
<option value="125" data-price="27.39">125 - $ 27.39</option>
<option value="130" data-price="27.39">130 - $ 27.39</option>
<option value="135" data-price="29.50">135 - $ 29.50</option>
<option value="140" data-price="29.50">140 - $ 29.50</option>
<option value="145" data-price="29.50">145 - $ 29.50</option>
<option value="150" data-price="29.50">150 - $ 29.50</option>
</select>
</div>
<input name="spec2_grid3" type="hidden" id="spec2_grid3" value="">
<div class="addtocart_div">
<input class="button green" name="additem" id="addtocart_grid1096" value="Add to Cart" type="button" onClick="javascript:AddItem('1096',document.getElementById('qty_grid3').value,document.getElementById('spec1_grid3').value,document.getElementById('spec2_grid3').value,'Y')">
</div>
<div class="curvedbox styled-select" >Size</br>
<select class="shop_product" name="spec1_grid4" id="spec1_grid4" style.zindex="-6">
<option value="115" data-price="27.39">115 - $ 27.39</option>
<option value="120" data-price="27.39">120 - $ 27.39</option>
<option value="125" data-price="27.39">125 - $ 27.39</option>
<option value="130" data-price="27.39">130 - $ 27.39</option>
<option value="135" data-price="29.47">135 - $ 29.47</option>
<option value="140" data-price="29.47">140 - $ 29.47</option>
<option value="145" data-price="29.47">145 - $ 29.47</option>
<option value="150" data-price="29.47">150 - $ 29.47</option>
</select>
</div>
<input name="spec2_grid4" type="hidden" id="spec2_grid4" value="">
<div class="addtocart_div">
<input class="button green" name="additem" id="addtocart_grid1098" value="Add to Cart" type="button" onClick="javascript:AddItem('1098',document.getElementById('qty_grid4').value,document.getElementById('spec1_grid4').value,document.getElementById('spec2_grid4').value,'Y')">
</div>
JQuery is a big library that you will have to know how to use ,but it has a lot of features and functions based on javascript that are pre made. So if you are planning on a big project with a lot of code and functions I would suggest you download and use it. But if you are only interested in passing this value you speak of ,well then stick with simple javascript ,this will do. This is also faster for the client end side(not that much though).
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Just to add to the already said above:
jQuery is just an helper library for javascript. This means that it's just javascript anyway.
The great advantage of using jquery is that it unifies the browsers differences performing an action in the correct way based on the browser it's running on.
For instance, the simple $(document).ready(...) has to be implemented in native javascript in different ways across browsers. With jquery you call it the exact same way.
This is true for a lot of other jQuery methods. If you feel curious you can dig into the code. You'll learn a lot of things, I can guarantee you.
So addressing directly your issue and continue with the same idea as above, jQuery selector $('#myobject') directly points to document.getElementById which all browsers support. It's in fact the fastest and native way to query the DOM.
This means that in terms of performance you won't notice any difference between both and as I see you need $.ajax, you probably want to stick with some standard code rules using jquery where no performance is impacted :)
jQuery is just an helper library for javascript. This means that it's just javascript anyway.
The great advantage of using jquery is that it unifies the browsers differences performing an action in the correct way based on the browser it's running on.
For instance, the simple $(document).ready(...) has to be implemented in native javascript in different ways across browsers. With jquery you call it the exact same way.
This is true for a lot of other jQuery methods. If you feel curious you can dig into the code. You'll learn a lot of things, I can guarantee you.
So addressing directly your issue and continue with the same idea as above, jQuery selector $('#myobject') directly points to document.getElementById which all browsers support. It's in fact the fastest and native way to query the DOM.
This means that in terms of performance you won't notice any difference between both and as I see you need $.ajax, you probably want to stick with some standard code rules using jquery where no performance is impacted :)
ASKER
Thanks for your comments, much appreciated.
I am already using jQuery on my website so its already available, leakim971 comments look good but just wondering how to also get value of selected data-price also?
I am already using jQuery on my website so its already available, leakim971 comments look good but just wondering how to also get value of selected data-price also?
Do you mean data-price?
price = $("#selector").data("price ")
else to get the value
price = $("#selector").val()
price = $("#selector").data("price
else to get the value
price = $("#selector").val()
ASKER
Thanks Gary,
I am trying to get the price of the selected option.
For example so how would I get the data-price of spec1_grid3 below if 130 was selected?
I am trying to get the price of the selected option.
For example so how would I get the data-price of spec1_grid3 below if 130 was selected?
<select class="shop_product" name="spec1_grid3" id="spec1_grid3" style.zindex="-6">
<option value="115" data-price="27.39">115 - $ 27.39</option>
<option value="120" data-price="27.39">120 - $ 27.39</option>
<option value="125" data-price="27.39">125 - $ 27.39</option>
<option value="130" data-price="27.39">130 - $ 27.39</option>
<option value="135" data-price="29.50">135 - $ 29.50</option>
<option value="140" data-price="29.50">140 - $ 29.50</option>
<option value="145" data-price="29.50">145 - $ 29.50</option>
<option value="150" data-price="29.50">150 - $ 29.50</option>
</select>
As Above So Below
$("#spec1_grid3").click(function(){ // or whatever your click function is
price = $(this).data("price")
})
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for all your comments and feedback, I am almost there.
Just one last thing I can't work out how to call my function using name instead of class?
I tried
$("#additem").click(functi on(){
but no luck
Just one last thing I can't work out how to call my function using name instead of class?
I tried
$("#additem").click(functi
but no luck
//<input class="button green" name="additem" id="addtocart_grid_4_pid_1098" value="Add to Cart" type="button" >
$(function(){
$(".button").click(function(){
var addtoitem = this.id;
var result = addtoitem.split('pid');
//get Product ID
var pid = result[1].replace(/\D/g,'');
alert("pid "+pid);
//get grid item count
var cnt = result[0].replace(/\D/g,'');
alert("cnt "+cnt);
//get selected Price
var price = $("#spec1_grid"+cnt).find(":selected").data('price');
alert("Price "+price);
//get size selected
var size = $("#spec1_grid"+cnt).find(":selected").val();
alert("size "+size);
//get quantity selected
var qty = $("#qty_grid"+cnt).find(":selected").val();
alert("qty "+qty);
});
});
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
No point adding a compressed 35kb js library just for the sake of that