Not sending data into controller with onclick function

Question

I use this button in jason.

<button id="bid" type="button" class="button" onclick="connect()">Save</button>

It show altert when I use alert after document.getElementById. But it not works in ajax function. Here is my connect function

 function connect()
 {    
    var BID = document.getElementById('BID').value;
    var REF = document.getElementById('ref_po').value;
    var POU = document.getElementById('po_units').value;
    //**alert(BID + REF + POU);**
    var url ='<?php echo base_url()."index.php/main/transacIn/"  ?>';
    $.ajax({
    type: "POST",
    url: url,
    data: 'BID='+BID +'&REF='+REF +'&POU='+POU,
    success: function(data) { 
        //$("#bid").hide();
        alert(BID);
        }
    });

}

alert(BID + REF + POU); this alert works but not works alert in success. And it don't sent any data into controller. Help me about it. Thanks in advance.

Answer 1

Try this solution.
It will work.

$.post(url , {BID: BID, REF: REF, POU:POU },
    function(data){
    alert(BID);
    });

Answer 2

You cannot inject the php syntax into javascript file. Either you define the script in codeigniter template file as

<script type="text/javascript">
// Your javascript function
</script>

...or you can define a javascript variable in the template file which actually get the path to your controller:

var url = <?php echo base_url()."index.php/main/transacIn/"  ?>';

Then on your javascript file on ajax post you are pointing to the variable defined in the template file:

$.ajax({
    type: "POST",
    url: url,
    data: 'BID='+BID +'&REF='+REF +'&POU='+POU,
    success: function(data) { 
        //$("#bid").hide();
        alert(BID);
        }
    });

Hope you got the idea.

Anyway you need to be careful defining global variables. It's a good practice to guard the variables by using namespaces.

Answer 3

try this

function connect()
 {      
  var BID = document.getElementById('BID').value;
  var REF = document.getElementById('ref_po').value;
  var POU = document.getElementById('po_units').value;
  var site_url = document.getElementById('site_url').value;

  var url = site_url+'main/transacIn';
  $.ajax({
   type: "POST",
   url: url,
   data: {
            BID : BID ,
            REF: REF,
            POU:POU

        },
   success: function(data) { 
    //$("#bid").hide();
    alert(BID);
    },
   error: function(err) { 
    console.log(err);
    }
  });

}

you should a hidden field in your corresponding page <input id="site_url" type="hidden" value="<?php echo site_url(); ?>"/>