I can't clear form data from bootstrap modal - javascript

i have a little problem when im trying to clear bootstrap modal data..
there is my modal.
<div id="modal-creacion-alias" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<form id="form-alias-dominio" method="POST" class="form">
<div class="modal-content">
<div class="form-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h2 class="modal-title">Alias de dominios</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-md-4 control-label">Nombre del Alias<span class="required">*</span></label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Contraseña" data-container="body"></i>
<input type="text" class="form-control" name="nombre-alias-dominio" id="nombre-alias-dominio">
<br>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer ">
<button type="button" data-dismiss="modal" class="btn default">Cancelar <i class="fa fa-sign-out"></i></button>
<button type="submit" id="crear-alias-domino" class="btn gtd-blue-hard crear-alias-domino">Crear <i class="fa fa-plus"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
and this is the js function:
$('body').on('hide.bs.modal', '.modal', function () {
&(this).removeData('bs.modal');
});
but when i close and re open modal the data still there.
how can i solve it?
thanks.

You can reset all input data by using $(form).trigger('reset')
$('body').on('hide.bs.modal', '.modal', function () {
$('#form-alias-dominio').trigger("reset"); //here your form_id
});

I was able to clear data doing this
$('body').on('hide.bs.modal', '.modal', function (e) {
$(this).find('form').trigger("reset");
});
thanks #Sadikhasan

Related

Value of an html input text sent to a .Net MVC controller

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>
}

Bootstrap modal opens automatically on page load, but how to disable if form is submitted

I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click
By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}

How to add fields in bootstrap model dynamically in angular

I am new to webDevelopment. Now, Here I have a list of buttons , but the data-target is a same model for every button click. So, My model is like -
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Missing {{suggestivalue}}
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
In this buttons are like -
<ul class="col-md-12 list-group suggestion">
<li class="list-group-item suggestion-list-group-item nopadding" ng-repeat="suggestion in suggestions | orderBy:'name'" tooltip-trigger
tooltip-placement="bottom" tooltip={{suggestion.name}} tooltip-popup-delay=200 tooltip-append-to-body="true">
<button ng-click="grabIndex(suggestion)" class="btn btn-default btn-block suggestion-button" role="button" data-toggle="modal"
data-target="#myModalHorizontal"><span class="suggestion-text">{{suggestion.name}}</span>
</button>
</li>
</ul>
Every Button is going to open a same model,But It should be respective to that of click value. E.g. If the button is like FullName , I should be able to add the two Input box fistName and lastName . Its like on click of the Button, How can I add the fields respective of that button.? Can any one help me with this ?
I think you can use ng-if
Just create all fields in modal
Like
firstname
lastname
email
password
remember me
When you click on btn , set a variable like showFields
Eg:
showFields== "login" or ""
showFields== "register"
use ng-if ='showFields== "register"' for fields that need to show only on register page
Hope it will help

#Bootstrap 3.2.0 #modal-dialogs #jquery

following is the code for which modal-dialog is not popping up.I am using Bootstrap 3.2.0 and jquery is also above 1.9.0.Help me out if i am missing something.And please let me know for any further information and Thanks in advance.
<div class="modal fade" id = "login" 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">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl
sgdhfjgkhkjlrtyguuhjkoxcvbn
dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..</p>
<p>wefrgdthyjgukiosdfghjkgh
ssdfghjklertyuwertyuicvbnm,
sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg</p>
<p>My Account</p>
</div>
</div>
Everything is correct as far as markup (link below to view). Make sure you are including the jquery.js script before the bootstrap.js script.
Working demo of your code
<div class="modal fade" id="login" 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">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl sgdhfjgkhkjlrtyguuhjkoxcvbn dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..
</p>
<p>wefrgdthyjgukiosdfghjkgh ssdfghjklertyuwertyuicvbnm, sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg
</p>
<p>My Account</p>
</div>
</div>

How to pass a query string to a bootstrap modal popup in php

I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<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">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});

Categories