Submitting form refreshing the page even after using e.preventDefault - javascript

I want to do some operations after submitting of form. But the page gets reloaded after clicking of "Submit" button. I have used evt.preventDefault() still its not stopped.
<form class="user-info-form">
<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="create-user-label">User Details</h4>
<div class="error-message"></div>
</div>
<div class="modal-body">
<div class="form-group">
<label for="user-email" class="control-label">Email:</label>
<input type="email" class="form-control" id="user-email" name="email" required>
</div>
<div class="form-group">
<label for="user-first-name" class="control-label">First Name:</label>
<input type="text" class="form-control" id="user-first-name" name="first_name" required>
</div>
<div class="form-group">
<label for="user-last-name" class="control-label">Last Name:</label>
<input type="text" class="form-control" id="user-last-name" name="last_name" required>
</div>
<div class="form-group">
<label for="user-password" class="control-label">Password:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="form-group">
<label for="user-confirm-password" class="control-label">Confirm Password:</label>
<input type="password" class="form-control" id="confirmPassword" name="confirm-password" required>
</div>
<input type="hidden" name="id" class="uuid" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary submit-btn">Submit</button>
</div>
</div>
</form>
And JS code is -
$(".submit-btn").submit(function (evt) {
evt.preventDefault();
oThis.onSubmitBtn();
});

You should apply the submit function to your form tag, not to your submit button.
$(".user-info-form").submit(function (evt) {
evt.preventDefault();
oThis.onSubmitBtn();
});

Related

Serialize method of ajax not returning required values

I am trying to get form inputs through ajax j query bootstrap modal and store it into the database but serialize method is not returning all the values required.
It should have returned the values of user_id and btn_action...
where did I go wrong..??
I have tried many solutions but could not get any answer...
below are html and javascript code. I am using all the required jquery resources.
<form method="post" id="user_form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></i> Add User
</h4>
<button type="button" class="close" data-dismiss="modal">×
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter User Name</label>
<input type="text" name="user_name" id="user_name" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Email
</label>
<input type="email" name="user_email" id="user_email" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" required />
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="user_id" id="user_id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name ="action" id= "action" class="btn btn-primary"
value="Add" />
<button type="button" class="btn btn-default" data-dismiss="mo
dal">Close</button>
</div>
</div>
</form>
//script code:
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
$('#action').attr('disabled','disabled');
var form_data = $('#user_form').serialize();
alert(form_data);
// console.log(form_data)
$.ajax({
url:"user_action.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#user_form')[0].reset();
$('#userModal').modal('hide');
$('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
$('#action').attr('disabled', false);## Heading ##
}
});
});
<script>
$(document).on('click','#add_button',function(){
$('#action').val("Insert");
$('.modal-title').text("Add User");
});
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
var form_data = $('#user_form').serialize();
alert(form_data);//not returning the required values
$.ajax({
url:"user_action.php",
method:"POST",
data:form_data,
contentType:false,
processData:false,
success:function(data)
{
$('#user_form')[0].reset();
$('#userModal').modal('hide');
$('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
$('#action').attr('disabled', false);
userdataTable.ajax.reload();
}
});
});
});
</script>
<!-- form -->
<form method="post" id="user_form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></i> Add User</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter User Name</label>
<input type="text" name="user_name" id="user_name" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Email</label>
<input type="email" name="user_email" id="user_email" class="form-control" required />
</div>
<div class="form-group">
<label>Enter User Password</label>
<input type="password" name="user_password" id="user_password" class="form-control" required />
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="user_id" id="user_id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name ="action" id= "action" class="btn btn-primary" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="mo dal">Close</button>
</div>
</div>
</form>
</div>
</div>
The two hidden inputs have no values attached to them so you will not find them in the serialized value, add some values to the inputs directly in the html or with javascript
<input type="hidden" name="user_id" id="user_id" value="some user_id"/>
<input type="hidden" name="btn_action" id="btn_action" value="some btn_action"/>

how to call same modal for multiple buttons

I have done bootstrap modal in different page means modal in another page(modal.html) and button in different page(career.php) it's working but same modal i want to link for multiple buttons. How to do that i am not getting
$(document).ready(function(e){
$('#btnModal') .click(function(){
//using ajaz post
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx) //fill div tmpmodal with modal.html content..!!
//calling modal
$('#testModal').modal('show');
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary apply" id="btnModal">Apply</button>
<li style="display:block;"></li>
<div id="tmpModal"></div>
Add bootstrap CSS & JS
Modal
Modal
Modal
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/k0yfpcs1/
Just do that based on the class not on id
<button class="btn btn-primary someclassname" id="btnModal">Apply</button>
and update javascript to click event on that class
$('.someclassname') .click(function(){
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx)
$('#testModal').modal('show');
})
})

bootstrap 4 modal not showing

