How to send dynamic modal form fields to django - javascript

I'm creating dynamic modal form field and I want to send generated field value to django but just one field is sent to my django server.
I woner if this is caused by the fact the input field have the same name.
Any suggestion please ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><input type="text" name="mytext[]"/>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
<div class="modal fade" id="multipleset{{ecriture.id_ecriture}}" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalLabel">Ajouter une écriture</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{% url 'multipleset' %}" method="post" enctype="multipart/form-data">{% csrf_token %}
<div class="modal-body">
<div class="container1">
<button class="add_form_field">Add New Field
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div><input type="text" name="mytext[]"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Ajouter</button>
</div>
</form>
</div>
</div>
</div>

Related

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>

Bootstrap Confirmation Delete Modal form not submitted?

It works on Data Listed Type (table). if you click "Hapus" the data will be deleted
But, when I put it on this page, the confirmation delete modal is't work. The form isn't submitted and the modal isn't close..
(But if I don't put the confirmation, it works and the data deleted)
Controller:
public function deleteEvent($eid){
$event = Event::find($eid);
$event->delete();
return redirect()->back()->with('successDelete', "Data Schedule telah dihapus!");
}
Javascript:
$('#confDelEventModal').on('show.bs.modal', function (e) {
$("#debitur").html($(e.relatedTarget).data('debitur'));
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
$('#confDelEventModal').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
Modal:
<div class="modal fade" id="confDelEventModal" role="dialog" 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">Delete Schedule</h4>
</div>
<div class="modal-body">
<p>Hapus Schedule: <b><span id="debitur"></span></b> ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-danger" id="confirm">Hapus</button>
</div>
</div>
</div>
</div>
Delete form in View:
<form action="{{url('/kpr/deleteEvent/'.$event->eid)}}" method="POST">
{{csrf_field()}}
{{method_field('DELETE')}}
<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#confDelEventModal" data-debitur="{{$event->title}}"><span class="glyphicon glyphicon-trash"></span></button>
</form>

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>

How to change a value in hidden field from a modal

Having a modal with the Terms and Conditions, I need to change the hidden input field value, (name="agree") which is outside the modal, from "no" to "yes" if user accept the terms by clicking the Accept (Acepto) button.
The reason for doing this is that the form can be sent with the acceptance of the Terms and Conditions.
Many Thanks in advance.
This is my code (its not working, the value of the input field "agree" never changes):
<form id="formced" ... >
....
<div class="form-group">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#termsModal">Acepto los Términos y Condiciones </button>
</div>
<!-- Terms and conditions modal -->
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="Términos y Condiciones" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Términos y Condiciones</h3>
</div>
<div class="modal-body">
<p>TERMINOS Y CONDICIONES ...</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="agreeButton" data-dismiss="modal">Acepto</button>
<button type="button" class="btn btn-default" id="disagreeButton" data-dismiss="modal">No Acepto</button>
</div>
</div>
</div>
<input type="hidden" name="agree" value="no" />
<script>
$(document).ready(function() {
// Update the value of "agree" input when clicking the Agree/Disagree button
$('#agreeButton, #disagreeButton').on('click', function() {
var whichButton = $(this).attr('id');
$('#formced')
.find('[name="agree"]')
.val(whichButton === 'agreeButton' ? 'si' : 'no')
.end()
});
});
</script>
<a class="btn btn-primary btn-md" role="button" onClick="return ParaOtrosNavegadores1();">Continuar <span class="glyphicon glyphicon-forward" aria-hidden="true"></span></a>
<script type="text/javascript">
function ParaOtrosNavegadores1(){
document.formced.submit();
}
</script>
</form>
Working fiddle.
Try to target the element directly like :
$('input[name="agree"]').val(assignedVal);
Code:
function ParaOtrosNavegadores1() {
document.formced.submit();
}
$(document).ready(function() {
// Update the value of "agree" input when clicking the Agree/Disagree button
$('#agreeButton, #disagreeButton').on('click', function() {
var whichButton = $(this).attr('id');
var assignedVal = whichButton === 'agreeButton' ? 'si' : 'no';
$('input[name="agree"]').val(assignedVal);
console.log('Hidden field value is : ' + $('input[name="agree"]').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<input type="hidden" name="agree" />
<form id="formced">
<div class="form-group">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#termsModal">Acepto los Términos y Condiciones </button>
</div>
<!-- Terms and conditions modal -->
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="Términos y Condiciones" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Términos y Condiciones</h3>
</div>
<div class="modal-body">
<p>TERMINOS Y CONDICIONES ...</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="agreeButton" data-dismiss="modal">Acepto</button>
<button type="button" class="btn btn-default" id="disagreeButton" data-dismiss="modal">No Acepto</button>
</div>
</div>
</div>
<a class="btn btn-primary btn-md" role="button" onClick="return ParaOtrosNavegadores1();">Continuar <span class="glyphicon glyphicon-forward" aria-hidden="true"></span></a>
</form>

How to get HTML button's data-value=“1” in PHP?

I am overwriting Bootstrap modal button's value with data-value="1" attribute for using it in my PHP. But my PHP code is returning null. Values are the IDs to check in database:
if (value matches) {
do this
} else {
do this
}
Here is my code:
HTML
<button type="button" class="btn btn-primary" id="bookNow" data-value='1' data-toggle="modal" data-target="#myModal">Book Now</button>
Bootstrap 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">Confirm Booking</h4>
</div>
<div class="modal-body">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<button type="submit" class="btn btn-primary" name="bookMe" value="" id='btnCon' data-value="" >Confirm</button>
<input type="submit" class="btn btn-danger" name="reset" value="Cancle" data-dismiss="modal">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
//value getter
var btn = document.getElementById('bookNow');
var modalBtn = document.getElementById('btnCon');
//evnt liestenr
btn.addEventListener('click', handleClick);
modalBtn.addEventListener('click',handleModal);
//event Functions
function handleClick (e) {
var btn = e.target;
var value = btn.dataset.value;
var modalBtn = document.getElementById('btnCon');
modalBtn.dataset.value = value;
}
function handleModal (e) {
var btn = e.target;
var value = btn.dataset.value;
console.log(value);
}
</script>
PHP
if (isset($_POST['bookMe'] == null)){
echo "data-value is null";
}
data-value's don't get sent to the server automatically, though you could accomplish that with AJAX. I suggest you use a hidden input in your form and set the value to whatever you need it to be:
<input type="hidden" name="bookMe" value="whateverValue" />

Resources