Bootstrap modal not hiding (ASP.NE MVC) - javascript

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>

Related

Validation of input on click submit button in a form

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.

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>

Modal need to be validated after validation it should move to another modal

In this code I need to validate modal after validation it should move to another modal
In jquery I have validated after successfully validated the data-target have been added in jquery code,but it does not working properly
fiddle link for the detailed view
after entering the values there is problem in jquery part because the email and text box have been validated
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<button class="main" data-toggle="modal" data-target="#myModalnew" data-dismiss="modal">Check</button>
<div class="modal_main">
<div class="modal fade" id="myModalnew" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Heading</h2>
<h4>Details</h4>
</div>
<div class="modal-body border">
<form id="contact" method="POST">
<fieldset>
<div class="input-group email">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group name">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="tab-content">
<div id="criteria_ship" class="tab-pane fade in active">
<div class="input-group address">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input id="address" type="text" class="form-control" placeholder="Street">
</div>
<div class="input-group town">
<input type="text" class="form-control" id="city" placeholder="City">
<input type="text" class="form-control" id="postcode" placeholder="Postcode">
</div>
<div class="paybutton">
<input type="submit" class="but_key but_link" id="pay" value="Payment" data-toggle="modal" data-target="#" data-dismiss=""
>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModalnew1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<
<h2 class="modal-title">getsmartnet.com</h2>
<h4>Smartnet's Payment</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="main_card">
<div class="input-group card">
<span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
<input id="card" type="text" class="form-control" placeholder="Card Number">
</div>
<div>
<div class="input-group date">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" class="form-control" id="expiry" placeholder="MM/YY">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" id="code" placeholder="CVC">
</div>
</div>
<div class="input-group check_rem">
<input type="checkbox" id="rem_check"> Remember Me
</div>
<fieldset id="main_rem">
<div class="input-group forgot"id="check_mobile">
<div class="input-group">
<span>For security, please enter your <strong><span>mobile phone number</span></strong>
</span>
</div>
<div class="input-group mob_rem">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="tel" class="form-control" id="mob_num">
</div>
</div>
</fieldset>
<fieldset>
<div class="but_link">
Pay
</div>
</fieldset>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
var name = $( "#name" ),
password = $( "#password" ),
street=$("#street"),
city=$("#city"),
pin=$("#postcode");
$('#pay').click(function(e) {
var isValid = true;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red"
});
isValid = false;
}
else {
$(this).css({
"border": "",
"background": ""
});
isValid = true;
}
});
var email = $( "#email" ).val();
var check_em=false;
if ($.trim(email).length == 0) {
$("#email").css({
"border": "1px solid red"
});
check_em=false;
e.preventDefault();
}
else if (validateEmail(email)) {
$("#email").css({
"border": "",
"background": ""
});
check_em=true;
}
else {
$("#email").css({
"border": "1px solid red"
});
check_em=false;
e.preventDefault();
}
if(check_em==true && isValid==true){
alert("final");
$(this).attr('data-dismiss',"modal");
$(this).attr('data-target',"#myModalnew1");
}
});
});
function validateEmail(email) {
var filter = /^[a-zA-Z0-9]+#[a-zA-Z0-9]+.[a-z]{2,4}$/;
var res_tes=filter.test(email)
console.log(res_tes);
if (res_tes==true) {
return true;
}
else {
return false;
}
}
</script>
</body>
</html>

