Applying CSS to a jQuery variable: Step-by-Step Guide

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  '" + currentlyClickedStartdate + "'  To  '" + currentlyClickedenddate + "' and Outlet  '" + currentlyClickedOutlet + "'");
    $("#fromDatetoDate").html(displayDates);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7b75767b735c2d3225322a">[email protected]</a>/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583f31323f3718697661766e">[email protected]</a>/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
<i class="fa fa-search"></i>&nbsp;Search
</button>
    </div>
  </div>
</form>

I have a date field and one select field whose values I am storing in a variable after user selects some values. I am then displaying them into a div container.

What I am trying to achieve is:

  • To add CSS styling to the displayed information.

As a result of running the code, I get the line For the date between '05/01/2019' To '11/01/2019' and Outlet 'ALL'

  • I aim to style the dates and outlet with specific colors and make them bold.
  • Example: For the date between '05/01/2019' To '11/01/2019' and Outlet 'ALL'
  • I am unsure how to apply CSS to jQuery variables.

Any guidance on this matter would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

To make things simpler, you can just utilize the strong tags:

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  <strong>'" + currentlyClickedStartdate + "'</strong>  to  <strong>'" + currentlyClickedenddate + "'</strong> and Outlet <strong>'" + currentlyClickedOutlet + "'</strong>");
    $("#fromDatetoDate").html(displayDates);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284f41424f4768190611061e">[email protected]</a>/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791e10131e1639485740574f">[email protected]</a>/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
<i class="fa fa-search"></i>&nbsp;Search
</button>
    </div>
  </div>
</form>

If you prefer using css instead:

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  <span>'" + currentlyClickedStartdate + "'</span>  to  <span>'" + currentlyClickedenddate + "'</span> and Outlet <span>'" + currentlyClickedOutlet + "'</span>");
    $("#fromDatetoDate").html(displayDates);
  });
});
#fromDatetoDate span {
  font-weight: bold;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63040a09040c23524d5a4d55">[email protected]</a>/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a7a9aaa7af80f1eef9eef6">[email protected]</a>/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
<i class="fa fa-search"></i>&nbsp;Search
</button>
    </div>
  </div>
</form>

Answer №2

Enclose your date and Outlet in span tags and assign them classes as shown below.

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  '" + "<span class='bold'>" + currentlyClickedStartdate + "</span>" + "'  To  '" + "<span class='bold'>" + currentlyClickedenddate + "</span>" + "' and Outlet  '" + "<span class='bold'>" + currentlyClickedOutlet + "</span>" + "'");
    $("#fromDatetoDate").html(displayDates);
  });
});
.bold {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7909e9d9098b7c6d9ced9c1">[email protected]</a>/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14737d7e737b54253a2a2f2c2d75683c717d7f72304b646472">[email protected]</a>/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
<i class="fa fa-search"></i> Search
</button>
    </div>
  </div>
</form>

Answer №3

Take a look at the code snippet below to address your issue:

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between <span class='date'> '" + currentlyClickedStartdate + "'</span>  To  <span class='date'>'" + currentlyClickedenddate + "'</span> and Outlet  <span class='date'>'" + currentlyClickedOutlet + "'</span>");
    $("#fromDatetoDate").html(displayDates);
  });
});
.date{
font-weight:bold;
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e1efece1e9c6b7a8bfa8b0">[email protected]</a>/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6b65666b634c3d2235223a">[email protected]</a>/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
<i class="fa fa-search"></i> Search
</button>
    </div>
  </div>
</form>

Answer №4

Using jQuery to Insert HTML Content involves passing a string of HTML code as an argument.

In the context of constructing a keyword for displayDates, you can create it as an HTML string. To enhance its appearance, consider enclosing it within strong or span tags and applying custom styles.

$(document).ready(function() {


  var today = new Date(new Date().getFullYear(), new Date().getMonth(),
    new Date().getDate());
  $('#startdate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    maxDate: function() {
      return $('#enddate').val();

    }
  });
  $('#enddate').datepicker({
    uiLibrary: 'bootstrap4',
    iconsLibrary: 'fontawesome',
    format: 'dd/mm/yyyy',

    minDate: function() {
      return $('#startdate').val();
    },

  });

  $("#areaFormID").submit(function(event) {
    event.preventDefault();
    const currentlyClickedOutlet = $("#myselect").find(":selected")[0].textContent;
    var currentlyClickedStartdate = $("#startdate").val();
    var currentlyClickedenddate = $("#enddate").val();
    var displayDates = ("For the date between  <span class='bold highlight'>'" + currentlyClickedStartdate + "'</span>  To  <span class='bold highlight'>'" + currentlyClickedenddate + "'</span> and Outlet  <span class='bold highlight'>'" + currentlyClickedOutlet + "'</span>");
    $("#fromDatetoDate").html(displayDates);
  });
});
.highlight {
  color: #66a95b;
}

