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.
Related
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.
Hello i am new to laravel and i'm following this tutorial in order to build a student CMS, i have a datepicker and a bootstrap modal that are supposed to popup when i click form buttons, but nothing shows up even though everything seems okay.
I have a master page that contains all the styles and js references
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
<meta name="author" content="GeeksLabs">
<meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
<link rel="shortcut icon" href="img/favicon.png">
<title>Dashboard</title>
<!-- Bootstrap CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap theme -->
<link href="/css/bootstrap-theme.css" rel="stylesheet">
<!--external css-->
<!-- font icon -->
<link href="/css/elegant-icons-style.css" rel="stylesheet" />
<link href="/css/font-awesome.min.css" rel="stylesheet" />
<!-- full calendar css-->
<link href="/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
<link href="/assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
<!-- easy pie chart-->
<link href="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- owl carousel -->
<link rel="stylesheet" href="/css/owl.carousel.css" type="text/css">
<link href="/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="/css/fullcalendar.css">
<link href="/css/widgets.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/style-responsive.css" rel="stylesheet" />
<link href="/css/xcharts.min.css" rel=" stylesheet">
<link href="/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
<!-- =======================================================
Theme Name: NiceAdmin
Theme URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
Author: BootstrapMade
Author URL: https://bootstrapmade.com
======================================================= -->
</head>
<body>
<section id="container" class="">
#include('layouts.header.header')
#include('layouts.sidebars.sidebar')
<section id="main-content">
<div class="wrapper">
#yield('content')
</div>
</section>
</section>
#yield('script')
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<script src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- bootstrap -->
<script src="/js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="/js/jquery.scrollTo.min.js"></script>
<script src="/js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- charts scripts -->
<script src="/assets/jquery-knob/js/jquery.knob.js"></script>
<script src="/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="/js/owl.carousel.js" ></script>
<!-- jQuery full calendar -->
<<script src="/js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="/assets/fullcalendar/fullcalendar/fullcalendar.js"></script>
<!--script for this page only-->
<script src="/js/calendar-custom.js"></script>
<script src="/js/jquery.rateit.min.js"></script>
<!-- custom select -->
<script src="/js/jquery.customSelect.min.js" ></script>
<script src="/assets/chart-master/Chart.js"></script>
<!--custome script for all page-->
<script src="/js/scripts.js"></script>
<!-- custom script for this page-->
<script src="/js/sparkline-chart.js"></script>
<script src="/js/easy-pie-chart.js"></script>
<script src="/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/js/xcharts.min.js"></script>
<script src="/js/jquery.autosize.min.js"></script>
<script src="/js/jquery.placeholder.min.js"></script>
<script src="/js/gdp-data.js"></script>
<script src="/js/morris.min.js"></script>
<script src="/js/sparklines.js"></script>
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
</body>
</html>
I have another page that contains the form to add a course and the scripts for the datepicker and the modal
manageCourse.blade.php
#extends('layouts.master')
#section('content')
#include('courses.popup.academic')
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-file-text-o"></i>Courses</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="icon_document_alt"></i>Course</li>
<li><i class="fa fa-file-text-o"></i>Manage Course</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<section class="panel panel-default">
<header class="panel-heading">
Manage Course
</header>
<form class="form-horizontal">
<div class="panel-body" style="border-bottom: 1px solid #ccc;">
<div class="form-group">
<div class="col-sm-3">
<label for="academic-year">Academic Year</label>
<div class="input-group">
<select class="form-control" name="academic_id" id="academic_id">
</select>
<div class="input-group-addon" >
<span class="fa fa-plus" id="add-more-academic"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="program">Course</label>
<div class="input-group">
<select class="form-control" name="program_id" id="program_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-5">
<label for="level">Course</label>
<div class="input-group">
<select class="form-control" name="level_id" id="level_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="shift">Shift</label>
<div class="input-group">
<select class="form-control" name="shift_id" id="shift_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="time">Time</label>
<div class="input-group">
<select class="form-control" name="time_id" id="time_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="batch">Batch</label>
<div class="input-group">
<select class="form-control" name="batch_id" id="batch_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-2">
<label for="group">Group</label>
<div class="input-group">
<select class="form-control" name="group_id" id="group_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="startDate">Start date</label>
<div class="input-group">
<select class="form-control" name="start_date" id="start_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="endDate">End date</label>
<div class="input-group">
<select class="form-control" name="end_date" id="end_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-default btn-sm">Create Course</button>
</div>
</form>
</section>
</div>
</div>
#endsection
#section('script')
<script type="text/javascript">
$('#start_date').datepicker({
changeMonth:true,
changeYear:true,
});
$('#add-more-academic').on('click', function(){
$('#academic-year-show').modal();
});
</script>
#endsection
and the page for the modal
<div class="modal fade" id="academic-year-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" 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">Academic year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic year">
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success btn-save-academic" type="button">Save</button>
</div>
</div>
</div>
Nothing seems to work, everytime i get this error: Uncaught ReferenceError: $ is not defined. Can anyone tell me why the datepicker and the modal are not showing?
Your section #yield("script") needs to go after <script src="/js/jquery.js"></script> in master.blade.php. Currently, you're trying to run code that is depending on jQuery being available by extending the master layout and yielding a section to the extending template, but when this yield is happening is prior to jQuery being available.
<script src="/js/jquery.js"></script>
#yield('script')
<script src="/js/jquery-ui-1.10.4.min.js"></script>
...
</body>
or
...
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
#yield('script')
</body>
Generally, whenever I do #yield for js, I do it after all other <script> tags in the master layout, but as long as you know your dependencies have been loaded before they're called, all is well.
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>
i'v been running in trouble, with my Bootstrap contact form. It seems to be important at which time the javascript files are loaded.
Depending on the placement some things doesn't work correctly:
If so:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
my contact form will don't work. Click on "SUBMIT"-Button and nothing happens. But the collapse menu button of bootstrap works fine.
If loading order is like this:
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
the contact form (especially the subimt button) works as expected. But the collapse
bootstrap menu button don't work fine. It is unclickable.
I tried everything but I don't know the reason for that behavior.
Do you have an idea, how to make both things work each other?
Here come's my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1" href="#slide-1"> <span class="text">MENU 1</span></a></li>
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2"> <span class="text">MENU 2</span></a></li>
</ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="slide story" id="slide-1" data-slide="1">
<div class="container">
<div class="row">
<div class="col-12">
<p>TEST</p>
</div>
</div>
</div><!-- /container -->
</div>
<div class="slide story" id="slide-2" data-slide="2">
<div class="container">
<div class="row">
<div class="col-12">
<div class="well">
<form id="contact-form" class="form">
<fieldset>
<legend>Contact Form</legend>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name" name="name1" placeholder="name"/>
</div>
<div class="form-group">
<label for="name" class="control-label">E-Mail</label>
<input type="text" class="form-control" id="email" name="email" placeholder="email"/>
</div>
<div class="form-group">
<label for="name" class="control-label">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="phone"/>
</div>
<div class="form-group">
<label for="name" class="control-label">message</label>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button value="Send" class="btn btn-primary" type="submit" id="submit" name="submit">Send</button>
<button type="reset" class="btn">Clear</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div><!-- /container -->
</div>
<!-- Java-Scripts -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/script.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="js/val55.js"></script>
</body>
</html>
This is what the val55.js-File looks like:
$(document).ready(function() {
$("#contact-form").validate({
rules: {
name1:{
minlength: 3,
maxlength: 20,
required: true
},
email:{
minlength: 3,
required: true,
email: true
},
phone:{
minlength: 3,
required: true
},
message: {
minlength: 10,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
submitHandler: function(form) {
//form.submit();
alert('Hallo');
}
})
}); // end document.ready
Regards,
John
Do this:
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="js/script.js"></script>
<script src="js/val55.js"></script>
You might need to switch between the last to scripts and everything should work fine provided you don't have any errors in your javascript.