Tuesday, February 28, 2017

Laravel : How to make a page submit to itself

I'm working on a page for editing user profiles but I want the page am working on to submit to itself when it is submitted and show a message that the profile has been edited successfully. Please how do I do this ?

Here is what am working ?

       ` <div class="row">

          <div class="text-center title">Pricing</div>

          <div class="text-center desc col-md-8 col-md-push-2">

             

          </div>


<div class="container" style="padding-top: 60px;">
  <h1 class="page-header">Edit Profile</h1>
  <div class="row">
    <!-- left column -->

    <form class="form-horizontal" role="form" method="post" action="/profile">
    <div class="col-md-4 col-sm-6 col-xs-12">
      <div class="text-center">
        <img id="ShowImage" src="#"/>
        <img src="http://localhost:8234/img/index.png" class="avatar img-circle img-thumbnail" alt="avatar" width="200" height="200">
        <h6>Upload a different photo...</h6>
        <input type="file" class="text-center center-block well well-sm" name="avatar_path" id="avatar_path" onchange="readURL(this);">
      </div>
    </div>
    <!-- edit form column -->
    <div class="col-md-8 col-sm-6 col-xs-12 personal-info">
      <div class="alert alert-info alert-dismissable">
        <a class="panel-close close" data-dismiss="alert">×</a> 
        <i class="fa fa-coffee"></i>
        This is the <strong>Profile Page</strong>. Use this to <strong>ONLY</strong> change your peronsal details
      </div>
      <h3>Personal info</h3>
        <input class="form-control" value="" type="hidden" name="user_id">
        <div class="form-group">
          <label class="col-lg-3 control-label">First Name:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="first_name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">Last Name:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="last_name">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">Username:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="username">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">Email Address:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="email">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">Gender</label>
          <div class="col-lg-8">
            <div class="ui-select">
              <select id="gender" class="form-control" name="gender">
                <option value="" selected></option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">City:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="city">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">State:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="state">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">Country:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="country">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">Mobile:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="mobile">
          </div>
        </div>
        <div class="form-group">
          <label class="col-lg-3 control-label">Occupation:</label>
          <div class="col-lg-8">
            <input class="form-control" value="" type="text" name="occupation">
          </div>
        </div>

        <div class="form-group">
          <label class="col-md-3 control-label"></label>
          <div class="col-md-8">
            <input class="bkgrnd-blue text-white btn btn-primary" value="Update Profile" type="submit">
            <span></span>
            <a href="/profile/" class="bkgrnd-blue text-white btn btn-primary">Cancel</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>`



via Abiodun Adetona

Advertisement