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>
Related
I try to send an html input text value to a controller. I can't use a form post because my modal dialog is already in a form.
Here's the code :
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
<input id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
#*<button type="button" class="btn btn-primary">Understood</button>*#
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" asp-route-visiteVirtuelle="document.getElementById("visitevirtuelle").value">Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
I want the parameter "asp-route-visiteVirtuelle" to have the value of the input text "visite virtuelle".
But it doesn't work
PLease help me.
Tag helper in anchor link render the url in href when the page load, so you cannot use js to add the value to asp-route-visiteVirtuelle.
Here is a whole working demo:
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="##("AjouterVisiteVirtuelleModal" + #annonce.Reference)">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
//add event here......................
<input onchange="ChangeUrl(this)" id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" >Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
}
#section Scripts
{
<script>
function ChangeUrl(event)
{
var visiteVirtuelleVal = $(event).val();
var anchor = $(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href');
$(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href',anchor+"&visiteVirtuelle="+visiteVirtuelleVal);
}
</script>
}
This is the code for the confirm.
<td><a href="source.php?admin_id=<?php echo $row['id'];?>&username=
<?php echo $_SESSION['admin_username']; ?>"
data-toggle="tooltip"
data-placement="top"
title="Delete">
<i id="del" class="mdi mdi-close"></i> </a>
</td>
This is the script for the confirm.
const deleteIcon = document.getElementById("del");
deleteIcon.addEventListener("click",(e) => {
const confirmVar = confirm("Do you want to proceed? ");
if(confirmVar){
return true;
}else{
return false;
}
})
This is the modal where I want to change the default confirm of javascript.
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Please validate!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Do you want to proceed?.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnSave" type="button" data-bs-dismiss="modal" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
There were a couple things to fix. Your link wasn't set up right, because it was a regular link (which would go directly to it's href thus ignoring the id='del' icon inside with the event listener). What is needed is to make that link a button which opens the confirm modal. When the modal confirmation button is clicked, then you can go to the link.
I have set this up so that you can have multiple delete buttons on the page, each will need their own data-href attribute.
The delete link became a button that triggers the modal. The modal has the confirm button which, when clicked, finds the data-href of the delete button that opened the modal.
let goToDeleteLink = ''
let btnSave = document.getElementById('btnSave')
btnSave.addEventListener('click', function(e) {
console.log('go to ' + goToDeleteLink);
})
let btnDeletes = document.querySelectorAll('.delete-button')
btnDeletes.forEach(btn => {
btn.addEventListener('click', function(e) {
// store the current delete link
goToDeleteLink = e.target.dataset.href
})
})
<html><head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<button data-href="source.php?admin_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['admin_username']; ?>" data-bs-toggle="modal" data-bs-target="#confirmModal" class="delete-button">
<i class="mdi mdi-close"></i> close </button>
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">Please validate!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Do you want to proceed?.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button id="btnSave" type="button" data-bs-dismiss="modal" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</body>
</html>
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>
My goal is to display a fresh modal every time it is opened. Currently, that is only true when the modal window is first displayed after refreshing the page. For the subsequent closing/opening of the modal, it just appends the current content to the end of the previous content, which is still displayed.
It may be worth noting that with this particular configuration of the countless efforts tried, I get an
Uncaught ReferenceError: $ is not defined
in my Javascript console for the line
$(document).ready(function() {
but I'm not sure why. The jQuery library (3.2.1) is initialized for the script type it's being used with after all. Any clue?
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').append("$0 per month.");
}
else {
$('.modal-body').append(payment + " or less per month.");
}
}
</script>
<!-- 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">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
You should use .html or .text instead of .append
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
}
</script>
<!-- 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">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</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>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
Try doing $('modal-body').empty() instead of clear
I have dynamic buttons
when I click on button a popup should appear with a textbox.
My button code is
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" value='.$row['country_id'].' id="update" >Update</button>';
My jQuery code is
<script>
$(document).ready(function(){
$("#update").click(function(){
var butval = $("#update").val();
$("#ctext").val(butval);
});
});
Modal popup is
<div id="myModal" class="modal fade" 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">
<input type="text" id="ctext" value="<?php ;?>">
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>
For this kind of case , You must use data attribute of HTML5.
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-btn="'..$row['country_id']..'" value='.$row['country_id'].' id="update" >Update</button>';
And in the Modal popup,
Here is the magic script that will solve your problem.
<script>
$(document).ready(function(){
$("#update").click(function(){
// this is the value you get which is in data attribute of update button.
var btn_value= $(this).data('btn');
$('#myModal')
.find('#ctext').val(btn_value).end()
.modal('show');
});
</script>
Updated for multiple buttons using class: You can try the below. first remove data-target="#myModal" from button then get the value and write it to input then open the modal:
$(document).ready(function(){
$(".update").click(function(){
var butval = $(this).val();
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-success update" value='2' >Update</button>
<button type="submit" class="btn btn-success update" value='3' >Update</button>
<!-- see the button attributes changes -->
<div id="myModal" class="modal fade" 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">
<input type="text" id="ctext" >
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>
#suchit Thanks for your help.
this code is working
<button type="submit" class="btn" data-toggle="modal" value='.$row['country_name'].' id='.$row['country_name'].' >Update</button>;
<script>
$(document).ready(function(){
$(".btn").click(function(){
var butval = this.id;
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
} );
</script>