With this input field I can open calendar only on icon next to input field, I want to open calendar on whole input field. How can I do this?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>
<script>
function exportbydate() {
swal({
title: "{{trans('a_pdf.choosedate')}}",
html: `<form action="{{ url('/myaccount/view/transfer/pdf') }}" method="GET">`+
`<div class="row">
<input id="fromdate" name="fromdate" class="form-control" type="date" placeholder="Your name here" style="margin:10px; width: 50%;" autocomplete="off" required/>
<input id="todate" name="todate" class="form-control" type="date" style="margin:10px; width: 50%" autocomplete="off" required/>
</div>`+
` <button type="submit" class="btn btn-primary" >{{trans('a_pdf.search')}}</button>`+
`</form>`,
width: '650px',
showCancelButton: false,
showConfirmButton: false,
showCloseButton: true,
})
}
</script>
$( function() {
$( "#datepicker" ).datepicker();
} );
<!-- Using jQuery UI Datepicker -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Related
i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
hi, i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
hi, i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
$(document).ready(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#myform").validate({
rules: {
title: {
required: true,
minlength:2,
maxlength:5,
},
name: {
required: true,
minlength:2,
maxlength:5,
},
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rules</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.2/dist/jquery.validate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form id="myform">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">title</option>
<option value="2">name</option>
</select>
</div>
<div class="form-group">
<label>title <span class="text-hightlight">*</span></label>
<input type="text" name="titre" id="title" class="form-control"/>
</div>
<div class="form-group">
<label>name <span class="text-hightlight">*</span></label>
<input type="text" name="name" id="name" class="form-control"/>
</div>
<button class="btn btn-theme" type="submit" >cherche</button>
</form>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
You have a typo here: <input type="text" name="titre" id="title" class="form-control"/>
titre should be title
I have an input element with an attached datepicker created using bootstrap-datepicker.
When the user changes the date by typing directly into the input element, and then clicks the calendar icon, the changed date is not reflected in the calendar
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="input-append date" id="calendar_toDate" data-date="12/31/2999" data-date-format="mm/dd/yyyy"><input type="Text" alt="toDate" id="toDate" name="toDate" enabled="" onblur="Javascript:checkDate(this, '', 'R');" value="12/31/2999" size="10" maxlength="10" class="input input-small" data-req="Y" aria-required="true" data-type="d">
<span class="add-on" title="Date Picker"><i class="icon icon-calendar"></i></span>
</div>
<script type="text/javascript">
$(function(){
window.prettyPrint && prettyPrint();
$('#calendar_toDate').datepicker();
});
function calenderDataChange(){
javascript:dataChangeCheckRoleDate();}
$('#calendar_toDate').datepicker({
format : 'mm/dd/yyyy',
startDate:'01/01/1900',
endDate:'12/31/2999',
autoClose:true ,
orientation:'auto right'
}).on('changeDate',function(ev){
$(this).datepicker('hide');
});
</script>
<span class="required"></span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<title>Document</title>
</head>
<body>
<div class="col-lg-6 col-md-6 col-sm-6">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
Okay, so for some reason I have a crazy problem that is just making my mind go crazy. I have an open source shoutbox, worked great in the website.com/shouot/SHOUTDIREC/chat.html but once I try to embed into my previous built site(website.com/chat.php), the submit button like grays out and I can't submit the post. Another thing is it doesn't show previous post that show up when I go back to SHOUTDIREC/chat.html. I tried changing /chat.php to /chat.html nothing. Still grayed out not working submit button.
This is the ./chat.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Making a Shoutbox with PHP and jQuery</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./shout/assets/css/styles.css" />
<script type="text/javascript" src="./livechat/php/app.php?widget-init.js"></script>
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./shout/assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./shout/publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./shout/assets/js/script.js"></script>
</body>
</html>
Here is the /SHOUTDIREC/chat.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wyfi-Chat</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./assets/css/styles.css" />
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>
I don't know why it's not working. Maybe a permission issue? Or what? I have no clue, and my mind is going absolutely nuts.
function AjaxShowForm(a, v) {
var data = $("#" + v).serialize();
$.ajax({
type: "POST",
url: "https://api.stackexchange.com/2.2/answers/45403161?order=desc&sort=activity&site=stackoverflow",
data: data,
beforeSend: function (html) { // this happens before actual call
$("#" + a).html("<img src='//vistablog.ir/images/loading_.gif'></img>loading..");
$("#" + a).show();
},
success: function (html) { // this happens after we get results
$("#" + a).html("");
$("#" + a).show();
$("#" + a).append(html);
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form1'>
<table dir='rtl' border='0'>
<tr>
<td>name <span style="color:red">*</span></td>
<td><input type='text' name='in1' required></td>
</tr>
<tr>
<td>description</td>
<td><textarea name='in3'></textarea></td>
</tr>
<tr>
<td>family</td>
<td><input type='text' name='in2'></td>
</tr>
<tr>
<td>email</td>
<td><input type='text' name='in4'></td>
</tr>
<tr>
<td>roles</td>
<td><input type='checkbox' name='in5'></td>
</tr>
<td></td>
<td><input type='submit' value='submit' onclick='return AjaxShowForm("showajax1","form1")'></td>
</table>
<p id='showajax1'></p></form>
</center>
Below is my code for a modal window/page. When I click the submit button, however, I want to navigate to the index.html page. I am however, not able to do that although I have made a form and set the action attribute to the page. I also tried navigating to some other links but it does not work.
I am using jquery.leanModal.min.js which I found online after some searching.
How can I navigate upon clicking the submit button?
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Moi modal page</title>
<link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/jquery.leanModal.min.js"></script>
</head>
<body>
<div id="topbar"></div>
<div id="w">
<div id="content">
<center>Login to website</center>
</div>
</div>!
<div id="loginmodal" style="display:none;">
<h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>
<script type="text/javascript">
$(function(){
$('#loginform').submit(function(e){
return false;
});
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>
I have a jQuery datepicker on a form and a jQuery slider just below it. When I select the datepicker the calendar pops up, but the button from the slider is visible on top of the calendar.
Is there a way to make sure that the calendar is on top of all other elements on the form?
Here's the page source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My ASP.NET Web Page</title>
<link href="../Styles/Site.css" rel="stylesheet" />
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link type="text/css" href="../css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
//date picker
$(function () {
$("#classDate").datepicker({ minDate: 0 });
});
//Slider1
$(function() {
$("#slider1").slider({
value:60,
min: 0,
max: 120,
step: 5,
slide: function( event, ui ) {
$("#class1").val(ui.value);
}
});
$("#class1").val($("#slider1").slider("value"));
});
//Slider2
$(function () {
$("#slider2").slider({
value: 6,
min: 1,
max: 12,
step: 1,
slide: function (event, ui) {
$("#class2").val(ui.value);
}
});
$("#class2").val($("#slider2").slider("value"));
});
</script>
</head>
<body>
<div id="page">
<div id="main">
<div id="content">
<form method="post" action="">
<fieldset>
<legend>Sign-up Form</legend>
<ol>
<li class="classDate">
<label for="classDate">Date:</label>
<input type="text" id="classDate" name="classDate" title="Start Date" />
</li>
<li class="class1">
<label for="class1">Slider1:</label>
<input type="text" id="class1" name="class1" title="slider1" style="border:0; color:#f6931f; font-weight:bold;" />
<br/>
<div id="slider1" class="slider" ></div>
</li>
<li class="class2">
<label for="class2">Slider2:</label>
<input type="text" id="class2" name="class2" title="slider2" style="border:0; color:#f6931f; font-weight:bold;" />
<br /><div id="slider2" class="slider" ></div>
</li>
</ol>
<p class="form-actions">
<input type="submit" value="createClass" title="createClass" />
</p>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Edit:
Still no takers on this, so here's a image to make it clear. The left side shows the normal form; a few boxes and sliders. The right side shows what happens when a user tries to select a date. You can see that the button for the slider is appearing on top of the calendar that pops up.
Add this to your CSS:
.ui-datepicker {z-index:3!important;}