Solved

JavaScript - document.getElementById vs jQuery

Posted on 2014-12-13
11
253 Views
Last Modified: 2014-12-15
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

		
		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>

Open in new window

0
Comment
Question by:sabecs
11 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40498548
Unless you have a need for the all the other stuff jQuery can do then stick with document.getElementById
No point adding a compressed 35kb js library just for the sake of that
0
 
LVL 10

Expert Comment

by:aboo_s
ID: 40498552
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).
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 200 total points
ID: 40498779
replace :
<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')">

Open in new window

by :
<input class="button green" name="additem" id="addtocart_grid1096" value="Add to Cart" type="button" />

Open in new window


and replace :
function AddItem(id, qty, spec1, spec2, specsfound){
	 
		alert(" id "+id+" qty "+qty+" spec1 "+spec1+" spec2 "+spec2+" specsfound "+specsfound)

Open in new window

by :
$(document).on("click", "button[name=additem]", function() {
      var id = $(this).attr("id").replace(/\D/g, "");
     AddItem(id, $("#qty_grid3").val(),  $("#spec1_grid3").val(), $("#spec2_grid3").val(), 'Y'); // yes we jQuery instead document.getElementById
});

function AddItem(id, qty, spec1, spec2, specsfound){
			
		alert(" id "+id+" qty "+qty+" spec1 "+spec1+" spec2 "+spec2+" specsfound "+specsfound)

Open in new window

0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40498799
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 :)
0
 

Author Comment

by:sabecs
ID: 40498957
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?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 58

Expert Comment

by:Gary
ID: 40498960
Do you mean data-price?

    price = $("#selector").data("price")

else to get the value

    price = $("#selector").val()
0
 

Author Comment

by:sabecs
ID: 40499496
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?


<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>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40499502
As Above So Below

$("#spec1_grid3").click(function(){ // or whatever your click function is
    price = $(this).data("price")
})

Open in new window

0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 150 total points
ID: 40500385
You can't grab the data attributes from $(this) because that's the <SELECT> and it has no data attributes. What you need to do is 'find' the selected option within the SELECT and read the data attribute from that:

price = $("#spec1_grid3").find(":selected").data('price');

Open in new window

0
 

Author Comment

by:sabecs
ID: 40501296
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(function(){
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);
		  
		  });

		});

Open in new window

0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 150 total points
ID: 40501304
$("[name=additem]").click(function(){ 

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now