Use Ajax to Update database with Select option instead of form with button

Question

I would like to use ajax to the select option and save the data in the db, instead of using a select in a form with a button. This because I have one select for each row and every time I change the selected value and click the button to send the value to the DB the page get reloaded and scrolls on the top.

<select class='form-control col-sm-10' id='status' name='status' >
            <option value='new' ". ($data['status'] == 'new'? 'selected ': '') .">New</option>
            <option value='progress' ". ($data['status'] == 'progress'? 'selected ': '') .">Progress</option>
            <option  value='wait' ". ($data['status'] == 'wait'? 'selected ': '') .">Wait</option>
            <option  value='deler_bestilt' ". ($data['status'] == 'deler_bestilt'? 'selected ': '') .">Deler bestilt</option>
            <option  value='deler_trenger' ". ($data['status'] == 'deler_trenger'? 'selected ': '') .">Deler trenger</option>
            <option value='done' ". ($data['status'] == 'done'? 'selected ': '') .">Izettle betalt</option>
            <option value='close' ". ($data['status'] == 'close'? 'selected ': '') .">Online betalt</option>
            <option value='cancel' ". ($data['status'] == 'cancel'? 'selected ': '') .">Cancel</option>

 <td> <button type='submit' class='btn btn-primary btn-sm'name='update'>Update</button></td>

if (isset($_POST['update'])) {$results = $link->query("UPDATE job SET status='$_POST[status]' WHERE id='$_POST[hidden]'");}

Bit unclear. Do you want to load options from ajax? I am right? — Daman Mokha, Jul 19 '19 at 13:41
You can make `$('#status').on('change', function(){ //your ajax })` and save data like this it will not refresh page, thats what you want? — Oleksandr Pobuta, Jul 19 '19 at 13:42
Sorry I try to update my question now. I want to stop to use the button after i change the value of the select option. I want to use ajax. So I would like to change the option and save it to the database without reloading the page. — Dho, Jul 19 '19 at 13:53
@Oleksandr Pobuta you are right. I dont get how to code it with ajax — Dho, Jul 19 '19 at 13:54
@jameson2012 , yes think was clear i want to use AJAX from the title? — Dho, Jul 23 '19 at 08:55
@Dho - my point is that you don't have an Ajax script with an issue, you haven't tried anything, you just want someone to write out your code for you. — imposterSyndrome, Jul 23 '19 at 10:19
@jameson2012 , If I knew how to do it in AJAX I would not be here asking. I am not looking for the code, but for tips. There might be a better solution than AJAX which I am unaware. A dummy example or some tips where to look will be good to point me in the right direction. Do you have any suggestion? — Dho, Jul 23 '19 at 10:55

score 1 · Answer 1 · answered Jul 19 '19 at 14:03

I am making one dummy example you can take help from here. You can implement like this:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<form method="POST" id="form_data">
    <input type ="hidden" name="id" value="1">
    <select class='form-control col-sm-10 ' id='status' name='status' >
    <option value='new' ". ($data['status'] == 'new'? 'selected ': '') .">New</option>
    <option value='progress' ". ($data['status'] == 'progress'? 'selected ': '') .">Progress</option>
    <option  value='wait' ". ($data['status'] == 'wait'? 'selected ': '') .">Wait</option>
    <option  value='deler_bestilt' ". ($data['status'] == 'deler_bestilt'? 'selected ': '') .">Deler bestilt</option>
    <option  value='deler_trenger' ". ($data['status'] == 'deler_trenger'? 'selected ': '') .">Deler trenger</option>
    <option value='done' ". ($data['status'] == 'done'? 'selected ': '') .">Izettle betalt</option>
    <option value='close' ". ($data['status'] == 'close'? 'selected ': '') .">Online betalt</option>
    <option value='cancel' ". ($data['status'] == 'cancel'? 'selected ': '') .">Cancel</option>
</form>

<script>
$(document).on('change','select',function(){
   let form_data =  $('#form_data').serialize();
   $.ajax({
        url: 'getdata.php',
        data: form_data,
        type: 'POST',
        success: function(respose) {
            console.log(respose);
            }
        });
})
</script>

Then make getdata.php file and you can check the form data by using :

<?php print_r($_POST); ?>

I think this is helpful for you in you don't know how we can use ajax using onchange

Oleksandr Pobuta · Accepted Answer · 2019-07-24T11:24:30.833

0

So if you want to send it instantly with ajax after you changed value

$('#status').on('change', function(){ 
    var value = $(this).val();
    var id = $(this).data('id');
    $.ajax({
        type: 'POST',
        url: 'somepage.php', // this is your target page where post will go
        data: {update:value, hidden:id},
        success: function (response) {
            console.log(response); // here you can get response
        }

    });


})

Edit: Change select like this (script is also changed)

<select class='form-control col-sm-10' id='status' name='status' data-id='"$row['id']"' >

edited Jul 24 '19 at 11:24

answered Jul 19 '19 at 14:02

Oleksandr Pobuta

407
5
11

Thank you, this point me in the right direction. Do I have to make an external page with `$results = $link->query("UPDATE job SET assigned='$_POST[assigned]' WHERE id='$_POST[hidden]'");. ` Else I dont get how can this send the modification to the database – Dho Jul 23 '19 at 13:58
@Dho Yes make some external page for ajax request in this case you can expect proper response in `success` function `somepage.php` You can check result of ajax request in `console.log(response);` just open browser console window – Oleksandr Pobuta Jul 23 '19 at 14:11
I have made a page containing the query , I have given ID and NAME to the SELECT OPTION -> "status", and I have placed your code in the page, but cant make it work. Simply nothing happen. Added pic of my code. What I cant understand is: i dont want to click a button to send data to the db, I want simply the choice of the select to get send to the db if I change value. – Dho Jul 24 '19 at 10:58
https://stackoverflow.com/questions/5024056/how-to-pass-parameters-on-onchange-of-html-select -> this might help? – Dho Jul 24 '19 at 11:04
@Dho what is assigned value in the post? – Oleksandr Pobuta Jul 24 '19 at 11:23
assigned is just another ID I have given to another SELECT OPTION which is in the same table. Table has 2 dropdown. – Dho Jul 24 '19 at 12:05
@Dho then you mb need to send whole form? use Vanda's answer – Oleksandr Pobuta Jul 24 '19 at 12:08
I was able to ake it work - > see pict 3-4-5. the only thing is that the color of the row still changes ONLY after i refresh the page. But the DB is updated with AJAX in Async way. That is a big step for me. – Dho Jul 24 '19 at 13:01
@Dho `success: function (response) { // change status class here }` this will help to solve last problem :) – Oleksandr Pobuta Jul 24 '19 at 13:36
I am under testing. have some trouble so i just wanted to finish the tests. will anyway accept it. – Dho Jul 26 '19 at 10:30
I cant get it work because PHP is running server side and in order to update the color i must reload the page. Maybe something with json can help but I am not an expert. By the was I consider your answer a good help since this is another problem. Thank you. If you might have suggestion to fix this color issue please share. – Dho Jul 26 '19 at 12:29

Use Ajax to Update database with Select option instead of form with button

2 Answers2