Multiple fields not validated inside modal that are dynamically generated

Multiple fields not validated inside modal that are dynamically generated - javascript

I'm validating fields inside modal popup,for single field it is working but if more than one field are appended at a time then validation does not takes place on those fields. Here we can see we add new field by adding add field button but those newly field did'nt get validated.
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
required($(this))
});
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <inputname=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
required($(this))
});
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

You need call .each() on the dynamically added elements as well.
Dynamically added elements are not in DOM onload so ideally you need to do wrap .each() in a function when you add more fields to your modal just call that function again to check for empty inputs
To handle submit and store data we can .submit on your modal form. Get all the data via .serialize method and send all your form data to the backend file via ajax request.
Run Snippet below to see it working.
$(function() {
//Validate Data
var validate = $("#newModalForm").validate()
checkInput()
//Add dynamic inputs
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <input name=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
//Required Dynamic Input
checkInput()
});
//Validate all inputs
function checkInput() {
$('.form-control').each(function() {
required($(this))
});
}
//Required field message
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
//Submit form modal
$('#newModalForm').on('submit', function(e) {
//Prevent default submit behaviour
e.preventDefault()
//Store all the form modal form data
var data = $(this).serialize()
//Check all fieild have data
if (validate.errorList.length == 0) {
alert('All fields have value - Form will submit now')
//Request to backend
$.ajax({
url: 'your_url',
type: 'POST',
data: data,
success: function(response) {
//do something on success
},
error: function(xhr) {
//Handle errors
}
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

Related

Modal needs to both verify fields are entered, and close upon clicking the submit button

I have a modal i'm working on that, for whatever reason, will either dismiss upon clicking submit without validating the form field inputs, or it will simply reload the form upon entering and never go away, preventing my webpage from then being seen. My idea is that this will show upon opening the webpage, the user is required to enter information into it, and then proceed to the rest of my webpage unhindered. My modal form code is as follows:
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="formModalLabel">Services Contact Form</h3>
<button type="button" class="close" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="formAwesome">
<div class="modal-body">
<div class="form-group row">
<label for="firstName" class="col-sm-6 col-form-label">
First name
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="firstName" placeholder="John" required>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-6 col-form-label">
Last name
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="lastName" placeholder="Doe" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-6 col-form-label">
E-mail address
</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" placeholder="john.doe#email.com" required>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="awesomeCheck">
<label class="form-check-label" for="awesomeCheck">
Yes, I consent to contact.
</label>
</div>
</div>
<div class="modal-footer">
<!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>
</div>
</div>
</div>
and this is my css:
<style>
#loading-img{
display:none;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
max-width:100%;
padding:3px;
display:none;
}
</style>
finally with this being my ajax query:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='your_name']").val() === '')
{
$("#contact-form [name='your_name']").css("border","1px solid red");
}
else if ($("#contact-form [name='your_email']").val() === '')
{
$("#contact-form [name='your_email']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_response.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}
});
}
});
$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</style>
Again, I would like to be able to have my modal form validated upon click submit and then to close without re-opening over and over(which is currently happening). So far I have tried the following:
$('#CompanyProfile').modal('hide');
then:
<button type="button" id="close_btn" class="close" data-dismiss="modal" aria-hidden="true">
<i class = "icons-office-52"></i>
</button>
$("#close_btn").trigger("click");
then:
$('#closemodal').click(function() {
$('#modalwindow').modal('hide');
});
and these all either JUST close the modal, or do not allow for the validation process to take place. If what i'm asking is not possible. I'd like to discuss alternatives.

Bootstrap Datepicker not Working on Server but works locally

My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?

Pass form data using Serialize() throwing empty values

I have a form when I click add button, it should pass the form data values to AJAX data. When I tried to use console.log the values are empty. I have tried both the Serialize() and FormData() methods. both showing empty values.
<div class="modal-content">
<div class="modal-header clearfix ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h4 class="modal-title p-b-5"><span class="semi-bold">Add Invoice Period</span></h4>
</div>
<br />
<div class="modal-body">
<form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>
<script>
function addPeriod() {
var form = document.querySelector('form');
//console.log($('form').serialize());
var formData = new FormData(form);
console.log(formData);
}
</script>

Your form fields should have a name attribute if you want them to show in the .serialize() method result, like :
<input id="startDate" type="date" class="form-control" name="start_date">
<input id="endDate" type="date" class="form-control" name="end_date">
function addPeriod() {
var form = document.querySelector('form');
console.log($('form').serialize());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-content">
<div class="modal-body">
<form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control" name="start_date">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control" name="end_date">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>

Your codes lacks of form action, input names and Ajax request.
function addPeriod() {
//It could be better to get form by id because there might be multiple forms in the page
var form = $('#invoiceForm');
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr('action'),//Or you can define the action endpoint manually
data: formData,
success: function( response ) {
console.log( response );
}
});
console.log(formData);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="modal-content">
<div class="modal-header clearfix ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h4 class="modal-title p-b-5"><span class="semi-bold">Add Invoice Period</span></h4>
</div>
<br />
<div class="modal-body">
<form role="form" id="invoiceForm" action="sample/sampleform" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control" name="startDate">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control" name="endDate">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>

How to get data from modal window?

