Codewithanbu

Posts

Showing posts from September, 2020

How to set Datepicker in bootstrap?

You are using bootstrap and you want to add datepicker, then you can use the bootstrap-datepicker library. But if you are new then learn to add datepicker in bootstrap. <!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="author" content=""> <title>Bootstrap Datepiker</title> <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-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://maxcdn.bootstrap

Text Align Property in CSS

The text-align property in CSS is used to make the horizontal alignment of text in an element. Property Value: The text-align property value are listed below: S.No Property Value Syntex Description 1 left text-align:left; Used to align the text-alignment into left. 2 center text-align:center; Used to align the text-alignment into center. 3 right text-align:right; Used to align the text-alignment into right. 4 justify text-align:justify; Used to stretch the content of an element to display the same width of each line 5 initial text-align:initial; Used to set its default value. 6 inherit text-align:inherit; Used to be inherited from its parent.

How to align Placeholder Text in HTML ?

Input Placeholder attribute specifies a short hint to describe the expected value of an input field / textarea. The short hint is displayed in the field before the user enters a value. In most of the browsers, placeholder texts are usually aligned on the left. The selector uses text-align property to set the text alignment in the placeholder. This selector can change browser to browser. For example: For Chrome, Mozilla, and Opera Browsers: use ::placeholder For Internet Explorer: use :-ms-input-placeholder Example 1: This example describes only placeholder alignment, it does not align placeholder value. <!DOCTYPE html> <html> <head> <title>Change Placeholder alignment | Codewithanbu</title> <style> body {text-align:center;padding: 20px;} .body-section{width: 20%;margin: 0 auto;padding: 20px;background: #ddd;} h1 {color:#5042e0; } input[type="text"]::placeholder {t

How to get form data using JavaScript / jQuery?

The serializeArray() method creates an array of objects (name and value) by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself. Syntax: $(selector).serializeArray() Example Code: Here I have added two variations for output results(With and Without labels). <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#serialize").click(function(){ var x = $("form").serializeArray(); $.each(x, function(i, field){ $("#results1").append(field.name + ":" + field.value + "<br><br>"); $("#results2").append(field.value); }); });