Home>

php - i want to get the data attribute of the text box and the character string in the text box with jquery, and define each val

Assumptions

I am creating a task management application using CakePHP.

I am trying to implement a function to change all task names at once.

Purpose

In jQuery, the character string (task name) in each text box and the data attribute (task id) set in each text box I want to get an associative array with a key and value relationship.

※ Finally, send the acquired data to the server via Ajax communication and pass the value to Model.
I want to apply UPDATE processing by applying values ​​to the following SQL statement.

UPDATE table_name SET name = acquired task name WHERE id = acquired task id;

Applicable source code

The screen for changing the task name is slightly simplified.

<body>
        
            <ul>
                <li>
                    <input type = "text" data-task-id = "10">
                </li>
                <li>
                    <input type = "text" data-task-id = "20">
                </li>
                <li>
                    <input type = "text" data-task-id = "30">
                </li>
            </ul>
        
        <button>PUSH</button>
    </body>
$(function () {
    // Get the data attribute of the list
    $(document) .on ('click', '# submit', function () {
        let tasklist = [];
        $('# tasklist input'). each (function () {
            // Get the data attribute of the input tag
            let id = $(this) .data ('task-id');
            // Get the string of the input tag (in the text box)
            let name = $(this) .val ();
            tasklist [id] = name;
        });
        console.log (tasklist);
    });
});
Problem

In the above source code,Character string entered in text boxandeach set data attribute valueare obtained associative array key, value It is in a ready state.

You can use either key or value, but if key becomes a number,value from 0 to that numberwill be defined as empty.

In the above case, the task-id of the data attribute is set as the key, but the key 0 ~ 9, then 11 ~ 19 etc. will be defined as empty. ↓

* Console display when a, b, c are entered in the text box

(31) [empty × 10, "a", empty × 9, "b", empty × 9, "c"]
10: "a"
20: "b"
30: "c"
length: 31
proto: Array (0)

・ I checked the number of times that it turned around in $.each of jQuery, but it was 3 times.

・ The values ​​of the defined variables "id" and "name" were successfully displayed on the console in $.each.

・ At the bottom of $.each, when the variable tasklist is displayed on the console, it becomes the following.

(11) [empty × 10, "a"]
(21) [empty × 10, "a", empty × 9, "b"]
(31) [empty × 10, "a", empty × 9, "b", empty × 9, "c"]

Environment

windows10
PHP ver7.3.8
CakePHP ver3.8

or more.

php javascript html jquery
  • Answer # 1

    First of all, JavaScript doesn't (strictly) have associative arrays.
    Iftasklist [id] = name;contains a numeric value 10, the name is assigned to the 10th array element. (0-9 are undefined array elements)

    // let tasklist = [];
        let tasklist = {};// object instead of array
        $('# tasklist input'). each (function () {
            // Get the data attribute of the input tag
            let id = $(this) .data ('task-id');
            // Get the string of the input tag (in the text box)
            let name = $(this) .val ();
            tasklist [id] = name;
        });

    or

    let tasklist = [];
        $('# tasklist input'). each (function () {
            // Get the data attribute of the input tag
            let id = $(this) .data ('task-id');
            // Get the string of the input tag (in the text box)
            let name = $(this) .val ();
          // tasklist [id] = name;
            tasklist.push ({'id': id, 'name': name});// make an array of objects
        });

Related articles