Validation of input on click submit button in a form - javascript

I am trying to validate my form, but the console never shows me errors. I have done what the Bootstrap documentation says and nothing happened. I want, for example, that when clicking on the button, if any field is empty, it shows an alert or error in that field. If someone can help me, I will be very grateful.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/e6233a0317.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/product.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/help.css">
<link rel="stylesheet" href="./css/tags.css">
<title>TejidosPulido E-Commerce</title>
</head>
<body>
<header id="header_menu"></header>
<br>
<main role="main">
<div class="container rounded" style="background-color: rgb(228, 225, 225);">
<br>
<form class="needs-validation" novalidate style="padding: 15px 40px;">
<div class="row">
<div class="col-sm-6" style="margin-bottom: 50px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="validationDefault01">Número de producto</span>
<input type="text" class="form-control" id="inputNum" style="text-align: end;" required>
<div class="invalid-feedback">Please choose a username.</div>
</div>
<div class="input-group" style="width: 100%;">
<span class="input-group-text title" for="inputNum">Visible</span>
<div class="input-group-text" style="background: white">
<span class="input-group-addon"><input type="radio" id="visible" name="visibilidad" value="always"> Si</span>
<span class="input-group-addon"><input type="radio" id="invisible" name="visibilidad" value="never"> No</span>
</div>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-4">
<span class="input-group-text title">Imagen de producto</span>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-6" style="margin-bottom: 15px;">
<div class="input-group mb-3">
<span class="input-group-text title" for="inputName">Nombre del producto</span>
<input type="text" class="form-control" id="inputName" required>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<div class="input-group mb-3">
<input type="file" class="form-control" id="inputImage" accept="image/*">
</div>
</div>
<div class="col-sm-1"></div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text precio title">Precio</span>
<input type="text" class="form-control" id="inputPrecio" placeholder='0.00' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">€/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<span class="input-group-text peso title">Peso</span>
<input type="text" class="form-control" id="inputPeso" placeholder='0' required style="float: left; text-align: end; width: 30%;" pattern="([0-9]*)(.)?([0-9]*)" title="Introduce un número.">
<span class="input-group-text short">gr/m</span>
</div>
<div class="invalid-feedback">Field empty.</div>
</div>
<div class="col-sm-4" style="vertical-align: middle; padding-bottom: 10px;">
<div class="input-group mb-3">
<label class="input-group-text tipo-large" for="product_type" style="background: #0bbe83; color: white; font-weight: bold;">Tipo de producto</label>
<select class="form-select" id="product_type">
<option selected>Selecciona...</option>
<option value="referencia">Referencia</option>
<option value="color">Color</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<span class="input-group-text title" for="inputDescripcion">Descripción:</span>
<textarea id="inputDescripcion" name="inputDescripcion" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
<div class="col-sm-6">
<span class="input-group-text title" for="inputFunciones">Funciones bàsicas:</span>
<textarea id="inputFunciones" name="inputFunciones" rows="5" style="width: 100%; padding: 10px;"></textarea>
</div>
</div>
<br>
<div class="btn-group" role="group" style="float:right">
<button class="btn btn-dark" id="guardarButton" type="submit" class="btn btn-sm btn-outline-secondary">Guardar </button>
</div>
<br>
<br>
<br>
</form>
</div>
<hr class="featurette-divider">
<footer class="container" id= "footer"></footer>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.3/firebase-storage.js"></script>
<script src='./js/firebaseConfig.js'></script>
<script src="./js/session.js"></script>
<script src="./js/header.js"></script>
<script src="./js/newproducto.js"></script>
<script src="./js/footer.js"></script>
</body>
</html>
This is the javascript function:
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()

Span for and input id should be the same.
In your case error is actually detecting but not able to assign to the correct id w.r.t for

"I am trying to validate my form, but the console never shows me
errors"
The console shouldn't show errors because the code is working as expected.
Most likely there's a conflict with one of the many other JS files included in your environment. Also the HTML is poorly is structured (2 class attributes on the button) and the invalid-feedback needs to be in the same parent as the inputs.

Related

How to enable invisible ReCAPTCHA on checkbox onclick

