I am trying to build a user registration form. I am using a JS plugin to get the phone number in international format. But I have failed to find out how can I then add that variable to the DTO. below is my code
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--International phone input field-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<!-- Bootstrap CSS -->
<link th:rel="stylesheet" th:href="#{/webjars/bootstrap/5.1.1/css/bootstrap.min.css} "/>
<!-- font awesome-->
<link th:rel="stylesheet" th:href="#{/webjars/font-awesome/5.15.4/css/all.css} "/>
<!-- local css file-->
<link href="/static/css/register_login.css" rel="stylesheet" th:href="#{/css/register_login.css}"/>
<title>Easy Notifications App</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-9 mx-auto">
<div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
<div class="card-img-left d-none d-md-flex">
<!-- Background image for card set in CSS! -->
</div>
<div class="card-body p-4 p-sm-5">
<h5 class="card-title text-center mb-5 fw-light fs-5">Register</h5>
<form id="login" onsubmit="process(event)" action="#" th:action="#{/register}"
th:object="${registerDto}"
method="post">
<div class="form-floating mb-3">
<input type="tel" class="form-control" id="tel"
th:field="*{mobileNumber}" placeholder="Mobile Number">
<label for="tel"></label>
</div>
<div class="d-grid mb-2">
<button class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit">
Register
</button>
</div>
</form>
<div class = "alert alert-info" style = "display: none;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
// Initialize the phone plugin
const phoneInputField = document.querySelector("#tel");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
const info = document.querySelector(".alert-info");
function process(event) {
event.preventDefault();
const phoneNumber = phoneInput.getNumber();
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`;
}
</script>
</html>
I want to have in my dto i.e. th:field. Right now my form is not submitting probably because of onsubmit="process(event)". Any help is appreciated.
Related
I have designed a program that takes user input number then outputs the qr code but the problem is that I want that input number to be in a syntax like this #14411*user number#. Could anyone help me, please
This the index.php file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<title>Send Email Example</title>
<style>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Générer Code QR</h5>
<form id="generateQrForm" class="form-signin">
<div class="form-label-group">
<label for="inputEmail">Numéro pour QR <span style="color: #FF0000">*</span></label>
<input type="text" name="qrText" id="qrText" class="form-control" required placeholder="Entrez votre
numéro pour générer QR code">
</div> <br/>
<div id="generatedQr text-center">
<img src="" id="generatedQrImg" class="center-block">
</div> <br/>
<button type="submit" name="generateQrBtn" id="generateQrBtn" class="btn btn-lg btn-primary btn-block
text-uppercase" >Générer QR</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="generate-qr-js.js"></script>
</body>
</html>
This is the generate-qr-script.php file
<?php
include "library/qrlib.php";
if (isset($_POST['generateQr']) == 'generateQr')
{
$qrText = $_POST['qrText']; // receive the text for QR
$directory = "generated-qr/"; // folder where to store QR
$fileName = 'QR-'.rand().'.png'; // generate random name of QR image
QRcode::png($qrText, $directory.$fileName, 'L', 4, 2); // library function to generate QR
echo "success^".$directory.$fileName; // returns the qr-image path
}
In your 'generate-qr-script.php' file, make the following change:
Change this:
$qrText = $_POST['qrText'];
To this:
$qrText = "#14411*" . $_POST['qrText'] . "#";
I would like to automate the process of logging to a webpage everyday.
First I want the process of entering and submitting my credentials automatically working correctly and then I'll see how I can make it run periodically with cron jobs or something like that.
Here is the source code of the page I want to login to : (https://customer.sunvalleytek.com/login)
<html lang="en"><head>
<title>Sunvalley - Your Login | RAVPower, TaoTronics, HooToo, VAVA</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--
<meta http-equiv="Cache-Control" content="no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async="" src="//www.googletagmanager.com/gtm.js?id=GTM-KC4S8Q"></script><script type="text/javascript">
var ctxPath = '';
var brand = 'RAVPower';
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="/css/styles.css?v=1.0">
<script src="/js/jquery-1.12.1.min.js"></script>
<script src="/js/bootstrap/bootstrap.min.js"></script>
<script src="/js/bootstrap/bootstrapValidator.js"></script>
<script src="/js/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="/js/util.js"></script>
<script src="/js/jquery.blockUI.js"></script>
<script src="/js/i18n/front-lang-en.js"></script>
<script src="/js/front-base.js"></script>
<script src="/js/common.js"></script>
<link href="/images/favicon.ico" type="image/x-icon" rel="icon">
<link href="/images/favicon.ico" type="image/x-icon" rel="Shortcut Icon"><!--地址栏和标签上显示图标-->
<link href="/images/favicon.ico" type="image/x-icon" rel="Bookmark"><!--收藏夹显示图标-->
<script type="text/javascript">
var pageValidate = {
fields:{
email: {
validators:{
notEmpty: {
message: bootstrapValidatorMsg.required
},
emailAddress: {
message: bootstrapValidatorMsg.email
}
}
},
password: {
validators:{
notEmpty: {
message: bootstrapValidatorMsg.required
}
}
}
}
};
var login = {
forms:[{
id:'loginForm',
submit:true,
url: '/noaccount/login',
validate:pageValidate,
confirmFn:function(rtmsg){
var opt;
if(rtmsg.SUCCESS){
if(rtmsg.backto){
window.location.href = ctxPath + rtmsg.backto;
}else{
window.location.href = ctxPath + "/account/welcome";
}
}else{
$('#boxModalTitle').html(PromptMsg.prompt);
$('#boxModalBody').html(rtmsg.MESSAGE);
opt = function () {
};
$('#boxModal').modal('show');
$('#boxModal').on('hide.bs.modal', opt);
}
}
}]
};
var pageValidateResetPwd = {
fields:{
accountEmail: {
validators:{
/*notEmpty: {
message: bootstrapValidatorMsg.required
},
emailAddress: {
message: bootstrapValidatorMsg.email
}*/
}
}
}
};
var resetPwd = {
forms:[{
id:'resetPwdForm',
submit:true,
url: '/noaccount/password/reset',
validate:pageValidateResetPwd,
confirmFn:function(rtmsg){
var opt;
if(rtmsg.SUCCESS){
$('#forgetPasswordModel').modal('hide');
$('#boxModalTitle').html(PromptMsg.prompt);
opt = function () {
};
$('#boxModalBody').html(rtmsg.MESSAGE);
$('#boxModal').modal('show');
$('#boxModal').on('hide.bs.modal', opt);
}else{
$('#msgTip').text(rtmsg.MESSAGE);
$('#msgTip').show();
}
},
beforeSendFn:function(){
$('#msgTip').text("");
}
}]
};
$().ready(function(){
bootValidate(login.forms);
bootValidate(resetPwd.forms);
});
</script>
</head>
<body>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-KC4S8Q"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KC4S8Q');</script>
<!-- End Google Tag Manager -->
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 login margin-t1">
<div class="logo">
<img src="/images/login-logo.png" class="img-responsive center-block">
</div>
<form role="form" id="loginForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<input type="hidden" name="brandId" id="brandId" value="1">
<input type="hidden" name="preUrl" value="null">
<input type="hidden" name="backto" value="">
<h5>Your session has time out, please log in again.</h5>
<!-- email -->
<div class="form-group has-feedback">
<label class="control-label">Email :</label>
<input type="text" id="email" name="email" autocomplete="off" autofocus="autofocus" class="form-control" placeholder="enter your e-mail" data-bv-field="email"><i class="form-control-feedback" data-bv-icon-for="email" style="display: none;"></i>
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="email" data-bv-result="NOT_VALIDATED" style="display: none;">This field is required.</small><small class="help-block" data-bv-validator="emailAddress" data-bv-for="email" data-bv-result="NOT_VALIDATED" style="display: none;">Invalid Email Address</small></div>
<!-- end email -->
<!-- password -->
<div class="form-group has-feedback">
<label class="control-label">Password :</label>
<input type="password" id="password" name="password" autocomplete="off" class="form-control" placeholder="confirm password" data-bv-field="password"><i class="form-control-feedback" data-bv-icon-for="password" style="display: none;"></i>
<a class="pull-right forget" href="#" data-toggle="modal" data-target="#forgetPasswordModel">Forget password</a>
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="password" data-bv-result="NOT_VALIDATED" style="display: none;">This field is required.</small></div>
<!-- end password -->
<!-- sign -->
<div class="form-group text-center">
<button type="submit" class="btn blue-bg" data-toggle="modal">SIGN IN</button>
<a class="btn blue-bg" href="/noaccount/register/init?backto=&utm_source=&utm_medium=&utm_campaign=">Register Now</a>
</div>
<!-- end sign -->
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="forgetPasswordModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Forget your password?</h4>
</div>
<div class="modal-body">
<p class="text-center">Please enter your email address below. Your will receive a link to reset your password.</p>
<form role="form" id="resetPwdForm" method="post" class="form-horizontal bv-form" novalidate="novalidate"><button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
<div class="form-group has-feedback">
<span id="msgTip" class="col-md-5 col-md-offset-3 col-sm-6 col-xs-9 red-color"></span>
<span class="col-md-5 col-md-offset-3 col-sm-6 col-xs-9">
<input type="text" class="form-control" id="accountEmail" name="accountEmail" autocomplete="off" placeholder="user#domain.com" data-bv-field="accountEmail"><i class="form-control-feedback bv-no-label" data-bv-icon-for="accountEmail" style="display: none;"></i>
</span>
<span class="col-md-2 col-sm-2 col-xs-3">
<button type="submit" class="btn org-bg">Submit</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END modal -->
<!-- modal box start-->
<div class="profile-modal">
<div class="modal fade" id="boxModal" tabindex="-1" role="dialog" aria-labelledby="boxModalTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4 class="modal-title" id="boxModalTitle"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h5 id="boxModalBody" style="margin-bottom:30px;"></h5>
</div>
<div class="form-group text-center">
<span class="col-md-4 col-md-offset-4">
<button type="button" class="btn org-bg" data-dismiss="modal">OK</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- modal box end-->
</body></html>
I have tried to automatically enter my credentials with HTML using POST method (https://crunchify.com/automatic-html-login-using-post-method-autologin-a-website-on-double-click/) and also using a different method outlined here (https://help.risevision.com/hc/en-us/community/posts/115019363963-Auto-Login-on-Webpage-using-Javascript) where I replaced the http://www.exemple.com url by https://customer.sunvalleytek.com/login but it doesn't work.
My guess is that the form type is in Javascript whereas the links just above outline how to fill an html type form. However I haven't found anything about auto-filling Javascript type forms.
Any help would be greatly appreciated.
Many thanks.
And I have use to taken data from form on ps1 script and web services with php code so the page request takes time. The users click the button again and again this process time.
I try jQuery click event but it is stopped the form submission.
myHTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>xxx</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/guncelle.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<div class="bg"></div>
<body class="text-center bg body3">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead">
<div class="inner">
<!--<h3 class="masthead-brand"><img src="image/xxx.png" style="width: 100px;height: 100px"></h3>-->
<nav class="navbar navbar-expand-sm navbar-dark justify-content-center">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="index.php">xxx</a>
</li>
<li class="nav-item">
<a class="nav-link" href="sifirla.php">Sıfırla</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="guncelle.php">Güncelle</a>
</li>
</ul>
</nav>
</div>
</header>
<div><img src="image/xxx.png" alt="xxx" style="width: 150px;height: 150px;"></div>
<div>
<?php echo $result; ?>
</div>
<main role="main" class="inner cover">
<form id="form1" name ="form1" method="POST" action="guncelle.php" >
<div class="form-group">
<label for="uname">Kullanıcı Adınız:</label>
<input type="text" class="form-control" id="uname" name="uname" >
</div>
<span id="unametxt" name="unametxt" class="required"></span>
<div class="form-group">
<label for="password">Mevcut Şifreniz:</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<span id="passwordtxt" name="passwordtxt" class="required"></span>
<div class="form-group">
<label for="newPassword">Yeni Şifreniz:</label>
<input type="password" class="form-control" id="newPassword" name="newPassword" maxlength="15">
</div>
<span id="newPasswordtxt" name="newPasswordtxt" class="required"></span>
<div class="form-group">
<label for="new2Password">Yeni Şifreniz Tekrar:</label>
<input type="password" class="form-control" id="new2Password" name="new2Password" maxlength="15">
</div>
<span id="new2Passwordtxt" name="new2Passwordtxt" class="required"></span>
<!--<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LdLWVsUAAAAANupQHCmg_28mFmc__o6ZwybziOK"></div>
</div>
-->
<p><input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle" ></p>
</form>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>#2018 xxxx</p>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When this form submitted , I controlled php side like this:
if (isset($_POST['Submit1'])) {
and then I use this data with webservice, according that I have run ps1 script. Finally i show alert on the form error or success with all process.
I want to disable the button when form submitting. How can I this?
You can use onsubmit event in the form to do it. Please add the onSubmit event in the form as below
<form id="form1" name ="form1" method="POST" action="" onsubmit="$('#Submit1').attr('disabled', 'disabled'); return true;">
Try with this code
<input class="btn btn-lg btn-guncelle" type="submit" id="Submit1" name="Submit1" value="Şifremi Güncelle">
<script>
$(document).ready(function(){
$('#form1').on('submit',function(e){
e.preventDefault();
$('#submit1').prop('disabled','disabled');
});
});
</script>
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="flags.min.css">
<link rel="stylesheet" type="text/css" href="css2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="google/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-right: 6%;padding-left: 6%;margin-right: auto;margin-left: auto;">
<div class="row" style="padding-bottom: 5%;">
<div class="col-lg-offset-1 col-lg-4">
<h3 style="color:#00B0F0;">Choose your phone numbers<h3>
</div>
</div>
<form action="deuxiemeBis.php" method="POST">
<div class="row">
<div class="col-lg-offset-1 col-lg-4">
<div class="form-group phone1">
<input type="tel" class="form-control" name ="phone1" id="phone1">
</div>
<div class="form-group phone2">
<input type="tel" class="form-control" name ="phone2" id="phone2">
</div>
<div class="form-group phone3">
<input type="tel" class="form-control" name ="phone3" id="phone3">
</div>
</div>
</div>
<div class="row">
<br><br>
<div class="col-lg-offset-1 col-lg-3">
<button data-toggle="collapse" data-target="#demo" style="background-color: transparent;border:none;color:#00B0F0;">+More infos</button>
</div>
</div>
<div class="row">
<br>
<div class="form-group col-lg-offset-1 col-lg-6">
<div id="demo" class="collapse">
<textarea rows="3" name="comment" class="form-control" form="usrform"></textarea>
</div>
</div>
</div>
<div class="col-lg-offset-9 col-lg-3"><br>
<div class="form-group">
<button type="submit" class="btn btn-primary" style="width: 50%;background-color: #00B0F0;">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.
So my question is: how do you specify that only the submit button will actually submit the form ?
That's because you didn't specify the type for that button and submit is the default type. Set the type='button' and it will no longer act as a submit.
I have some problems with my modal which doesn't show up even though I set data-target and data toggle attributes to my button. The screen is faded like it is when the modal is open...
This is the button that triggers the modal:
<a id="createCampaignBtn" data-target="#createCampaignModal" data-toggle="modal"
class="removeRight removeLeft buttonsA">
<div class="buttons removeRight centerTextOutHoriz">
<span class="centerTextInner buttonRight">Start a new Campaign</span>
</div>
</a>
The modal:
<div class="modal">
<div id="createCampaignModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modalLook">
<div class="modal-header divTitlesModal">
<div class="col-xs-7 removeLeft">Start a new campaign</div>
<button type="button" class="close col-xs-1 removeRight removeLeft " data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
<div class="hidden" id="actionType"></div>
</div>
<div class="modal-body">
<form id="createCampaignForm" class="form-horizontal">
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTitle">Campaign Title</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignTitle" name="title"
placeholder="" type="text" maxlength="100" required="" autofocus=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignStartDate">Start Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignStartDate" name="startDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignEndDate">End Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignEndDate" name="endDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTypes">Type</label>
<div class="col-sm-12 col-md-12 inputContainer">
<select class="select form-control" id="campaignTypes" name="typeId">
</select>
</div>
</div>
<div class="form-group">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignDescription">Description</label>
<div class="col-sm-12 col-md-12">
<textarea class="form-control" id="campaignDescription" name="description"
placeholder="" required="" form="createCampaignForm"></textarea>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="form-group submitFormGroup">
<button type="button" class="btn btn-default cancel modalButton"
data-dismiss="modal">
Cancel
</button>
<button class="btn btn-primary modalButton modalSubmit"
value="Submit"
type="submit">Submit
</button>
</div>
</div>
<div class="col-xs-5">
<div id="holidayAlert" class="errorMessage"></div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And this is what I've included for this page:
CSS:
<head>
<meta charset="UTF-8">
<title>Holiday System</title>
<link rel="stylesheet" href="../commons/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="../commons/css/jquery.minicolors.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../commons/css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="../commons/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../commons/css/simple-sidebar.css">
<link href="../commons/css/style.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="../commons/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../commons/favicon/manifest.json">
<link rel="mask-icon" href="../commons/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../commons/favicon/favicon.ico">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/home.css">
</head>
And the js files:
<!--Include jQuery-->
<script type="text/javascript" src="../commons/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery.serializeObject.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery-ui.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<!--Include Date Range Picker-->
<script type="text/javascript" src="../commons/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<script type="text/javascript" src="../commons/js/jquery.autocomplete.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="../commons/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/homepage.js"></script>
<script type="text/javascript" src="../commons/js/navbar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.minicolors.min.js"></script>
<script type="text/javascript" src="../commons/js/notify.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<script type="text/javascript" src="../commons/js/searchBar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.tablesorter.min.js"></script>
I tried to force the modal to show up with this js code, but it works only one time and after I close it, it doesn't work anymore.
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").css('display', 'block');
});
You need to remove the wrapper div on the modal:
<div class="modal"></div>
The wrapper prevents the modal from showing up.
To show the modal programatically you can use bootstrap's modal('show') function.
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").modal('show'); // initializes and invokes show immediately
});
You can even omit the show parameter, which is the default action.
Try this
Jsfiddle
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").modal("show");
});
And remove
<div class="modal"></div>