I've a modal dialog.
<div id="myLoginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Войти в учетную запись</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-md-4 control-label" for="login">Логин</label>
<div class="col-md-4">
<input id="login" name="login" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="password">Пароль</label>
<div class="col-md-4">
<input id="password" name="password" type="password" class="form-control input-md" required="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="loginBttn" class="btn btn-success" data-dismiss="modal">Войти</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
</div>
</div>
</div>
...and have menu.php file.
<?php
$login = $_POST['login'];
$password = $_POST['password'];
echo $login.$password;
How can I get and load in div element user's login and password from modal dialog when he is pressing submit button?
I've tried to write that, but it's not working - exception "undefined index $login and $password".
$(document).ready(function() {
$("#loginBttn").click(function() {
$("#content").load('menu.php');
});
});

You can submit the form and use the success callback:
$(document).ready(function() {
$("#loginBttn").click(function() {
$.post('menu.php', $("#myLoginModal form").serialize(), function(html){
$('#content').html(html);
}, 'html')
});
});
EDIT: Also you can check https://api.jquery.com/jquery.post/

I've just used PHP Tools for VS and I did it!
The problem was the default settings for the php interpreter v7.1 !

trouble sending modal form contents to PHP file with AJAX and Jquery

I'm trying to learn how to submit form data to a PHP file from a bootstrap modal. From the other questions I've seen, I thought I had it right, but I keep getting the error dialog. I must be missing something obvious.
test.php
<html>
<body>
<div class="container padding-top-10 change-width">
<div class="row padding-top-20" align="center">
<button class="btn btn-warning btn-lg" data-toggle="modal" data-target="#bandModal">Add Band(s)</button>
</div>
</div>
<div id="thanks"></div>
<div class="modal fade" id="bandModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content modal-lg">
<!-- 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="bandModalLabel">
Add a Show
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body row">
<div class="container col-md-12">
<form id="addBandForm">
<h3>Band Details<small>Enter each band name and primary contact information...</small></h3>
<div class="well" id="newBandRows">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for "newBandName">Band Name:</label>
<input type="text" class="form-control" id="newBandName" name="newBandName" placeholder="Enter Band Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="primaryContact">Primary Contact:</label>
<input type="text" class="form-control" id="primaryContact" name="primaryContact" placeholder="Enter Name" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personEmail">Primary Email:</label>
<input type="email" class="form-control" id="primaryEmail" name="primaryEmail" placeholder="Enter Email" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for "personPhone">Primary Phone #:</label>
<input type="text" class="form-control" id="primaryPhone" name="primaryPhone" placeholder="Enter Phone #" />
</div>
</div>
</div>
</div>
<div id="newRowButton">
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-success pull-left" onClick="addNewBandRow();">+</button>
</div>
<div id="remover" class="col-md-1">
</div>
<div class="col-md-7">
</div>
<div class="col-md-3 padding-top-10">
<button id="addBandSubmit" class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</div>
<script src="js/newBand.js" type="text/javascript"></script>
</form>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>
Jquery
$(function() {
//twitter bootstrap script
$("#addBandSubmit").click(function() {
$.ajax({
type: "POST",
url: "womhScripts/addBand.php",
data: $('#addBandForm').serialize(),
success: function(msg) {
$("#thanks").html(msg)
$("#bandModal").modal('hide');
},
error: function(xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); alert(err.Message); }
});
});
});
addBand.php
<?php
if (isset($_POST['newBandName'])) {
$bandName = strip_tags($_POST['newBandName']);
$contact = strip_tags($_POST['primaryContact']);
$email = strip_tags($_POST['primaryEmail']);
$phone = strip_tags($_POST['primaryPhone']);
echo "bandName =".$bandName."</br>";
echo "contact =".$contact."</br>";
echo "email =".$email."</br>";
echo "phone =".$phone."</br>";
echo "<span class="label label-info" >your message has been submitted .. Thanks you</span>";
}?>

I looked through your code and found quite a few errors.
In your test.php change the Submit button from a button to an actual submit button.
<input id="addBandSubmit" type="submit" class="btn btn-primary pull-right">Submit</input>
In your Jquery
Add the preventDefault() function to stop the form from submitting to the same page.
$("#addBandForm").submit(function(event) {
event.preventDefault();
$.ajax({
url: "womhScripts/addBand.php",
type: "POST",
data: $('#addBandForm').serialize(),
success: function(msg) {
$("#thanks").html(msg);
$("#bandModal").modal('hide');
},
error:function(errMsg) {
console.log(errMsg);
}
});
});
You can read about what the preventDefault function here https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
In your addBand.php change the double quotes around your label label-info to single quotes. You cannot have double/single quotes inside double/single quotes inside php.
echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>";
Also it helps to use the console to see exactly what is being posted using the Network tab in Chrome or Firefox .
Please mark this as the answer if it works for you. Hope this helps.

Develop Reference

JavaScript is the programming language of the Web.

Multiple fields not validated inside modal that are dynamically generated - javascript

Related

Modal needs to both verify fields are entered, and close upon clicking the submit button

Bootstrap Datepicker not Working on Server but works locally

Pass form data using Serialize() throwing empty values

How to get data from modal window?

trouble sending modal form contents to PHP file with AJAX and Jquery

Categories

Resources