I am struggling with an recaptcha issue on my local. I am trying to build a register form. All examples about recaptcha are about buttons. What I want is to pop-up recaptcha modal to user when he/she clicks on checkbox which says ' I have read and accept terms and conditions.' When he/she solves recaptcha then checkbox would be checked. Here what I am trying
It did not work, after that I tried this onClick method did not work because it writes Script Error on console.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function controlFunction() {
grecaptcha.render()
}
</script>
</head>
<body>
<div id='checkbox-form' action="?" method="POST">
<input onclick="controlFunction()" type="checkbox" class="g-recaptcha" data-sitekey="MY_LOCAL_KEY" data-callback='onClick' id="termsConditions" class="termsOkay">
<label for="termsConditions" generated="true">I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
<br/>
</div>
</body>
</html>
I know code is a mess because I tried so many different thing and this is what I got. I am really confused. All I want is if user checks the checkbox let captcha popup. When solved, checkbox is checked. How can I do it? I tried to use handleChange but could not make it either.
Here is my whole code:
<?php
// Google reCaptcha secret key
$secretKey = "REMOVEDCONTENTBYME";
$statusMsg = '';
if(isset($_POST['submit'])){
if(isset($_POST['captcha-response']) && !empty($_POST['captcha-response'])){
// Get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['captcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success){
//Contact form submission code goes here ...
$statusMsg = 'Your contact request have submitted successfully.';
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}else{
$statusMsg = 'Robot verification failed, please try again.';
}
}
?>
<?php $businessTypes = [
'Full Service',
'Quick Service',
'Bars and Clubs',
]; ?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="https://use.typekit.net/fom8rbw.css">
<link rel="stylesheet" href="/wp-content/themes/thegem/css/main.css">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
<script>
var onloadCallback = function() {
grecaptcha.execute();
};
function setResponse(response) {
document.getElementById('captcha-response').value = response;
}
</script>
<?php wp_head(); ?>
<style>
html, body, .site-content {
padding: 0 !important;
margin: 0 !important;
background-color:#fff;
}
.textwidget a {
font-family: 'proxima-nova',sans-serif !important;
}
.d-none {
display: none !important;
}
.section{
background-color: #ffffff;
}
.demo-form input, .demo-form select, .demo-form textarea {
border: 1px solid #e31d93;
}
.demo-form input {
text-indent: 12px;
}
.form-control {
display: block;
width: 100%;
height: calc(1.5em + 1.3rem + 2px);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .40rem;
}
.row-m-t{
margin-top : 0px
}
</style>
<div id="page" class="site">
<div id="content" class="site-content">
<div id="primary" class="content-area demo-form">
<main id="main" class="site-main">
<div class="section blog-content">
<div class="container">
<div class="text-center"><h1 style="padding-bottom: 10rem;">Request FOrm</h1></div>
<div class="row justify-content-md-center">
<div class="col-md-6">
<form class="demo-form" method="post" onsubmit="return false" style=" position: relative; bottom: 35px; ">
<div class="row">
<div class="col-md-6 border-danger form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="firstName" placeholder="First name" style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="lastName" placeholder="Last name"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validateText" name="companyName" placeholder="Group name"style=" background-color: #fff;">
</div>
<div class="col-md-6 form-group">
<input type="text" class="form-control validate" data-validate="validatePhone" name="phoneNumber" placeholder="Phone number"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<input type="text" class="form-control validate" data-validate="validateEmail" name="emailAddress" placeholder="email"style=" background-color: #fff;">
</div>
</div>
<div class="row row-m-t">
<div class="col-md-12 form-group">
<select name="businessType" id="businessType" class="form-control validate" data-validate="validateText">
<option value=""><?php _e('Select Your Business Type...', 'myfirm'); ?></option>
<?php foreach ($businessTypes as $type): ?>
<option><?php _e($type, 'myfirm'); ?></option>
<?php endforeach ;?>
</select>
</div>
</div>
<div class="row radio">
<div class="col-md-6">
<p style="font-size:13px;"><?php _e('Validate by', 'myfirm'); ?>:</p>
</div>
</div>
<div class="row radio" style="font-size:13px;">
<div class="col-md-8">
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByPhone" checked value="phoneNumber" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem;" class="custom-control-label" for="validateByPhone"><?php _e('Phone Number', 'myfirm'); ?></label>
</div>
<div class="custom-control custom-radio custom-control-inline col-md-6">
<input type="radio" id="validateByEmailAddess" value="emailAddress" name="validateBy" class="custom-control-input">
<label style="font-size:12px; transform: scale(1.2);
position: relative;
left: 1rem; top:5px;" class="custom-control-label" for="validateByEmailAddess"><?php _e('Email Address', 'myfirm'); ?></label>
</div>
</div>
</div>
<br>
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>
<div class="verification-code d-none">
<div class="col">
<label for="verification-code"><?php _e('A verification code has been sent to your phone number!', 'myfirm') ?></label>
<input type="text" class="form-control" name="code" placeholder="<?php _e('Verification code', 'myfirm');?>">
</div>
</div>
<div class="row row-m-t">
<div class="col">
<button class="btn btn-myfirm send-verification-code" disabled="disabled" style="width: 100% !important;height: 125% !important;font-size: 15px;"><?php _e('Request a Demo', 'myfirm'); ?></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
function admSelectCheck(obj)
{
var nameSelect = obj.value;
console.log(nameSelect);
if(nameSelect){
admOptionValue = 'United States of America|+1';
if(admOptionValue == nameSelect){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "block";
}
}
</script>
<script>
jQuery(function() {
jQuery('input.termsOkay').change(function() {
if (!jQuery('input.termsOkay').is(':checked')) {
jQuery('.send-verification-code').prop('disabled', true)
} else{
jQuery('.send-verification-code').prop('disabled', false)
}
})
})
</script>
</html>
The part I am trying to make it work
<div class="row radio">
<div class="col-md-12" style="position: relative;right: 13px;">
<div class="custom-radio custom-control-inline col-md-12">
<div class="g-recaptcha" data-sitekey="REMOVEDCONTENTBYME" data-badge="inline" data-size="invisible" data-callback="setResponse"></div>
<input type="hidden" id="captcha-response" name="captcha-response" />
<input type="checkbox" id="captcha-response" class="termsOkay" style=" background-color: #fff;">
<label for="captcha-response" class="error" generated="true" style="position: relative;bottom: 5px;"> I have read and accepted <a target="_blank" href="/sales-terms-and-conditions/">Terms and Conditions</a> </label>
</div>
</div>
</div>

Javascript Null Error with LiveValidation

I have been trying to troubleshoot this error with the form submission. I am using the Livevalidation library in order to validate the email address field. Something isn't connecting properly to the library as I get this error in dev tools console. The library isnt getting called in under to validate the form field. Any help would be greatly appreciated.
ERROR:
Uncaught TypeError: Cannot read property 'form' of null
at LiveValidation.initialize (livevalidation_standalone.compressed.js:5)
at new LiveValidation (livevalidation_standalone.compressed.js:5)
at <anonymous>:2:13
at api.min.js:2
at Module.S (api.min.js:2)
at t.inlineScripts (api.min.js:2)
at api.min.js:2
HTML:
<form method="post" name="Camp-2021-05-Aware-ParkNeedsUs-FRM-Lightbox" action="https://s989596683.t.eloqua.com/e/f2" onsubmit="return handleFormSubmit(this)" id="form210" class="elq-form">
<input value="Camp-2021-05-Aware-ParkNeedsUs-FRM-Lightbox" type="hidden" name="elqFormName" />
<input value="989596683" type="hidden" name="elqSiteId" />
<input name="elqCampaignId" type="hidden" />
<div class="layout container-fluid">
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement0" class="elq-field-style form-element-layout row">
<!--div style="text-align:left;" class="col-sm-12 col-xs-12">
<label class="elq-label " for="fe2045">Email Address
</label>
</div-->
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="field-control-wrapper" style="width: 65%; margin-left: auto; margin-right: auto;">
<input
type="text"
class="elq-item-input"
name="emailAddress"
id="f20"
style="width: 100%; font-size: 14px; color: #828282;"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue"
value="Email Address"
maxlength="50"
/>
<script type="text/javascript">
var f20 = window.document.getElementById("f20");
</script>
<script type="text/javascript">
var f20 = new LiveValidation("email");
f20.add(Validate.Email);
</script>
<script type="text/javascript">
var title = new LiveValidation("title", { onlyOnSubmit: true });
title.add(Validate.Email);
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="grid-layout-col">
<div class="layout-col col-sm-12 col-xs-12">
<div id="formElement1" class="elq-field-style form-element-layout row">
<div class="col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-12">
<div align="center">
<input type="Submit" class="submit-button-style" value="Submit" id="fe2046" style="margin-top: 8px; background-color: #286140; padding: 12px; border: none; width: 65%; color: white;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="https://img04.en25.com/i/livevalidation_standalone.compressed.js"></script>

Input file no overriding file but append

I have this form with a some input text and one of an input multiple file. The problem is that when loading another file after loading one or more files, the previously loaded files are overwritten by the last loaded.
This is the code for the form and the jquery code for the ajax call to the php file for manipulate the form data.
$('form#formNewChallenge').submit(function(e){
$('#loaderDiv').removeClass('hidden-div');
e.preventDefault();
var form_data = new FormData(this);
$.ajax({
type: 'post',
url: './function/insert_challenge.php',
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (answ) {
let json = $.parseJSON(answ);
var title_max = 60;
var text_max = 90;
if(json == "TUTTO OK"){
$('#loaderDiv').addClass('hidden-div');
$('#alertNewChallenge').removeClass('hidden-div').addClass('alert-success').text('Grazie per aver inserito la challenge').show(0).delay(5000).hide(0);
$("#formNewChallenge").trigger("reset");
$('#inputTag').tagsinput('removeAll');
$('#uploadDoc').next('.custom-file-label').html("Carica documentazione");
$('#uploadPhoto').next('.custom-file-label').html("Carica una foto");
$('#count_title').html('0' + ' / ' + title_max);
$('#count_short_description').html('0' + ' / ' + text_max);
// $("#formNewChallenge")[0].reset();
//$('#uploadPhoto').val("");
// $('#uploadDoc').val('');
// $('#inputTag').val('');
$("div.has-success").removeClass('has-success');
$("input.form-control-success").removeClass('form-control-success');
location.reload();
}
else{
$('#loaderDiv').addClass('hidden-div');
$('#alertNewChallenge').removeClass('hidden-div').addClass('alert-danger').text(json).show(0).delay(5000).hide(0);
}
}
})
});
$('#uploadDoc').on('change', function () {
var fileName = [];
fileName = $(this).val();
const numFiles = $(this)[0].files.length;
if(numFiles == 1)
$(this).next('.custom-file-label').html(fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length));
else
$(this).next('.custom-file-label').html(numFiles + ' files caricati');
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<form action="" id="formNewChallenge" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="col-sm-12" style="padding-top: 15px;">
<div class="form-group">
<input onchange="checkTitle(this);" type="text" id="inputName" name="nome" class="form-control" placeholder="Nome Challenge">
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 32px;" id="count_title"></span>
</div>
</div>
<div class="col-sm-12 well">
<div class="form-group">
<textarea onchange="checkTitle(this);" id="inputShortDescription" rows="6" name="shortDescription" class="form-control" placeholder="Breve descrizione"
style="resize: none;"></textarea>
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 12px;" id="count_short_description"></span>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<textarea onchange="checkTitle(this);" id="inputLongDescription" rows="9" class="form-control" placeholder="Descrizione" style="resize: none;" name="longDescription"
></textarea>
<span class="float-right " style="color: #999999; padding-bottom: 20px; margin-top: -30px; margin-right: 12px;" id="count_long_description"></span>
</div>
</div>
<div id="tipoMontepremi" class="col-sm-12">
<div class="form-group">
<!-- <input type="number" id="inputMontepremi" name="montepremi" class="form-control" placeholder="Montepremi" min="1"> -->
<select id="selectType" name="selectType" class="form-control" style="text-align-last:center;" onchange="changePrize();">
<option value="default" name="default" selected="">Montepremi</option>
<option value="stage" name="stage">Stage</option>
<option value="compenso" name="compenso">Compenso Monetario</option>
<option value="lavoro" name="lavoro">Offerta di Lavoro</option>
</select>
</div>
</div>
<div id="divInputMontepremi" class="col-sm-6 hidden-div">
<div class="form-group">
<input style="padding-left:20px; text-align:left;" type="number" id="inputMontepremi" name="montepremi" class="form-control" placeholder="Montepremi">
</div>
</div>
<!-- <div class="col-sm-6">
<div class="form-group">
<input type="text" placeholder="Prima Scadenza" class="form-control" id="primaScadenza" name="fine_primo_termine"
onfocus="(this.type='date')">
</div>
</div> -->
<div class="col-sm-12">
<div class="form-group">
<input style="text-indent: 10px;" type="text" placeholder="Termine" data-provide="datepicker" class="datepicker form-control" id="termine" name="data_scadenza">
</div>
<!-- <div class="input-group date" data-provide="datepicker">
<input placeholder="Termine" type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div> -->
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="custom-file">
<input type="file" name="foto" class="custom-file-input" id="uploadPhoto" accept=".png, .jpg, .jpeg">
<label class="custom-file-label" for="uploadPhoto">Carica una foto</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="files[]" id="uploadDoc" multiple >
<label class="custom-file-label" for="uploadDoc">Carica documentazione</label>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input id="inputTag" name="microcategorie" type="text" class="form-control" value="" placeholder="Tags " data-placeholder="Tags " data-role="tagsinput">
</div>
</div>
<!-- ANONIMATO -->
<div class="col-sm-12" style="padding-top: 20px">
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="anonymous" id="anonymous">
<label class="form-check-label" for="anonymous">Desidero pubblicare in anonimato</label>
</div>
</div>
<div class="col-sm-12" style="padding-top: 20px">
<div class="form-group">
<span style="font-weight: bold;">NOTA: </span>Ti consigliamo un'immagine alta 185px e larga 350px
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div id="alertNewChallenge" class="alert hidden-div"></div>
</div>
</div>
<!-- <div class="row text-center"> -->
<div id="loaderDiv" class="col-sm-12 text-center hidden-div">
</div>
<!-- </div> -->
<!-- <div class="col-sm-12">
<div id="divProgress" class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="background-color: #5cb85c; width:90%">90%</div>
</div>
</div> -->
<div class="col-md-12 text-center" style="padding-bottom: 40px;">
<button style="margin-top: 30px;" id="insertNewChallenge" class="btn btn-primary contact text-center" type="submit">PUBBLICA</button>
</div>
</div>
</div>
</form>

Bootstrap modal not hiding (ASP.NE MVC)

I have bootstrap modal with some inputs and button.
Here is code
<div class="modal fade" id="myModal2" role="dialog" data-backdrop="false">
<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">Добавить получателя</h4>
</div>
<div class="modal-body">
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="email2" ,="" placeholder="Email">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="name2" ,="" placeholder="Ф.И.О">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="telephone2" ,="" placeholder="Телефон">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="profession2" ,="" placeholder="Ваша профессия">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="Comment2" ,="" placeholder="Комментарий">
</div>
<div class="form-group" style="text-align:center">
<input type="button" id="send_mail2" value="Отправить" class="btn btn-default" style="margin-right: 40px;">
</div>
</div>
</div>
</div>
</div>
When I click button, script send AJAX request and on back end method send email to recipient.
Here is JS script:
<script>
$(document).ready(function () {
$('#send_mail2').click(function () {
send_email2();
});
});
function send_email2() {
$.ajax({
type: 'Post',
dataType: 'Json',
data: {
From2: $('#email2').val(),
Name2: $('#name2').val(),
Telephone2: $('#telephone2').val(),
Profession2: $('#profession2').val(),
Comment2: $('#Comment2').val(),
},
url: '#Url.Action("SendEmail2", "Home")',
success: function (da) {
if (da.Result === "Success") {
alert("Sucess");
//$("#myModalDoctors").modal();
$("#myModal2").modal("hide");
} else {
alert('Error' + da.Message);
}
},
error: function (da) {
alert('Error');
}
});
}
With back-end all okay and alert is working. But modal is not hiding . Where can be trouble?
I tried also $("#myModal2").modal('hide'); and it not works too.
Here is the code and it's working. Probably your ajax call is not firing success callback.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Fullscreen backgrounds with centered content">
</head>
<body>
<button type="button" data-toggle="modal" data-target="#myModal2">Open Modal</button>
<div class="modal fade" id="myModal2" role="dialog" data-backdrop="false">
<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">Добавить получателя</h4>
</div>
<div class="modal-body">
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="email2" ,="" placeholder="Email">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="name2" ,="" placeholder="Ф.И.О">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="telephone2" ,="" placeholder="Телефон">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="profession2" ,="" placeholder="Ваша профессия">
</div>
<div class="form-group" style="text-align:center;padding-bottom: 20px; padding-top: 10px;">
<input type="text" class="form-control" id="Comment2" ,="" placeholder="Комментарий">
</div>
<div class="form-group" style="text-align:center">
<input type="button" id="send_mail2" value="Отправить" class="btn btn-default" style="margin-right: 40px;">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#send_mail2').click(function() {
$("#myModal2").modal("hide");
});
});
</script>
</body>
</html>

Div over canvas [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is my login page I want to place my login-box over canvas now first show canvas and then show the div i want login-box div over this canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> </head> <body class="login-page"> <canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas> <div class="login-box" > <div class="login-box-body"> <form action="" method="post" name="login"> <div class="form-group has-feedback "> <input type="text" class="form-control" placeholder="Username / Email" required name="login_name"/> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="Password" name="login_pass"required/> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-4"> <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div> </div> </form> </div> </div> <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="plugins/magnificpopup/plugins.js"></script> </body> </html>
Following way you can put put over canvas using position:absolute;
#header-canvas {
height: 500px;
width: 100%;
}
.login-box {
background: #fff none repeat scroll 0 0;
left: 50%;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="header-canvas" style="background-color:#999"> <header id="header" > </header> </canvas>
<div class="login-box" > <div class="login-box-body">
<form action="" method="post" name="login">
<div class="form-group has-feedback ">
<input type="text" class="form-control" placeholder="Username / Email" required name="login_name"/>
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name="login_pass"required/>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row"> <div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button> </div>
</div>
</form>
</div>
</div>
Working Fiddle

Categories