How to insert data using PHP and Ajax

Question

I want to add data to the Mysql database in this function, but I get a problem:

I just got the data via an Attr and want to send it to the controller and display it to be sure that the data was sent correctly.

I have 2 echoes in my controller and none of them are displayed, although the 2 alerts were displayed on the screen at the beginning. Thank you very much, sorry if my English is not good.

Script:

    <script>
$("body").on("click", "button", function (event) {
    var datavalue = $(this).attr('data-value');
    var dataetape = $(this).attr('data-etape');
    alert(datavalue);
    alert(dataetape);
      
      
      $.ajax({  
    type: 'POST',  
    url: "<?= base_url("fragen/insertdata")?>",
    data: datavalue,dataetape,
        success: function(data){
           $(".datavalue"+datavalue).html(data); 
           $(".dataetape"+dataetape).html(data);
        }
});

});
</script>

Controller:

     public function insertdata(){
     
                $datavalue = $this->input->get('datavalue');
                $dataetape = $this->input->get('dataetape');
              
                echo $datavalue;
                echo $dataetape;

    }

View:

 <form id="myform" action="" method="post">
  <div class="tab-content">
    <div id="frage1" class="container tab-pane active"><br>
      <h3>Frage 1</h3>
      <p>Wie stehst Du zum Ausbau der Fahrrad-Infrastruktur?</p>
      <div class="row"> <div class="col-lg-8"><button data-value="1" data-etape="1"  data-toggle="tab"   href="#frage2"  type="button" class="btn btn-outline-info btn-lg btn-block auswahl">Hier muss investiert werden.</button></div></div>
      <div class="row"><div class="col-lg-8"><button data-toggle="tab"  data-value="2" data-etape="1" onclick="myFunction()" id="sub"  href="#frage2" class="btn btn-outline-info btn-lg btn-block auswahl" >Ich bin für den Ausbau.</button></div></div>
      <div class="row"><div class="col-lg-8"><button data-toggle="tab" data-value="3" data-etape="1" onclick="myFunction()" id="sub" href="#frage2" class="btn btn-outline-info btn-lg btn-block auswahl" >Ich bin für bedarfsorientierten Ausbau.</button></div></div>
      <div class="row"><div class="col-lg-8"><button data-toggle="tab" data-value="4" data-etape="1" onclick="myFunction()" id="sub" href="#frage2" class="btn btn-outline-info btn-lg btn-block auswahl" >Ich bin gegen den Ausbau.</button></div></div>
    </div>

Answer 1

Do the following

1. replace this line url: "", With this url: "",
2. to make sure that you get html as response add the follong line data type: 'html'
3. passing the data in Ajax should be an array
4. make sure that you have insertdata() function inside Fragen class

Code:

$.ajax({  
    type: 'POST',  
    url: "<?= base_url('fragen/insertdata')?>",
    dataType: 'html',
    data: {
             datavalue: datavalue,
             dataetape: datatape
        },
        success: function(data){
           $(".datavalue"+datavalue).html(data); 
           $(".dataetape"+dataetape).html(data);
        }
});