We Keep Coding

Clear the Input type file Value if the Modal has been Closed and Save All changes button should be disabled

How are you ? I'm working on simple project and I want to do a simple trick in my app.
I want to Clear the Input type file Value if the Modal has been Closed
mean if the user decided to Cancel the upload and close the modal I want to reset the input value to be empty and Save All changes Button should be disabled if the value is empty ....
HTML CODE :
<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="uploadavatar">
<input type="file"
class="custom-file-input"
id="ID12"
name="avatar"
value=""
hidden />
<label role="button" class="btn" for="ID12">
Upload Now
</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="button1" disabled>Save All changes</button>
</div>
</div>
</div>
</div>
JS CODE :
$(document).on('shown.bs.modal', '#modal_a', function() {
if ($(this).hasClass('show')) {
$('#ID12').on('change', function() {
if ($(this).val() == '') {
$('#button1').prop('disabled', true);
} else {
$('#button1').prop('disabled', false);
}
$(this).attr('value', $(this).val());
});
}
});
$(document).on('hide.bs.modal', '#modal_a', function(e) {
if ($('#ID12').val() != '') {
const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');
if (!CancelUpdateConfirmation) {
e.preventDefault();
} else {
}
}
});

Like this.
$( document ).ready(function() {
$('#exampleModal').on('hidden.bs.modal', function (e) {
$('#ID12').val('')
$('#button1').prop('disabled', true);
})
$('#exampleModal').on('hide.bs.modal', function (e) {
if ($('#ID12').val() != '') {
const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');
if (!CancelUpdateConfirmation) {
e.preventDefault();
} else {
}
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="file"
id="ID12"
name="avatar"
value=""
/>
<button type="submit" class="btn btn-primary" id="button1">Save All changes</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Why there won't be a value pass in my modal body?

For example there are three inputed sample and when I try to delete the second inputed sample it won't be deleted instead the third one will be the one is deleted. Another error is that if there will be one inputed sample left and I try to delete it then code will be error.
Modal Code
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title text-center" id="myModalLabel">Delete Confirmation</h1>
</div>
<form class ="delete" action="{{ action('ReservationController#destroy', ['id' => $reservation->id])}}" method="post">
{{ method_field('DELETE')}}
{{ csrf_field() }}
<div class="modal-body">
<p class="text-center">Are you sure you want to delete?
</p>
<input type="hidden" name="reservation_id" id="resid" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">No, Close</button>
<button type="submit" class="btn btn-danger">Yes, Delete</button>
</div>
</form>
</div>
</div>
Script Code
<script>
$('#delete').on('show.bs.modal',function(event){
var button = $(event.relatedTarget)
var resid = button.data('deleteid')
var modal = $(this)
modal.find('.modal-body #resid').val(resid)
})
</script>
Button code
<button type="submit" class="btn btn-danger" data-deleteid="{{$reservation->id}}" data-toggle="modal" data-target="#delete" >Delete</button>
Controller
$reservation = PropertyReservation::findOrFail($id);
$reservation->delete();
return redirect('/reservations')->with('success','Successfully Deleted');

Try this
<script>
$(document).on('show.bs.modal','#delete',function(event){
var resid = $(this).find('button[type="submit"]').attr('data-deleteid')
var modal = $(this);
modal.find('.modal-body #resid').val(resid);
})
</script>

Display success modal after form submit

I created a form inside has username and id textbox, I want to display
a success modal that contains the value of username and id after form submit
to let the user see his username and id, And also i have an validation on my form , Now my problem is when i click submit
button with empty textfields the validation appear also the success modal also appear.
here is my sample code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal1" style=" color:#fff; background:#00bcd4" onClick="incrementValue()" value="Increment Value">No</button>
<div class="modal fade right" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-full-height modal-right" role="document">
<div class="modal-content">
<div class="modal-header blue accent-1">
<h3 class="mt-2" style="color:white;"><i class="fa fa-user-circle"></i> New User :</h3>
<a href="test1.php" button type="btn" class="close" aria-label="Close">
<span aria-hidden="true">×</span></a> </div>
<div class="modal-body" style="height:300px">
<form class="needs-validation " method="post" novalidate >
<div class="row">
<div class="col">
<div class="md-form mt-0">
<input type="text" class="form-control" name="id" placeholder="ID" style="margin-top:-10px" id="id" required >
<div class="invalid-feedback">
Enter ID </div>
</div>
</div>
<div class="col">
<div class="md-form mt-0">
<input type="text" class="form-control" placeholder="Username" name="username" style="margin-top:-10px" id="username" required >
<div class="invalid-feedback">
Enter Username </div>
</div>
</div>
</div>
<div class="text-center mt-2" style="bottom:0; margin-bottom:10px;">
<button type="submit" id="submit" class="btn btn-info" style="width:95%;"
>Log in <i class="fa fa-sign-in ml-1"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document" style="width:85%" >
<div class="modal-content">
<div class="modal-header blue accent-1">
<h4 class="modal-title" id="myModalLabel" style="color:white;"><i class="fa fa-lock"> Info:</i></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
display user's username and id here.
</div>
<div class="modal-footer">
<a class="btn btn-primary" href="test1.php" > Confirm</a>
</div>
</div>
</div>
</div>
here is my validation javascript for my form:
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
here is my script for my modal:
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#modalSuccess").modal();
});
});
</script>
Advance Thanks :)

