Yii2: call javascript function with a button

Question

I want to call a javascript function from a button in php

this is the php code:

//the view
    <?php

    $form = yii\widgets\ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); 

    ?>

 <?=

$form->field($msubs, 'id_subespecifica', ['options' => ['class' => 'col-md-12']])
  ->widget(Select2::classname(),[
        'data' => ArrayHelper::map($vectorConsul,'sesp', 'sesp'),
        'options' => ['id' => 'prueba'],
        ])

  ->label(false);


 ?>


    <button class="btn btn-primary" onclick="myFunction()">Add New</button>


<?php
yii\widgets\ActiveForm::end(); 
?>

And this is the Javascript code:

//Javascript
function myFunction() {
$.ajax({
  url:'partidaasociada/get-linea',
  type:'POST',
  dataType:'json',
  data:{pruebaId:$('#prueba').val()}
  // alert(pruebaId);
});

In the javascript function, i need to send the $('#prueba').val() to a php function in the controller:

//Controller
public function actionGetLinea($pruebaId)
{
    $model = new PartidaAsociada();
    log($pruebaId);
}

But i am getting some errors, i think the button is reloading the whole form and don't recognize the previous data y sent to the form.

Note: The 'alert()' in the javascript function is on commentary because it wont let me use, the form stay loading when i put the alert. thanks beforehand.

In the console of google chrome it says that myFunction is not defined as well. — LuisRox
– LuisRox, Commented Mar 6, 2015 at 15:01

Matt · Accepted Answer · 2015-03-06 15:12:46Z

4

I think part of the problem is you aren't preventing the default action of a button click.

We can clean things up a bit too. Hit control+shift+i and choose the console tab to see console.log output.

HTML:

<button class="btn btn-primary _addNew">Add New</button>

Javascript:

$('._addNew').on('click', function(event){
    event.preventDefault();
    var data = {};
    data.pruebaId = $('#prueba').val();

    var success = function(data){
       console.log("Success!", data);
    }
    var error = function(data){
       console.log("Error!", data);
    }
    $.ajax({
      url:'partidaasociada/get-linea',
      type:'POST',
      dataType:'json',
      data:data
   }, success, error);
});

answered Mar 6, 2015 at 15:12

Matt

5,4381 gold badge34 silver badges59 bronze badges

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

3 Comments

LuisRox Over a year ago

Thanks, it now don't reload the form when i press the button, but i think is not sending the value "pruebaId" the correct way, in the console it says Bad Request (#400): missing required parameters: pruebaId

Matt Over a year ago

You could switch the data line back to what you had: data:{pruebaId:$('#prueba').val()} I don't immediately see the difference. What do you want it to do on a successful call? Normally, when you make an ajax request, you would execute certain code after receiving a success or error. It almost seems like you want to post and refresh the entire page which means you wouldn't need to use ajax.

LuisRox Over a year ago

It now works!!! thx so much! i only have to change the way i receive the data in the php function, now i receive it with $_POST thank you so much!!

Collectives™ on Stack Overflow

Yii2: call javascript function with a button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related