How To Insert Password And Confirm Password Using Ajax In Laravel

admin_img Posted By Bajarangi soft , Posted On 23-01-2021

Using Ajax is another way to insert Passsword with Json request in Laravel.

How To Insert Password And Confirm Password Using Ajax In Laravel

Step 1:Create a table and model for inserting Password.
 

class Password extends Model
{
    public $table = 'password';

    protected $fillable = [
        'name','password','confirm_password'
    ];
}

 


Step: 2  Create a View file like blog.blade.php and modal for inserting Password and make ajax code for inserting Password.
resources/views/welcome.blade.php.
 

<html>
  <head>
   <title>Laravel </title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
  </head>
  <style type="text/css">
    .panel-heading {
    padding: 25px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
  </style>
<body><br>
<div id="alert" class="alert-success new-window" data-message="my message">
        </div>
<div class="container">
<div class="panel panel-primary">
 <div class="panel-heading">Products
 <button id="btn_add" name="btn_add" class="btn btn-default pull-right">Add New Product</button>
    </div>
      <div class="panel-body"> 
       <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>          
            <th>Actions</th>
          </tr>   
         </thead>
         <tbody id="products-list" name="products-list">
           @foreach ($product as $product)
            <tr id="product{{$product->id}}" class="record">
             <td>{{$product->id}}</td>
             <td>{{$product->name}}</td>            
             

              <td>
              <button class="btn btn-warning btn-detail open_modal btn_edit" id="btn_editdata{{$product->id}}" value="{{$product->id}}">Edit</button>
              <button class="btn btn-danger btn-delete delete-product" value="{{$product->id}}">Delete</button>
              </td>
            </tr>
             @endforeach
        </tbody>
       </table>
       </div>
       </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Product</h4>
              </div>
              <div class="modal-body">
                <form id="frmProducts" name="frmProducts" class="form-horizontal" novalidate="">

                  <div class="form-group error">
                    <label for="inputName" class="col-sm-3 control-label">Name</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control has-error" id="name" name="name" placeholder="Name" value="">
                    </div>
                  </div>
  
                  <div class="form-group">
                    <label for="inputDetail" class="col-sm-3 control-label">Password</label>
                    <div class="col-sm-9">
                     <input type="password" class="form-control" id="password" name="password" placeholder="Password" value="">
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="inputDetail" class="col-sm-3 control-label">Confirm Password</label>
                    <div class="col-sm-9">
                     <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Password" value="" onkeyup='checkPasswordMatch();'>
                     <span id="message" style="color:green;"></span>
                    </div>
                  </div>            
                </form>
              </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="btn-save" value="add">Save</button>
              <input type="hidden" id="product_id" name="product_id" value="0">
            </div>
                </form>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn-update" value="edit">Update</button>
                <input type="hidden" id="product_id" name="product_id" value="0">
                <input type="hidden" id="id" name="id" value="">
                </div>
            </div>
          </div>
      </div>
</div>
    <meta name="_token" content="{!! csrf_token() !!}" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="{{asset('js/ajaxscript.js')}}"></script>
    <script type="text/javascript">
     $('#btn-save').on('click',function(event){
        var name = $("#name").val();
        var password = $("#password").val();
        var confirm_password = $('#confirm_password').val();
           event.preventDefault();
          $.ajax({
            url:"{{ url('add') }}",
            type:"POST",
            data:{"_token": "{{ csrf_token() }}",name:name,password:password,confirm_password:confirm_password} ,
            dataType:"json",
            success:function(data)
            {           
              console.log(data);
                $('#myModal').modal('hide');  
                $('#alert').text('Data Inserted Successfully..');
                setTimeout(function() {
                $('#alert').fadeOut('slow');
                    }, 5000);
                $('#products-list').prepend('<tr id="product'+data.id+'"><td>'+data.id+'</td>,<td>'+data.name+'</td>,<td> <button class="btn btn-warning btn_edit " value='+data.id+'>Edit</button> <button class="btn btn-danger btn-delete delete-product" value='+data.id+'>Delete</button></td></tr>');
            },    
            error: function(data){
                 alert("Error")
            }
          });
        });


Step: 3 Create a function in controller for insert Password from the model and send response using json to ajax .
app/Http/Controllers/PasswordController.php
 

public function insert(Request $request)
    {
        $rules = array(
            'name'    =>  'required',
            'password'     =>  'required',
            'confirm_password' =>  'required'

        );

        $data = array(
            'name'        =>  $request->name,      
            'password'         =>  $request->password,      
            'confirm_password'         =>  $request->confirm_password,      
        );

        $value = Password::create($data);           
        return response()->json($value);
    }


Step: 4 Make a route for connection with controller.
app/Http/routes.php
 

 Route::post('add', 'PasswordController@insert');

Related Post