Вставьте данные, используя ajax, json и php

Question

Intro Я делаю вставку в базу данных, используя Ajax, PHP и SQL.

Ошибка: alert(data) говорит неопределенное: first_name ..... Я думал, что определил, используя $first_name = strtoupper($_POST['first_name']) в файле add.php.

Index.php

<script type="text/javascript"> 
    $(document).on('click','#update_btn',function (){
     $.ajax({
            type:'POST',
            url:'add.php',
             datatype: "json",
            data: {
                first_name: $("#first_name").val(),
                last_name: $("#last_name").val(),
                position: $("#position").val(),
                updated: $("#updated").val(),
            }, 
            success: function(data){ 
                alert(data);
                if (data=='ADD_OK') {
                  location.reload();
                } else {
                     alert('something wrong');
                }
                  }
             })
        });

<form id="form1" class="form-inline" method="post" action="">
<input type="text" name="first_name" placeholder="First Name" required>
<input type="text" name="last_name" placeholder="Last Name" required>
<select name="position" id="multiple-select-optgroup-default2" class="custom-select"> 
<option selected>Admin</option>
<option value="Teacher">Teacher</option required>
<option value="Staff">Staff</option>
</select>
<input type="hidden" name="updated" value='<?php echo date("Y-m-d");?>' >
<button class="btn btn-success btn-sm active" type="submit" name="save" id="update_btn"><span class="glyphicon glyphicon-plus-sign"></span> Save</button>
</form>  
</script>

Add.php

 <?php
    $first_name = strtoupper($_POST['first_name']);
    $last_name = strtoupper($_POST['last_name']);
    $position = strtoupper($_POST['position']);
    $updated = $_POST['updated'];  
       $stmt = $conn->prepare("INSERT INTO employees (first_name, last_name, position, updated) VALUES (?, ?, ?, ?)");
       $stmt->bind_param('ssss', $first_name, $last_name, $position, $updated);
       $add = $stmt->execute();

       if($add) {
          echo "ADD_OK";
       }
      ?>

Answer 1

Вот ваш кусок кода jQuery:

data: {
                first_name: $("#first_name").val(),
                last_name: $("#last_name").val(),
                position: $("#position").val(),
                updated: $("#updated").val(),
            }, 

В этом вы пытаетесь получить значение через идентификатор текстового поля, как вы упомянули

$ ( "# first_name"). Вал ()

Измените свой код на это:

data: {
                first_name: $('input[name="first_name"]').val(),
                last_name: $('input[name="last_name"]').val(),
                position: $('input[name="position"]').val(),
                updated: $('input[name="updated"]').val(),
            }, 

Надеюсь, это поможет вам.

Answer 2

это не определено: first_name выдает ошибку, потому что вы не даете индексирование в форме, а используете в jquery.покажите, используйте HTML-код, подобный этому, и проверьте.

<input type="text" name="first_name" id="first_name" placeholder="First Name" required>
<input type="text" name="last_name" id="last_name" placeholder="Last Name" required>
<select name="position" id="position" class="custom-select"> 
<option selected>Admin</option>
<option value="Teacher">Teacher</option required>
<option value="Staff">Staff</option>
</select>
<input type="hidden" name="updated" id="updated" value='<?php echo date("Y-m-d");?>' >

и отладьте его с помощью кода jquery.