.bold {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45222c2f222a05746b7c6b73">[email protected]</a>/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f38363538301f6e71667169">[email protected]</a>/js/gijgo.min.js" type="text/javascript"></script>
<div id="fromDatetoDate"></div>
<!--  this one to show dates  -->
<form id="areaFormID" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">

      <option>ALL</option>
      <option>1</option>
      <option>2</option>
    </select>

    <div>
      <br>
      <button id="btn-search" class="btn btn-default" type="submit">
<i class="fa fa-search"></i>&nbsp;Search
</button>
    </div>
  </div>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring data-id to a Bootstrap modal without the use of jQuery

I've come across numerous questions similar to this, all suggesting the same solution of using JQuery. However, incorporating JQuery into my Reactjs project just to pass an id to a modal is something I wish to avoid. Below is my code snippet : <! ...

javascripthtmlreactjsbootstrap-4modal-dialog

The 'exhaustive-deps' warning constantly insists on requiring the complete 'props' object instead of accepting individual 'props' methods as dependencies

This particular issue is regarding the eslint-plugin-react-hooks. While working in CodeSanbox with a React Sandbox, I noticed that I can use individual properties of the props object as dependencies for the useEffect hook: For instance, consider Example ...

javascriptreactjsreact-hookseslint-plugin-react-hooks

Is there a way to choose a concealed field based on its value?

I am working with an ASP.NET repeater and have the following HTML code generated: <table> <tr> <td><input type="hidden" name="ItemId" id="ItemId" value="3" /></td> <td>Terry</td> <td>Deleted< ...

jqueryjquery-selectors

Bootstrap 4 Carousel: Displaying Multiple Frames Simultaneously and Sliding One at a Time

A different query was raised regarding the same issue (refer to the mentioned question) for Bootstrap 3, however, the suggested solutions are not compatible with Bootstrap 4. The illustration in this post effectively conveys what I am aiming for. Take a ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-4bootstrap-4

Creating adequate spacing between words in your design while also maintaining responsiveness can be achieved through these simple

I'm working on designing a box that displays a list of descriptive characteristics and their corresponding values in a responsive manner. Initially, I attempted to use two unordered lists with floated elements but encountered issues as the browser siz ...

htmlcss

Modify the nested object's value by utilizing the setState hook in React

Looking to toggle the value of isClicked on click from true to false and vice versa. This will apply JSX styles when a button is clicked. Here's my data: const [isApply, setIsApply] = useState([ { "0": { "is ...

javascriptreactjsreact-hooksjsxsetstate

Navigating through intricate JavaScript object

I need help figuring out how to access the "description" property of a JSON object I received from an API endpoint. The object looks like this: - "description" : "Dorian Market 1"? let markets = { "result":[ { "townId" : "MEBD", "stor ...

javascriptjsonobject

What is the best way to display custom messages sent by ajax in the input fields they are intended for?

Explanation of Code Functionality: My Ajax code functions flawlessly, handling error responses effectively and displaying the corresponding success message upon receiving a correct response. Additionally, it hides the form and redirects to another page on ...

phpjqueryajax

Using Browserify to load the npm-module client-side for thepiratebay

I am currently facing an issue with my node.js server file. It successfully loads my site and runs JavaScript, but I encountered a problem when trying to include tpb = require('thepiratebay'); in the server.js file. Although it works fine in the ...

javascriptnode.jsnpmbrowserify

Filter and transfer data from one Angular array to another

As a newcomer to Angular, I am working with an array of events containing multiple arguments. My goal is to filter these events and separate them into two new arrays: upcoming events and past events. Below is a snippet of the TypeScript code I am using: a ...

htmlarraysangulartypescript

Troubleshooting an issue with Laravel's Bootstrap 5.2 dropdown functionality

After setting up a pre-configured navbar from the Bootstrap website, I noticed that the dropdown feature is not working. This issue arose with the latest version of Bootstrap 5.2 which was integrated into my Laravel project without any modifications to the ...

javascripthtmlcsslaravelbootstrap-5

Using Font Awesome icons with CSS rotation causes compatibility issues

Having trouble getting the icons to rotate on hover? The transition effect is working smoothly, but it seems like the rotation functionality is not kicking in. Take a look at the code below and see if there are any mistakes: @import 'https://maxcdn ...

htmlcssrotationfont-awesometransformation

Positioning the infowindow in Google Maps API v3

Creating a map with various markers, each with its own info window. However, when attempting to display an info window on multiple markers, the position remains fixed at the first clicked marker. What could be causing this issue? <script type="text/jav ...

javascriptgoogle-mapsgoogle-maps-api-3

Are you facing difficulties while trying to utilize useContext in your React application?

I have a basic React application where I need to implement useContext. (by the way, I am using Vite + React) Below is the code for my Context.jsx file: import React, {useContext} from 'react'; const emailContext = React.createContext(); expor ...

javascriptreactjstypescriptuse-context

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

javascriptjqueryhtml

Navigating AJAX Pages - Maximize the Potential of #home and Other Sections

I am working on creating AJAX pages using a tutorial I found on Tutorialzine. The script I am using loads pages using AJAX but it requires specifying the page number in the URL like http://example.com/#page1 or http://example.com/#page2. Is there a way t ...

javascriptphpjqueryhtmlajax

Storing information in a json document using handsontable

I'm having trouble saving spreadsheet data to a json file using the code below. When I try to run it, nothing happens and the developer console says 'no element found'. I am currently using handsontable version 0.29. Can anyone assist me in ...

javascriptphpjsonajaxhandsontable

How can you ensure that the results are displayed only when all the fields in the form are properly

Take a look at the code below: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ ...

javascriptjqueryformscalculator

Using HTML and CSS, you can align a span element inside a button to the right

I am struggling with getting the alignment right for a span that is inside a button. I've tried something similar before and it worked. However, this time, even though I'm using the same CSS but with different sizes, the span inside the button s ...

cssbuttonalignmenthtml

Tips for including parameters in an array of values when using getStaticPaths

I'm trying to retrieve the slug value that corresponds with each number in the getStaticPaths for my page structure: /read/[slug]/[number]. The code I have is as follows: export async function getStaticPaths() { const slugs = await client.fetch( ...

javascriptreactjsnext.jscontent-management-systemsanity