Turn on Javascript in jQuery

Question

I have a code that includes a click on a button, and either you are logged in and you go to the next page, or you are logged out and you get a warning. I never liked onClick inside HTML, so I would like to do this by clicking on id and getting jQuery my magic.

I understand the jQuery click function, but I don’t know how to put do_bid(".$val["id"]."); down with the rest of javascript. If I did not give enough information or if there is an official resource for this, let me know.

 <li class='btn bid' onclick='do_bid(".$val["id"].");'> Bid </li> <script> //Some other Javascript above this function do_bid(aid) { var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>"; if(loged_in=="") { alert('You must log in to bid!'); } else { document.location.href="item.php?id="+aid; } } </script> 

UPDATE:. This is all Javascript code. I think none of the answers have worked so far because the answers do not match the rest of my Javascript. Hope this helps

 <script language="JavaScript"> $(document).ready(function(){ function calcage(secs, num1, num2) { s = ((Math.floor(secs/num1))%num2).toString(); if (LeadingZero && s.length < 2) s = "0" + s; return "" + s + ""; } function CountBack() { <? for($i=0; $i<$total_elements; $i++){ echo "myTimeArray[".$i."] = myTimeArray[".$i."] + CountStepper;"; } for($i=0; $i<$total_elements; $i++){ echo "secs = myTimeArray[".$i."];"; echo "DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,1000000));"; echo "DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));"; echo "DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));"; echo "DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));"; echo "if(secs < 0){ if(document.getElementById('el_type_".$i."').value == '1'){ document.getElementById('el_".$i."').innerHTML = FinishMessage1; }else{ document.getElementById('el_".$i."').innerHTML = FinishMessage2;"; echo " }"; echo "}else{"; echo " document.getElementById('el_".$i."').innerHTML = DisplayStr;"; echo "}"; } ?> if (CountActive) setTimeout("CountBack()", SetTimeOutPeriod); } function putspan(backcolor, forecolor, id) { document.write("<span id='"+ id +"' style='background-color:" + backcolor + "; color:" + forecolor + "'></span>"); } if (typeof(BackColor)=="undefined") BackColor = "white"; if (typeof(ForeColor)=="undefined") ForeColor= "black"; if (typeof(TargetDate)=="undefined") TargetDate = "12/31/2020 5:00 AM"; if (typeof(DisplayFormat)=="undefined") DisplayFormat = "%%D%%d, %%H%%h, %%M%%m, %%S%%s."; if (typeof(CountActive)=="undefined") CountActive = true; if (typeof(FinishMessage)=="undefined") FinishMessage = ""; if (typeof(CountStepper)!="number") CountStepper = -1; if (typeof(LeadingZero)=="undefined") LeadingZero = true; CountStepper = Math.ceil(CountStepper); if (CountStepper == 0) CountActive = false; var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; var myTimeArray = new Array(); <? for($i=0; $i<$total_elements; $i++){?> ddiff=document.getElementById('el_sec_'+<?=$i;?>).value; myTimeArray[<?=$i;?>]=Number(ddiff); <? } ?> CountBack(); function do_bid(aid) { var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>"; if(loged_in=="") { alert('You must log in to bid!'); } else { document.location.href="item.php?id="+aid; } } }</script> 

Answer 1

If you want to connect click event handler using jQuery. You need to first include the jQuery library on your page, and then try the code below.

An element must not have two class attributes. Move both btn and bid classes to the same class attribute.

Change the layout. Here, I pass the session variable to the data attribute, which will be used later inside the click event handler using the jQuery data method.

PHP / HTML:

 echo "<li class='btn bid' data-bid='".$val["id"]."'>Bid</li>"; 

JS:

 $('.btn.bid').click(function(){ do_bid($(this).data('bid')); }); 

If you do not want to use the data attribute and visualize the identifier in the JS variable, you can use the code below.

 var loged_in = "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>"; $('.btn.bid').click(function(){ if(!loged_in){ alert('You must log in to bid!'); } else{ do_bid(loged_in); } }); 

Answer 2

First you need to make <li> data you need to send, which I would recommend using data attributes. For instance:

 echo "<li class=\"btn bid\" data-bid=\"{$val['id']}\">Bid</li>"; 

Then you need to snap the click and call the javascript do_bid method, which can be executed using:

 function do_bid(bid){ //bid code } $(function(){ // when you click on the LI $('li.btn.bid').click(function(){ // grab the ID we're bidding on var bid = $(this).data('bid'); // then call the function with the parameter window.do_bid(bid); }); }); 

Answer 3

I would add the id value that you are trying to add as a data attribute:

Sort of:

 <li class='btn' class='bid' data-id='.$val["id"].'> 

Then bind the event as follows:

 $('.bid').click(function(){ var dataId = $(this).attr('data-id'); doBid(dataId); }); 

Answer 4

Assuming you have several of these buttons, you can use the data attribute to store the identifier:

 <li class='btn' class='bid' data-id='<?php echo $val["id"]; ?>'> 

JQuery

 var clicked_id = $(this).data('id'); // assuming this is the element that is clicked on 

Answer 5

You can save the identifier in the data- attribute, then use the jQuery .click method.

 <li class='btn' class='bid' data-id='".$val["id"]."'> Bid </li> <script> $(document).ready(function(){ $("li.bid").click(function(){ if ("" === "<?= $_SESSION["BPLowbidAuction_LOGGED_IN"] ?>") { alert('You must log in to bid!'); } else { document.location.href="item.php?id=" + $(this).data("id"); } }); }); </script> 

Answer 6

If you are still looking for an answer to this question, I will put a workaround. If data does not work for you, try html id .

A working example is given here: http://jsfiddle.net/aVLk9/