Page 1 of 1

How do you perform two functions onclick?

Posted: Sat Aug 30, 2014 3:50 pm
by simonmlewis
On one click of a type=button, I want to run two functions.
Both work independently:
1) darkens screens and opens a box
2) GETs via Ajax query and submits to db.

So when they click, all customer sees is screen darken. But it sends data.

Here is how I thought it would work

Code: Select all

<div id="light" class="white_content">
<div class='white_content_head'>
<div class='head' style='margin-top: 0px; padding: 10px'>Sample Added</div>
</div>
<div id="light" class="white_content_inner">
This Sample has been added to your cart.<br/><br/><br/>

<table align='center'><tr><td style='padding-right: 15px'><a href='/cart/' class='btn_cart_popup_black'>Place Order</a></td><td>
<a href="javascript:void(0)" onclick ="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class='btn_cart_popup_blue'>Continue Shopping</a></td></tr></table>

</div></div>
		<div id="fade" class="black_overlay"></div>

<script>
function ajaxcart()
{
function precheck(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax_sendtofriend.php?q="+str,true);
xmlhttp.send();
}
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
}
</script>

<form>
<input type='button' name='prodid' value='477' onclick="ajaxcart(this.value)">
</form>
Sadly it performs neither functions.

Where am I going wrong please?

Re: How do you perform two functions onclick?

Posted: Sat Aug 30, 2014 4:07 pm
by simonmlewis
Cracked it.

Code: Select all

<div id="light" class="white_content">
<div class='white_content_head'>
<div class='head' style='margin-top: 0px; padding: 10px'>Sample Added</div>
</div>
<div id="light" class="white_content_inner">
This Sample has been added to your cart.<br/><br/><br/>

<table align='center'><tr><td style='padding-right: 15px'><a href='/cart/' class='btn_cart_popup_black'>Place Order</a></td><td>
<a href="javascript:void(0)" onclick ="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class='btn_cart_popup_blue'>Continue Shopping</a></td></tr></table>

</div></div>
		<div id="fade" class="black_overlay"></div>

<script>
function toggle_visibility(id) {
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}
</script>

<script> 
function precheck(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax_sendtofriend.php?q="+str,true);
xmlhttp.send();
}
</script>

<form>
<input type='hidden' name='prodid' value='477'>
<input type='button' value='Request Sample' onclick="precheck(prodid.value); document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

</form>

Re: How do you perform two functions onclick?

Posted: Sat Aug 30, 2014 4:10 pm
by Celauran
Something along these lines inside your document ready block should do what you're looking for.

Code: Select all

$('input[type=button]').click(function(e) {
	e.preventDefault(); // So the button doesn't submit the form
	var button_val = $(this).val();
	$('#fade').show();
	$.ajax({
		url: '/ajax_sendtofriend.php?q=' + button_val
	}).done(function(data) {
		// Do something with response data
	});
});
EDIT: Note this won't quite work with the second bit of code you posted; you'd need to get button_val from the sibling hidden element instead.

Re: How do you perform two functions onclick?

Posted: Sat Aug 30, 2014 4:21 pm
by simonmlewis
Thanks for that.
I've totally cracked it. The other thread I had following this whole "solution" is now sorted.
It works on all pages I put it on, can use it from a hyperlink or an image via onclick. Perfecto.