This is my page I am working on Bootstrap 4 modal, actually i want to get form values in the bootstrap 4 modal but its not showing, can someone check my code i don't know why its not responding ?
when i click on edit button it do nothing. I am using Mysql, Php, Bootstrap and Javascript.
Here is my code
$(document).ready(function(){
$(document).on('click','.edit_data', function(){
var project_id=$(this).attr("id");
$.ajax({
URL:"adminhome.php",
method:"POST",
data:{projectID:project_id},
dataType:"json",
success:function(data){
$('#pt').val(data.pt);
$('#s1_id').val(data.s1_id);
$('#s1_name').val(data.s1_name);
$('#s2_id').val(data.s2_id);
$('#s2_name').val(data.s2_name);
$('#s3_id').val(data.s3_id);
$('#s3_name').val(data.s3_name);
$('#project_id').val(data.id);
$('#update_user_modal').modal('show');
}
});
});
});
<a class="btn btn-warning btn-sm mt-1 text-white edit_data" role="button" name="edit" id="<?php echo $row[0]; ?>" >
<span class="">EDIT</span>
</a>
<!-- Modal - Update User details -->
<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Update</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<div class="form-group">
<label for="update_title">Project Title</label>
<input type="text" id="pt" name="pt" placeholder="Project Title" class="form-control"/>
</div>
<div class="form-group">
<label for="update_student_id1">Student ID 1</label>
<input type="text" id="update_student_id1" id="s1_id" name="s1_id" placeholder="Student ID" class="form-control"/>
<label for="update_student_name1">Student Name</label>
<input type="text" id="update_student_name1" id="s1_name" name="s1_name" placeholder="Student Name" class="form-control"/>
</div>
<div class="form-group">
<label for="update_student_id2">Student ID 2</label>
<input type="text" id="update_student_id2" id="s2_id" name="s2_id" placeholder="Student ID" class="form-control"/>
<label for="update_student_name2">Student Name</label>
<input type="text" id="update_student_name2" id="s2_name" name="s2_name" placeholder="Student Name" class="form-control"/>
</div>
<div class="form-group">
<label for="update_student_id3">Student ID 3</label>
<input type="text" id="update_student_id3" id="s3_id" name="s3_id" placeholder="Student ID" class="form-control"/>
<label for="update_student_name3">Student Name</label>
<input type="text" id="update_student_name3" id="s3_name" name="s3_name" placeholder="Student Name" class="form-control"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
<input type="hidden" id="project_id">
</div>
</div>
</div>
</div>

Why my post-form is not reseting? [duplicate]

This question already has answers here:
Resetting a multi-stage form with jQuery
(31 answers)
Closed 5 years ago.
Could you help me with my post-form? I am gonna try realised reseting form after closing modal window with message about sending, but it isn't working! Why? I'm using Bootstrap 3.
<form id='send-form' action="#" method="post" target="iframe1">
<div class="input-field">
<input type="text" name="name" class="form-control" placeholder="name">
</div>
<div class="input-field">
<input type="email" name="email" class="form-control" placeholder="e-mail...">
</div>
<div class="input-field">
<input type="text" name="subject" class="form-control" placeholder="Тема...">
</div>
<div class="input-field">
<textarea name="message" class="form-control" placeholder="message"></textarea>
</div>
<div class="input-field">
<input type="checkbox" checked autocomplete="on" name="law">check</input>
</div>
<button type="submit" id="submit" class="btn btn-blue btn-effect" data-toggle="modal"
data-target="#modal-send">send</button>
</form>
<div class="modal" id="modal-send">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button id='reset-but' class="close" type="button" data-dismiss="modal">
<i class="fa fa-close fa-2x"></i></button>
<script>
$(index.html).ready(function(){
$('#reset-but').click(function () {
$('#send-form')[0].reset();
});});
</script>
<h4 class="modal-title">Сообщение отправлено<br><br></h4>
</div>
</div>
</div>
</div>
Just delete $(index.html).ready(function(){} and it will works
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='send-form' action="#" method="post" target="iframe1">
<div class="input-field">
<input type="text" name="name" class="form-control" placeholder="name">
</div>
<div class="input-field">
<input type="email" name="email" class="form-control" placeholder="e-mail...">
</div>
<div class="input-field">
<input type="text" name="subject" class="form-control" placeholder="Тема...">
</div>
<div class="input-field">
<textarea name="message" class="form-control" placeholder="message"></textarea>
</div>
<div class="input-field">
<input type="checkbox" checked autocomplete="on" name="law">check</input>
</div>
<button type="submit" id="submit" class="btn btn-blue btn-effect" data-toggle="modal" data-target="#modal-send">send</button>
</form>
<button id='reset-but' type="button" data-dismiss="modal">
<i class="fa fa-close fa-2x"></i></button>
<script>
$('#reset-but').click(function () {
$('#send-form')[0].reset();
});
</script>
<h4 class="modal-title">Сообщение отправлено<br><br></h4>

Bootstrap div's overflowing with JQuery modal

I have a minor front end issue. When I load Bootstrap DIV's into the JQuery Modal's body it over flows into the footer instead of expanding the body. Thanks.
<div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="fname" placeholder="First Name">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="lname" placeholder="Last Name">
</div>
<div class="col-sm-12"><br></div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw" placeholder="Password">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
</div>
<!-- END ADDRESS FORM -->
</div>
</form>
</div>
<div class="modal-footer">
<a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
</div>
</div>
</div>
</div>
Add the 'row' class to your .modal-body
http://jsbin.com/fehivowimu/edit?html,output
<div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
<div class="modal-dialogue">
<div class="modal-content">
<div class="modal-header">
<h4>Register</h4>
</div>
<div class="modal-body row">
<form action="" method="POST">
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control" name="fname" placeholder="First Name">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="lname" placeholder="Last Name">
</div>
<div class="col-sm-12"><br></div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw" placeholder="Password">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
</div>
<!-- END ADDRESS FORM -->
</div>
</form>
</div>
<div class="modal-footer">
<a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
</div>
</div>
</div>
</div>

Categories