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