Run PHP insert function from javascript

Question

I have a HTML table with employee name and id that is being retrieved from an SQL select. I want to be able to edit the employee password and update it my DB. The php function is working but I want to run it from an onclick function in javascript. My code is:

function update(id) {
    var pass = document.getElementById('pass'+id).value;
    var Cpass = document.getElementById('Cpass'+id).value;
    if (pass != Cpass){
        Notify("Passwords don't match. Please reneter passwords");
    }
    else{
        //run php function $this->ea_user_settings->update_password(id, pass);
        Notify("Password saved");
        document.getElementById('update'+id).style.display = 'none';
    }
}
function edit(id) {
    if (document.getElementById('update'+id).style.display == 'inline'){
        document.getElementById('update'+id).style.display = 'none';
    }
    else{
        document.getElementById('update'+id).style.display = 'inline';
    }
}

function Notify($msg) {
    $("#notification").text("");
    $("#notification").fadeIn(1000).append($msg);
    $("#notification").fadeOut(5000);
}

<div id="notification" style="display : none" value=""></div>
<?php      
    $invoice = $this->ea_user_settings->get_employee_name_id();
?>
<table class="table table-hover table-bordered table-striped" id = "EmployeeList">
    <thead> 
        <tr>
            <th style="background-color:#BA9E5E; position:sticky; top: 0"><p style="color: white;">Name</p></th>
            <th style="background-color:#BA9E5E; position:sticky; top: 0"><p style="color: white;">ID</p></th> 
            <th style="background-color:#BA9E5E; position:sticky; top: 0"><p style="color: white;">Update Password</p></th>
        </tr>
    </thead>
    <tbody>
        <?php 
        foreach ($invoice as $report): ?>
        <tr>
            <td><?php echo $report->Name ?> </td>
            <td><?php echo $report->ID ?> </td>
            <td>
                <div>
                    <div id="<?php echo 'update'.$report->ID;?>" style="display:none">
                        <input type="text" id="<?php echo 'pass'.$report->ID;?>" name="pass" placeholder="Password"> 
                        <input type="text" id="<?php echo 'Cpass'.$report->ID;?>" name="Cpass" placeholder="Confirm Password"> 
                        <button id='updateBtn' type="button" onClick='update("<?php echo $report->ID;?>")'>Save</button>
                    </div>
                    <div id="<?php echo 'edit'.$report->ID;?>" style="display:inline; text-align:right; padding:10px" align="right">
                        <button id='editBtn' type="button" onClick='edit("<?php echo $report->ID;?>")'>Edit</button>
                    </div>
                </div>
            </td>
        </tr>
        <?php endforeach;?>
    </tbody>
</table>

I want to run my php update function ($this->ea_user_settings->update_password(id, pass);) when I click on the save button.

I am using codeignitor. The php function is the models folders but the model is loaded into this page. The php function ($this->ea_user_settings->update_password(id, pass);) will execute from same file — Alaa Al Adnani, Dec 01 '18 at 18:58
you may need to put the php function ($this->ea_user_settings->update_password(id, pass);) in another php file and call it from javascript using ajax and post the data — Sonal Borkar, Dec 01 '18 at 19:02
update_password function is already in another file models/app_users_model.php. Can you please offer more details on what to do? — Alaa Al Adnani, Dec 01 '18 at 19:06
Please go through this link https://www.formget.com/submit-form-using-ajax-php-and-jquery/ — Sonal Borkar, Dec 01 '18 at 19:11
Possible duplicate of [How can I call PHP functions by JavaScript?](https://stackoverflow.com/questions/15757750/how-can-i-call-php-functions-by-javascript) — random_user_name, Dec 01 '18 at 19:41

score 1 · Answer 1 · answered Dec 01 '18 at 19:40

You need to use ajax for the same.

    $.ajax({
        url: '/change-password.php',
        data: {'user_id':user_id, 'pass': pass, 'new_pass': new_pass},
        type: 'POST',
        success: function (result)
        {
           //Do something
        }
    });

You can refer this sample code :)

Pavish · Answer 2 · 2018-12-01T19:31:23.630

You cannot directly call the PHP function from your JavaScript function. PHP runs on the server whereas JS runs on the client.

You could, however, send a get or post request to your server from a javascript function and execute your php function based on the received parameters.

[update - adding an example]

Consider your php page to contain the following function:

<?php
function writeMsg($param) {
  echo "Hello ".$param;
}

writeMsg($_GET["name"]);
?>

//Here the parameter 'name' is retrieved from the http request and passed to the function.

For eg., if the link is something like //test-php-page?name=stackoverflow, the displayed HTML page will contain Hello stackoverflow

From your client code, you cannot call the function writeMsg. You would have to send a valid http request to the server with the parameter 'name'. It can be achieved just by placing an anchor tag.

<a href="/test-php-page?name=stackoverflow'>link</a>

or, by form action method

<form action="/test-php-page" method="get">
  <input type="text" name="name">
  <input type="submit" value="Submit">
</form>

or, by ajax calls using JS.

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "/test-php-page?name=stackoverflow", true);
xhttp.send();

You could also use jQuery or any other library for ease of using ajax calls.

Refer the following w3schools link for better understanding: https://www.w3schools.com/php/php_ajax_intro.asp

Thanks. I used the form method you suggested and it is working but is there a way to hide the password from the url (....?pass=xxx&Cpass=xxxx&id=xxxx). The password should not be visible to everyone around you. — Alaa Al Adnani, Dec 01 '18 at 20:23
You can use POST instead of GET inorder to do that. In the above example, you can change $_GET to $_POST, and in the ajax call you can specify xhttp.open("POST","/link"). In the form method, just change method="get" into method="post". POST sends the data in HTTP body whereas GET sends it in URL. — Pavish, Dec 01 '18 at 20:24
It is highly recommended that you use an encryption mechanism for sending/storing your passwords and also to run your webserver in https. — Pavish, Dec 01 '18 at 20:30

Run PHP insert function from javascript

2 Answers2