Author: John Au-Yeung

Sometimes, we want to get the selected value from jQuery UI slider.

In this article, we’ll look at how to get the selected value from jQuery UI slider.

Get the Selected Value from jQuery UI Slider

To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.

For instance, we can write:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<div id="slider"></div>

to add the script tags for jQuery and jQuery UI and the link tag for jQuery UI.

Then we add a div which we can turn into a slider.

Next, we write:

$('#slider').slider({
  change(event, ui) {
    console.log(ui.value);
  }
});

to select the div with:

$('#slider')

Then we call slider with an object with the change method.

And we get the slider value with the ui.value property.

Now when we finished sliding, we see the selected value logged.

Conclusion

To get the selected value from jQuery UI slider, we can call the slider method with an object that has the change method that takes the slider value as a parameter.

Sometimes, we want to count text area characters with JavaScript.

In this article, we’ll look at how to count text area characters with JavaScript.

Count Text Area Characters with JavaScript

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

For instance, we can write:

<textarea></textarea>
<div id='count'>

</div>

to add the textarea element and the div to show the character count.

Then we write:

const textarea = document.querySelector('textarea')
const count = document.getElementById('count')
textarea.onkeyup = (e) => {
  count.innerHTML = "Characters left: " + (500 - e.target.value.length);
};

to get the textarea and div elements with document.querySelector and document.getElementById .

Then we set the textarea.onkeyup property to a function that takes the e event object as a parameter.

Then we get the input value with e.target.value which is a string.

The length property gets the character count.

We set count.innerHTML to some text that shows the character left count.

Now when we type something into the textarea , we see the character count.

Count

To count text area characters with JavaScript, we can listen to the keyup event on the text area.

Then in the event handler, we can get the length of the value of the text area input string value.

Sometimes, we want to add a month picker with JavaScript.

In this article, we’ll look at how to add a month picker with JavaScript.

Add a Month Picker with JavaScript

To add a month picker with JavaScript, we can use the jQuery UI date picker library.

For instance, we can write:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">

<input name="startDate" id="startDate" class="date-picker" />

to add the script and link tags for jQuery and jQuery UI.

And we also add the input element for the date picker.

Then we write:

$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  onClose(dateText, inst) {
    const month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    const year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(year, month, 1));
  }
});

to select the input with:

$('.date-picker')

And we call datepicker with an object to turn the input into a date picker.

changeMonth lets us change the month if it’s true .

changeYear lets us change the year if it’s true .

showButtonPanel shows the bottom button panel if it’s true .

dateFormat lets us set the date that’s returned by the dateText parameter.

onClose is run when we close the date picker.

In the method, we get the month and year from the top dropdowns, and we call datepicker with 'setDate' to set the date.

Conclusion

To add a month picker with JavaScript, we can use the jQuery UI date picker library.

Sometimes, we want to listen to the mouseup event outside of an HTML element.

In this article, we’ll look at how to listen to the mouseup event outside of an HTML element.

Listen to the mouseup Event Outside of an HTML Element

To listen to the mouseup event outside of an HTML element, we can call window.addEventListener method to listen to the mouseup event on the whole browser tab or window.

For instance, we can write:

window.addEventListener('mouseup', (event) => {  
  console.log('mouse up')  
})

We call window.addEventListener with 'mouseup' to listen to the mouseup event on the whole browser window.

Now when we lift the mouse button anywhere in the browser window, we see 'mouse up' logged.

Conclusion

To listen to the mouseup event outside of an HTML element, we can call window.addEventListener method to listen to the mouseup event on the whole browser tab or window.

Sometimes, we want to clear an input value after form submission in a React app.

In this article, we’ll look at how to clear an input value after form submission in a React app.

Clear an Input Value After Form Submission in a React App

To clear an input value after form submission in a React app, we can set the value of the input value states after the form is submitted.

For instance, we can write:

import { useState } from "react";

export default function App() {
  const [city, setCity] = useState("");

  const onHandleSubmit = (e) => {
    e.preventDefault();
    setCity("");
  };

  return (
    <div className="App">
      <form onSubmit={onHandleSubmit}>
        <input
          onChange={(e) => setCity(e.target.value)}
          value={city}
          type="text"
        />
        <button type="submit">Search</button>
      </form>
    </div>
  );
}

We create the city state with the useState hook.

Then we create the onHandleSubmit function that’s run when we submit the form with the Search button.

In the function, we call e.preventDefault() to prevent the default server-side form submission behavior.

Then we call setCity with an empty string to empty the city value, which is used as the value of the input.

In the input, we set the onChange prop to a function that calls setCity to set the city value to e.target.value , which has the inputted value.

And in the form element, we set onSubmit to onHandleSubmit to run the it when we submit the form.

Conclusion

To clear an input value after form submission in a React app, we can set the value of the input value states after the form is submitted.