How to reset form validation alert and error message? - php

Question

I need help. Because i'm using 1 modal for addRoom, editRoom, editImageRoom. I just want to ask if there is a way that if I close/x the modal. The data and the error message will be refresh/reset. Then when I click the other button that opens the modal. The data will be reset. so the errors and validation will not show anymore in other modal interface. Note* im using 1 modal only. I just hide the other field when I click for specific button.
I have 3 different buttons but the modal it open is only one, i just hide some field.
Add button
<i class="fa fa-plus"></i> Add a room
Edit Info Button
<img src="../images/rooms/'.$image.'" class="img-thumbnail" width="90px" height="105px">
Edit Image Button
<i class="fa fa-edit"></i>
Here's the modal
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="modal_form" 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>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<form id="form" name="form" method="post" >
<div class="row">
<div class="summary-errors alert alert-danger alert-dismissible">
<button type="button" class="close" aria-label="Close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<p>Errors list below: </p>
<ul></ul>
</div>
<div id="for_field">
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="room_num" name="room_num" placeholder="Room Number" />
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<select type="text" class="form-control" id="room_type" name="room_type" placeholder="Room Type">
<option value="">--Choose Room Type--</option>
<?php
$select = "SELECT * FROM room_type";
$qry = mysql_query($select)or die(mysql_query());
while($rows = mysql_fetch_array($qry)){
echo '<option value="'.$rows['room_type_id'].'" alt="'.$rows['room_type_description'].'">'.$rows['room_type_name'].'</option>';
}
?>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="rate" name="rate" placeholder="Rate" />
</div>
</div>
<div class="col-md-12">
<div class="form-group input-group">
<label class="input-group-addon control-label"><i class="fa fa-database"></i></label>
<input type="text" class="form-control" id="caps" name="caps" placeholder="Capacity" />
</div>
</div>
</div>
<div id="for_image">
<div class="col-md-12">
<div id="show_image" class="form-group input-group">
</div>
</div>
</div>
<div id="for_upload">
<div class="col-md-12" >
<div class="form-group input-group input-group-file" >
<label class="input-group-addon control-label"><i class="fa fa-image"></i></label>
<input type="text" class="form-control" readonly>
<span class="input-group-btn">
<span class="btn btn-success btn-file">
<i class="icon wb-upload" aria-hidden="true"></i>
<input type="file" id="file" name="file" >
</span>
</span>
</div>
</div>
</div>
<div class="control-group form-group">
<div class="modal-footer">
<input type="hidden" id="submitted" name="submitted" value="1" />
<input type="hidden" id="id" name="id" value="" />
<button type="submit" id="submit" name="submit" onclick="submit()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<span align="left" id="loader"></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here's the Jquery
function addRoom()
{
save_method = 'add';
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('#for_field').show();
$('#for_image').hide();
$('#for_upload').show();
$('#modal_form').modal('show');
$('.modal-title').text('Add new room');
}
// edit modal
function editRoom(u)
{
save_method = 'update';
$.ajax({
url: "serverside/get/roomGet.php",
data: "rId="+u,
type: "POST",
dataType: "JSON",
cache: false,
success: function(data)
{
if(data.status == 1)
{
$('#id').val(data.room_id);
$('#room_num').val(data.room_num);
$('#room_type').val(data.room_type_id);
$('#rate').val(data.room_rate);
$('#caps').val(data.room_capacity);
$('#for_field').show();
$('#for_upload').hide();
$('#modal_form').modal('show');
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('.modal-title').text('Edit Room No: '+data.room_num);
}else{
$('body').html(data.msg);
}
}
});
}
function editImage(u)
{
save_method = 'update-image';
$.ajax({
url: "serverside/get/roomImageGet.php",
data: "rId="+u,
type: "POST",
dataType: "JSON",
cache: false,
success: function(data)
{
if(data.status == 2)
{
$('#hide-field').hide();
$('#id').val(data.room_id);
$('#room_num').val(data.room_num);
$('#for_field').hide();
$('#for_image').show();
$('#for_upload').show();
$('#modal_form').modal('show');
$('.form-group').removeClass('has-error');
$('#form').formValidation('resetForm', true);
$('.modal-title').text('Edit Image');
$('#show_image').html(data.source);
}else{
$('body').html(data.msg);
}
}
});
}
I have no problems in code. i just want to ask how to reset the modal so the data from 1 button(modal) will not conflict the button(modal). thats all! thanks! just give me more good suggestion thanks :)

Answer 1

If you try to call the modal with jquery ajax then you really don't need the lengthy jquery show/hide code. Here is an example code:
index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav" id="menu">
<li>Edit/Delete
</li>
</ul>
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
</html>
modal-content.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
You can use three different files for model or call the same modal by Ajax for all actions. Also, you can follow this link: Getting Bootstrap's modal content from another page