Your isValid was remaining false even after the validation was successful, so if(check_em==true && isValid==true) this was never true, and next modal was never triggered.
Here I fixed those issues, now it works
$(document).ready(function() {
var name = $("#name"),
password = $("#password"),
street = $("#street"),
city = $("#city"),
pin = $("#postcode");
$('#pay').click(function(e) {
//prevent form submission to server
e.preventDefault();
//set it to false initially
var isValid = false;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) === '') {
$(this).css({
"border": "1px solid red"
});
} else {
$(this).css({
"border": "",
"background": ""
});
// set it to true, only if it's valid
isValid = true;
}
});
var email = $("#email").val();
var check_em = false;
if ($.trim(email).length === 0) {
$("#email").css({
"border": "1px solid red"
});
check_em = false;
e.preventDefault();
} else if (validateEmail(email)) {
$("#email").css({
"border": "",
"background": ""
});
check_em = true;
} else {
$("#email").css({
"border": "1px solid red"
});
check_em = false;
e.preventDefault();
}
if (check_em && isValid) {
$(this).attr('data-dismiss', "modal");
$(this).attr('data-target', "#myModalnew1");
}
});
});
function validateEmail(email) {
var filter = /^[a-zA-Z0-9]+#[a-zA-Z0-9]+.[a-z]{2,4}$/;
return filter.test(email);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="btn btn-primary main" data-toggle="modal" data-target="#myModalnew" data-dismiss="modal">Check</button>
<div class="modal_main">
<div class="modal fade" id="myModalnew" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Heading</h2>
<h4>Details</h4>
</div>
<div class="modal-body border">
<form id="contact" method="POST">
<fieldset>
<div class="input-group email">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input id="email" type="email" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group name">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="name" type="text" class="form-control" placeholder="Name">
</div>
<div class="tab-content">
<div id="criteria_ship" class="tab-pane fade in active">
<div class="input-group address">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input id="address" type="text" class="form-control" placeholder="Street">
</div>
<div class="input-group town">
<input type="text" class="form-control" id="city" placeholder="City">
<input type="text" class="form-control" id="postcode" placeholder="Postcode">
</div>
<div class="paybutton">
<input type="submit" class="but_key but_link" id="pay" value="Payment" data-toggle="modal" data-target="#" data-dismiss=""
>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModalnew1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">getsmartnet.com</h2>
<h4>Smartnet's Payment</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="main_card">
<div class="input-group card">
<span class="input-group-addon"><i class="glyphicon glyphicon-credit-card"></i></span>
<input id="card" type="text" class="form-control" placeholder="Card Number">
</div>
<div>
<div class="input-group date">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" class="form-control" id="expiry" placeholder="MM/YY">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" class="form-control" id="code" placeholder="CVC">
</div>
</div>
<div class="input-group check_rem">
<input type="checkbox" id="rem_check"> Remember Me
</div>
<fieldset id="main_rem">
<div class="input-group forgot"id="check_mobile">
<div class="input-group">
<span>For security, please enter your <strong><span>mobile phone number</span></strong>
</span>
</div>
<div class="input-group mob_rem">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
<input type="tel" class="form-control" id="mob_num">
</div>
</div>
</fieldset>
<fieldset>
<div class="but_link">
Pay
</div>
</fieldset>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Error on calling parse.com cloud code from browser

I'm trying to call from a browser with Javascript to Parse.com CloudCode. But, when I call it, JS sends me back an error like:
Object {code: -1, message: ""};
Any idea?
This is my code:
$(function() {
Parse.$ = jQuery;
Parse.initialize("XX", "XX");
$('.form-horizontal').on('submit', function(e) {
var enrll = document.getElementById("enNum").value;
var keyNum = document.getElementById("key").value;
Parse.Cloud.run("GetMonth", {
enrollmentNbr: enrll,
key: keyNum,
month: ""
}, {
success: function(result) {
document.getElementById("comment").value = result;
},
error: function(e) {
//error
console.log(e);
}
});
});
});
.container {
margin-left: auto;
margin-right: auto;
width: 700px;
}
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
.textarea {
margin-left: 230px;
margin-right: 230px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="container">
<h2>Add your key and your Enrollment number</h2>
<div class="modal-content">
<div class="modal-header" >
<h4><span class="glyphicon glyphicon-lock"></span> Credentials</h4>
</div>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Enrollment number:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="enNum" placeholder="Enrollment number">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Access Key:</label>
<div class="col-sm-10">
<input type="text"class="form-control" id="key" placeholder="EA Access Key">
</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">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="form-group">
<label for="comment">csv</label>
<textarea class="form-control" rows="1000" id="comment" ></textarea>
</div>
https://jsfiddle.net/74dn34L7/
I know I don't arrive to Parse because the logs are not raised.
Thanks a lot.

Categories