Insert data using ajax, json, and php

Question

Intro I am doing an insert into the database using Ajax, PHP, and SQL.

Error: alert(data) says undefined:first_name.....I thought I defined using $first_name = strtoupper($_POST['first_name']) witin the add.php file.

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";
       }
      ?>

thats what i am trying to figure out. my code seems perfect. My error says undefined index: first_name. same thing with last_name, position, and updated. — user9008566
– user9008566, Commented Sep 13, 2018 at 3:58
Can you add print_r($_POST) and show the printed result in add.php — Shibon
– Shibon, Commented Sep 13, 2018 at 4:07
shows array( ) ........... looks like you are on to something though I kind of figured it was firing blank within the $first_name = strtoupper($_POST['first_name']); — user9008566
– user9008566, Commented Sep 13, 2018 at 4:12
i just added in my HTML form as well. slight chance the error is in there? you can .val() an <input> value in HTML I am assuming.. — user9008566
– user9008566, Commented Sep 13, 2018 at 4:16

Subhash Patel · Accepted Answer · 2018-09-13 07:23:18Z

4

it's undefined:first_name given an error because you don't give indexing in form but you use in jquery. show use HTML code like this and check.

<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");?>' >

and debug with your jquery code.

edited Sep 13, 2018 at 7:23

answered Sep 13, 2018 at 6:43

Subhash Patel

6747 silver badges16 bronze badges

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

1 Comment

user9008566 Over a year ago

correct. i have noticed when you capitalize DataType (which makes ajax JSON, the code does not fully work).

Piyush Bansal · Accepted Answer · 2018-09-13 06:52:39Z

2

Here is your piece of code of jQuery:

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

In this you are trying to get value via id of textbox as you mentioned

$("#first_name").val()

Change your code to this :

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(),
            },

Hope it will help you.

answered Sep 13, 2018 at 6:52

Piyush Bansal

1,7334 gold badges17 silver badges39 bronze badges

1 Comment

user9008566 Over a year ago

dont think this works or is the typical way of doing this: programmerblog.net/jquery-ajax-get-example-php-mysql

Collectives™ on Stack Overflow

Insert data using ajax, json, and php

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related