get variable with js and send them by ajax

Question

get variable with js and send them by ajax

Navigation

#1 by (2 votes)

0

I have some links that I create from a database; I go through all the registers and the samples. Now I need to send the id of recurso of which the button is being pressed, through AJAX to know with what recurso I am working.

<div id="Crecursos">
  <?php
    require('connect.php');
    foreach ($mysqli->query('SELECT * FROM recurso') as $fila) {
     <div>
       <a href='#' class='delete'>Eliminar</a>
       <a href='#' class='edit'>Editar</a>
       <input type='text' class='delete' value='".$fila['id']."'>
     </div>
    }
  ?>
</div>

This is the AJAX code but it only sends me the last id shown in the previous code.

  $(document).ready(function(){
    $("#Crecursos").on('click','.delete',function(){
      var id=document.getElementsByClassName('delete').value;
      $.ajax({
        type: "GET",
        url: "inc/deleteResource.php",
        data: { id:id },
        success: function(data) {
          $('#resultado').html(data);
        }
      });
    });
  });

A small outline of what I need, if for example by pressing a button (ED / BO) of the box ID1 ; the id should be sent (in this case 1) through AJAX. However, pressing a button in any box always sends me the last id of my records. --------- ---------
| ID1 | | ID2 |
|ED BO| |ED BO|
--------- ---------

mysql javascript html php ajax

asked by Johan Solano Contreras 07.12.2018 в 02:56

source

1 answer

Error inserting background image in a form of windows form A URL for the entire site

score 2 · Accepted Answer

Try to create a function that gets all those values in an array and invoke it in the ajax call:

function getValues(){
    var values = [];
    var inputs = $('input.delete');
    $.each(inputs,function(){
        values.push($(this).val());
    });
    return values;
}

and on your ajax call:

data: { id:getValues() },

Then you collect the values and you already work with them as you wish.

I'll give you the example of the function here so you can see it "in situ":

function getValues(){
    var values = [];
    var inputs = $('input.delete');
    $.each(inputs,function(){
        values.push($(this).val());
    });
    return values;
}


var a = getValues();
$('#resultado').text(a);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="delete" value="123">
<input class="delete" value="124">
<input class="delete" value="hola">
<input class="delete" value="">
<input class="delete" value="-2">

<br>
<br>
<div>Tus valores: <span id="resultado"></span></div>

UPDATE

If you want to just delete the id of the button that you press:

$('a.delete').click(function(){
    var valor = $(this).siblings('input').val();
    $.ajax({
       type: "GET",
       url: "inc/deleteResource.php",
       data: { id:valor},
       success: function(data) {
         $('#resultado').html(data);
       }
    });
});

With siblings you target only the siblings and with the "input" selector only those that are inputs. I've done this because of the way you've written your code. However, I would change the class of the link and put another that was not the same as your inputs (delete). If you "order" the code a little better, you can use only a single ajax function that manages everything (deleting one or all the elements).

Keep in mind that this is only to answer your question. But now you have to take into account one thing and that is that in the previous ajax call (send all the ids) the values are an array that contains all the id's. With this last code, the value is not an array of an element but is directly a value (numeric, string, etc ...). It is also another reason for you to take into account the previous paragraph and "reorders" all your code a little bit.

One idea is to do the following:

A function that picks up all the ids or just a single id: for example something like:

function getValues (id):

function getValues(id){
    if(id){
       //que te devuelva solo el id que le pasas
    }
    else{
       //que te devuelva todos.
    }
}

in the html and events click:

to the links you put a class type "delete-id" that invokes the function getValues (id) passing as a parameter the id to be deleted.
with the button or buttons that you want to collect all id's, you (s) put another class type "delete" or "delete-all" and invoke the same function but without passing any parameter. This will return all the id.
In your "getValues" function, be one or all of the id's, that always return them to you as an array. If it's just an id that you want to return, then return an array of an element (the id you want, in this case).

In your "deleteResource.php" file you will always wait for an array of n values (one or all). And from there you work as you want.

Greetings!