You have to check if the fields are filled in before calling
$("#modalSuccess").modal();
Also check in the validation script

<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}
}, false);
});
}, false);
})();
</script>
And
<script>
$(document).ready(function(){
$("#submit").click(function(){
if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
$("#modalSuccess").modal();
} else {
alert('Fill in both fields');
}
});
});
</script>

Dynamically replace href

I have the following lines of code in my website - CodePen.
What I am trying to do, is make it so that the user must fill in the form first, before downloading an item:
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<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">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
How can I make it so that when the user selects the first or second button on the page, it will send this information to the submit button?

You could store the link in a variable. Then, when the button is clicked, check if the fields are empty (and apply any validation rules). If not empty, apply the submit to the form.
$link = 'example.com/download.pdf';
$('.button').click(function(){
// CHECK THE FIELDS ARE NOT EMPTY
// APPLY YOUR OWN VALIDATION
if($field1 = $('.field1').val() != '' && $('.field2').val() != ''){
// DO WHAT YOU NEED TO DO WITH THE LINK
$('form').submit();
}
})
On a side note, it's possible that you were down-voted (not by myself) for not providing us with your attempts to solve your own problem. You provided us with your html but not any of your tested logic.

You add a click handler to your button in JavaScript :
var fieldsAreReadyToBeSent = function() {
// Validation code goes here
// return true if valid & false if invalid
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) {
event.preventDefault();
}
});
The method event.preventDefault() prevents your your form from being submitted if it is considered invalid!
A demo :
var fieldsAreReadyToBeSent = function() {
return false; // FOR THIS DEMO, ALWAYS RETURN FALSE
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) { // FOR THIS DEMO, THIS IS ALWAYS TRUE
event.preventDefault();
}
});
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<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">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Use Handlebar template with bootstrap modal

I have a bootstrap modal with handlebar script-
<script id="data-template" type="x-handlebars-template">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Add Data</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" enctype="multipart/form-data" action="upload.php" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Message</label>
<div class="controls">
<textarea class="input-xlarge" id="input01" name="text" value="{{value}}"></textarea>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="submit" value="submit">
Save
</button>
<button name="cancel" value="cancel" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</script>
now on a button click I am opening the modal as well as onClick method is calling getDataWithId() method to fill data in the modal-
<b>+</b> Add
and this my getDataWithId() method.
function getDataWithId(id){
var newData;
var theTemplateScript = $("#data-template").html();
var theTemplate = Handlebars.compile (theTemplateScript);
$.get("http://localhost:8092/data_service.php?method=news&id="+id,
function(data, textStatus, jqXHR) {
newData= $.parseJSON(JSON.stringify(data.data.posts));
$(".modal").append (theTemplate(newData));
}).fail(function(jqXHR, textStatus, errorThrown) {
});
}
Data is not showing on the input field though modal is opening perfectly.