How do I pass multiple PHP variables to ajax function onclick

Question

I am trying to send data to one of my function within a controller using ajax but the error at the bottom (in the image) wont let the variables pass.

I'm using the codeigniter framework and this ajax function is in my view.

$(document).ready(function(){

function myButton(id1, id2, id3){
    $.ajax({
      method: "POST",
      url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
      data: {
        id1:id1,
        id2:id2,
        id3:id3
      }
      dataType : 'text',
      success:function(data){
        location.reload();
    });
}
}

<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>

Uncaught ReferenceError: myButton is not defined(…)

echo should end with ` ; ` like this <?php echo base_url(); ?> — Mamdouh Saeed
– Mamdouh Saeed, Commented Oct 26, 2016 at 21:16

PLan · Accepted Answer · 2016-10-27 14:22:40Z

3

Define the function outside of $(document).ready()

Currently, the function isn't being defined until after the dom is loaded, meaning that there is no definition when the button is setup.

This should look like this:

<script>
var myButton = function(id1, id2, id3){
                $.ajax({
                   method: "POST",
                  url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+id2+"/"+id3,
                  data: {
                    id1:id1,
                    id2:id2,
                    id3:id3
                  },
                dataType : 'text',
                  success:function(data){
                    location.reload();
                }
            });
};

    $(document).ready(function(){
//This isn't really needed
});
</script>



<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>

edited Oct 27, 2016 at 14:22

answered Oct 26, 2016 at 20:59

PLan

1337 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PLan Over a year ago

I updated the answer with an example that should work. See if your code matches

learningbyexample Over a year ago

still doesn't work. Gives me the same error Uncaught ReferenceError: myButton is not defined(…)

PLan Over a year ago

Ok, looks like there were still some syntax errors in the js. I fixed the code here and have a pen at codepen.io/planc/pen/JRqobB demonstrating it working properly.

romellem · Accepted Answer · 2016-10-26 21:04:35Z

0

You're declaring myButton within the inner document.ready function. You need to declare it in the global scope.

<script>
// Define in global scope
function myButton(id1, id2, id3){
    $.ajax({
      method: "POST",
      url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
      data: {
        id1:id1,
        id2:id2,
        id3:id3
      }
      dataType : 'text',
      success:function(data){
        location.reload();
    });
}
</script>

<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>

edited Oct 26, 2016 at 21:04

answered Oct 26, 2016 at 21:01

romellem

6,5233 gold badges37 silver badges71 bronze badges

1 Comment

I wrestled a bear once. Over a year ago

there's really no need for the document.ready at all. function definitions don't need to be in them.

Mamdouh Saeed · Accepted Answer · 2016-10-26 21:15:06Z

0

The answer may be one charcter ; so use <?php echo base_url(); ?> this will print invalid Javascript and may be more !!!

$(document).ready(function(){

function myButton(id1, id2, id3){
    $.ajax({
      method: "POST",
      url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+di2+"/"+id3,
      data: {
        id1:id1,
        id2:id2,
        id3:id3
      }
      dataType : 'text',
      success:function(data){
        location.reload();
    });
}
}

<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>

answered Oct 26, 2016 at 21:15

Mamdouh Saeed

2,3251 gold badge12 silver badges11 bronze badges

Collectives™ on Stack Overflow

How do I pass multiple PHP variables to ajax function onclick

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related