JSFiddle - React, Tailwind, and code Playground
HTML
<form action="#" class="form-horizontal form-bordered" id="login" name="login">
<div class="form-group">
<label class="col-sm-3 control-label">Username</label>
<div class="col-sm-6">
<input type="text" placeholder="Username" class="form-control" name="Username" id="dbsusername" value=
"xxxx">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-6">
<input type="text" placeholder="Password" class="form-control" name="Password" id="dbspassword" value="xxxx">
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<label style="color: #FF0000" id="errorMessage"></label>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<button class="btn btn-primary">Submit</button>
<button class="btn btn-default">Cancel</button>
</div>
</div>
</form>
JavaScript
$(document).ready(function(){
$("#login").submit( function () {
var str = $("#login").serialize();
alert(str);
alert($("#dbsusername").val());
$.ajax({
url: 'ajax/process_login.php',
type: "POST",
data: "dbsusername=xxxx&dbspassword=xxxx",
success: function(result) {
alert(result);
var result=trim(result);
if(result=='ok'){
window.location='index.php';
}else{
$("#errorMessage").html(result);
}
},
error: function (request, textStatus, errorThrown) {
alert('text status: ' + textStatus + ' errorThrown: ' + errorThrown);
}
});
return false;
});
});
function trim(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}