I want to use a mask to an input to start with SP and also PT. The PT input works fine, but the SP does not. Note that this is not my real code, it's just an example.
$('#partshort').mask('SP-00000000000');
$('#svpshort').mask('PT-00000000000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Problems with jQuery Mask Plugin?</h3>
<p>Exemplify your problem here :-)</p>
<hr />
<form role="form">
<div class="form-group">
<label for="date-field">Example 1</label>
<input type="text" class="form-control" id="partshort">
</div>
<div class="form-group">
<label for="ip-field">Example 2</label>
<input type="text" class="form-control" id="svpshort">
</div>
</form>
</div>
Here is the example: http://jsfiddle.net/1wjbysnm/
The issue is because the S character in the Mask library has a special meaning:
By default, jQuery Mask Plugin only recognizes the logical digit A (Numbers and Letters) and S (A-Za-z) but you can extend or modify this behaviour
https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#translation
To fix your issue you can simply remove the S character translation so that it behaves as any standard character:
$('#partshort').mask('SP-00000000000', {
translation: { S: null }
});
$('#svpshort').mask('PT-00000000000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Problems with jQuery Mask Plugin?</h3>
<p>Exemplify your problem here :-)</p>
<hr />
<form role="form">
<div class="form-group">
<label for="date-field">Example 1</label>
<input type="text" class="form-control" id="partshort">
</div>
<div class="form-group">
<label for="ip-field">Example 2</label>
<input type="text" class="form-control" id="svpshort">
</div>
</form>
</div>
Related
I am new in the development of this map web application, and I want to implement a form with a map which can get the longitude and latitude through the search bar and put it in the database. I am using the Leaflet-Search plugin. I tried following the instructions, but I still can't understand how to implement it properly.
For reference, here is the form picture and code:
Picture: Form picture
Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HelpThePoor</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href={{url('css/main.css')}}>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css"/>
<!-- Styles -->
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body>
Kembali
<br>
<div class="container">
<form action="/createdonor" method = "post">
#csrf
<div class="form-row">
<div class="col">
<label>Nama:</label> <!--for getting the name-->
<input type="text" class="form-control" name="name" placeholder="Nama">
</div>
<div class="col"> <!--for getting the details of help-->
<label>Bantuan apa yang anda tawarkan?:</label>
<input type="text" class="form-control" name="help_offered" placeholder="Ceritakan secara lanjut bantuan anda">
</div>
<div class="col">
<label>Nombor Telefon:</label> <!--for getting the phone number-->
<input type="text" class="form-control" name="tel_number" placeholder="No. telefon anda">
</div>
<div class="col">
<div id="formmap"> <!--the supposedly searcheable map-->
</div>
</div>
<div class="col">
<label>Jenis bantuan:</label> <!--help type-->
<input type="text" class="form-control" name="help_type" placeholder="Sila pilih jenis bantuan anda">
</div>
<div class="col">
<label>Maklumat tambahan:</label> <!--additional details-->
<input type="text" class="form-control" name="add_info" placeholder="Maklumat tambahan">
</div>
</div>
<br>
<button type="submit" class="btn btn-success">Daftar Bantuan Saya!</button>
</form>
</div>
<script> <!--the JS for the searcheable map-->
const formmap = L.map('formmap').setView([1.465036, 830.428012], 13);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(formmap);
const search = new GeoSearch.GeoSearchControl({
//provider: new GeoSearch.OpenStreetMapProvider(),
});
formmap.addControl(search);
function searchEventHandler(result) {
console.log(result.location);
}
formmap.on('geosearch/showlocation', searchEventHandler);
</script>
</body>
</html>
And here's the database: Database picture
I am new in this type of web application, and I quite slow on getting the basics of JS currently.
I've been struggling to make this as reusable as possible. I have written it such that if I put the id's of both the target fieldset and the input checkbox it works. However, I have a number of form elements that must all act the same, so this isn't a great way to deal with it.
When a user enables or disables the checkbox switch, then I want the following form field to disable or enable accordingly. I've tried multiple different ways to accomplish this and cleaned up my javascript based on suggestions in other threads, but when I attempt to activate the switch I get the below error. Any help would be amazing!
form_enable.js:2 Uncaught TypeError: Cannot set property 'disabled' of null at enable_disable (form_enable.js:2) at HTMLInputElement.onchange (Trim.htm:11)
My trimmed down HTML:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes" onchange="enable_disable(report_url_disable_fieldset,report_url_active_yes)">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset disabled id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
And my form_enable.js file:
function enable_disable(target_id,check_id) {
document.getElementById(target_id).disabled = !check_id.checked;
}
Try:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
</html>
And form_enable.js:
document.getElementById("report_url").setAttribute("disabled", "true");
document.getElementById("report_url_active_yes").addEventListener("change", function() {
document.getElementById("report_url_active_yes").checked ? document.getElementById("report_url").removeAttribute("disabled") : document.getElementById("report_url").setAttribute("disabled", "true")
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>
I tried to follow the first example here.
It should be outlining the text input in green but it isn't.
Use js function for validate as below,
function check(e) {
if (e.target && e.target.value && +e.target.value === 10) return e.target.style.borderColor = 'green';
return e.target.style.borderColor = 'red';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" ,href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" onkeyup="check(event)">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet",href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>
I guess that you missed css link somehow,, this is correct one, and you do not need jQuery for that, that is only css based coloring
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>
</div>
</div>
You can do it this way, using Bootstrap 4 beta 2. I've added the bmd-form-group is-focused classes to the div.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="bmd-form-group is-focused">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control is-valid" id="answer-1" type="text" name="answer-1" value="10">
</div>
Next time you check the Bootstrap docs, use the current beta docs at: https://getbootstrap.com/docs/4.0/getting-started/introduction/
I'm using eonasdan datetimepicker. I chose default date via using options. I opened the page using chrome, firefox 47.0, and microsoft edje 25.1.
Firefox Case: The date appears in the textfield. But, if I go to
the address bar and hit 'enter', the date shown in the textfield
disappears.
Chrome and edje Case: When the page opens, the date is not shown
in the textfield.
I created a fiddle for this question fiddle, what happens in the fiddle is the same as what happens in the google chrome and internet explorer case.
I tried using the 'viewDate: true' option for datetimepicker which fixed the problem. But it created another problem -- the calendar is not shown when I click the calendar icon.
I have no idea why this is happening. Any help is greatly appreciated.
The same code in the fiddle is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
Example
</title>
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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]-->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" value="2016-09-03" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03'
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
You don't need value attribute for datetimepicker input in your HTML. If you remove it, your code will work as showed in the following example:
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03';
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
If you want to use data attributes you can use data-date-* to set an option or data-date-options setting an option object. In your case you can use data-date-default-date instead of value.
You can find more about data-* initialization here and here.
CDN :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script>
HTML :
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
JavaScript :
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
Use This Code..
This will useful for you..
when I clicked on time icon it shows nothing. I am using this code:
<div class="control-group">
<label class="control-label">Next Time</label>
<div class="controls">
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
</div>
and here is the script and CSS i m using:
<link type="text/css" href="assets/css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="assets/js/bootstrap-timepicker.min.js"></script>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
You have to put the id on your parent div :
<div class="control-group">
<label class="control-label">Next Time</label>
<div class="controls">
<div id="timepicker1" class="input-append bootstrap-timepicker">
<input type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
</body>
</html>
It works fine.
Have you include jquery and bootstrap scripts, css too?