I have a form that uses Ajax to submit data. Once the user submits the form, the text is updated to indicate that the data was sent successfully, and then the form is displayed with the fields filled out. I want to display the form but prevent users from re-submitting it, so I need to disable the input fields and submit button. The form has three operations: add, update, and view. After disabling the form inputs in view mode, how can I keep them disabled in add mode as well?
<div id="userModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="user_form" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Report</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-2">
<label for="ex1">Square</label>
<input type="text" name="square" id="square" class="form-control">
</div>
<div class="col-xs-2">
<label for="ex1"> Number </label>
<input type="text" name="report_number" id="report_number" class="form-control">
</div>
<div class="col-xs-4">
<label>Report Date </label>
<input type="date" name="report_date" id="report_date" class="form-control" />
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<label>Notes </label>
<textarea rows="15" cols="80" type="text" name="notes" id="notes" class="form-control" > </textarea>
</div>
</div>
<br>
<label>Select Image</label>
<input type="file" name="user_image" id="user_image" />
<span id="user_uploaded_image"></span>
</div>
<div class="modal-footer">
<input type="hidden" name="report_id" id="report_id" />
<input type="hidden" name="operation" id="operation" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).on('submit', '#user_form', function(event){
event.preventDefault();
var addedSquare = $('#square').val();
var addedNumber = $('#report_number').val();
var addedDate = $('#report_date').val();
var extension = $('#user_image').val().split('.').pop().toLowerCase();
if(extension != '')
{
if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
{
alert("Invalid Image File");
$('#user_image').val('');
return false;
}
}
if(addedSquare != '' && addedNumber != '')
{
$.ajax({
url:"insert.php",
method:'POST',
data:new FormData(this),
contentType:false,
processData:false,
success:function(data)
{
alert(data);
$('#user_form')[0].reset();
$('#userModal').modal('hide');
dataTable.ajax.reload();
}
});
}
else
{
alert("Both Fields are Required");
}
});
$(document).on('click', '.update', function(){
var report_id = $(this).attr("id");
$.ajax({
url:"fetch_single.php",
method:"POST",
data:{report_id:report_id},
dataType:"json",
success:function(data)
{
$('#userModal').modal('show');
$('#square').val(data.square).prop( "disabled", false );
$('#report_number').val(data.report_number).prop( "disabled", false );
$('#report_date').val(data.report_date).prop( "disabled", false );
$('.modal-title').text("Edit Report");
$('#report_id').val(report_id);
$('#user_uploaded_image').html(data.user_image);
$('#action').val("Edit");
$('#operation').val("Edit");
}
})
});
$(document).on('click', '.view', function(){
var report_id = $(this).attr("id");
$.ajax({
url:"fetch_single.php",
method:"POST",
data:{report_id:report_id},
dataType:"json",
success:function(data)
{
$('#userModal').modal('show');
$('#square').val(data.square).prop( "disabled", true );
$('#report_number').val(data.report_number).prop( "disabled", true );
$('#report_date').val(data.report_date).prop( "disabled", true );
$('.modal-title').text("View Report");
$('#report_id').val(report_id);
$('#user_uploaded_image').html(data.user_image);
$('#action').val("View");
$('#operation').val("View");
}
})
});
</script>
Is there a way to enable the inputs again in the add operation?