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
– Alaa Al Adnani, Commented Dec 1, 2018 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
– Sonal Borkar, Commented Dec 1, 2018 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
– Alaa Al Adnani, Commented Dec 1, 2018 at 19:06
Please go through this link formget.com/submit-form-using-ajax-php-and-jquery — Sonal Borkar
– Sonal Borkar, Commented Dec 1, 2018 at 19:11

localroot · Accepted Answer · 2018-12-01 19:40:50Z

1

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 :)

answered Dec 1, 2018 at 19:40

localroot

5563 silver badges13 bronze badges

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

Comments

Pavish · Accepted Answer · 2018-12-01 19:31:23Z

0

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

edited Dec 1, 2018 at 19:31

answered Dec 1, 2018 at 18:59

Pavish

1412 silver badges6 bronze badges

4 Comments

Alaa Al Adnani Over a year ago

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.

Pavish Over a year ago

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.

Alaa Al Adnani Over a year ago

Thanks. Worked like a charm.

Pavish Over a year ago

It is highly recommended that you use an encryption mechanism for sending/storing your passwords and also to run your webserver in https.

Collectives™ on Stack Overflow

Run PHP insert function from javascript

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related