Question 305866 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Correct way of getting an element from an input of html form using jQuery

I have tried to get an element called price input of an html form for jQuery without a success:

// HTML codes:

    <input type="text" id="priceID" name="price">

// jQuery codes:

    jQuery(document).ready(function($){
      //  jquery('#priceID').on("keyup", function(){
        jquery('#priceID').on("keyup", function(){
          //  var priceStr = jquery('#priceID').val();
          var priceStr = document.getElementById('priceID');
         // var priceStr = document.getElementsByTagName("INPUT");

            var valid = /^d{0,4}(.d{0,2})?$/.test(priceStr),
                val = priceStr.value;
            
            if(!valid){
                console.log("Invalid input!");
                priceStr.value = val.substring(0, val.length - 1);
            }
        });
    });

I use this guidance as a reference for testing the input string/value of the price field above:

Price field validation using javascript either jquery?

I have tried the above jQuery codes for a form at WordPress Admin backend. The html form is located somewhere in child theme. That may be an issue?

Please advise how to get the price value in a correct way.

Cheers

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    FIXED:

    I just insearted a line of code below:

        jQuery('#priceID').attr('required','required');

    on top inside the function created by Professor Abronsius to get attention from my wp theme (haha), and now the string entered in the Price field can be retrieved.

        jQuery(document).ready(function($) {
      jQuery('#priceID').on("keyup", function() {
        jQuery('#priceID').attr('required','required');
        /* 
          within the callback you can access $(this) to refer to the element
          and you can find the value of the input using val()
        */
        var price = $(this).val();

        var valid = /^d{0,4}(.d{0,2})?$/.test(price);

        if (!valid) {
          console.log("Invalid input!");

          /* Using val() again to set the modified value */
          $(this).val(price.substring(0, price.length - 1));
        }
      });
    });

    What would be Regex if I would like to have the following rules:

    1. Unlimited length of the price string

    2. Only numbers (0 to 9) can be entered

    3. No alphabetic characters can be entered, but if they are there should be a popup alert message saying that "Please enter a valid price".

    4. Is it possible to make jQuery issue similar warning message when users copy and paste invalid numbers into that price field?

    5. The same as (4) when users enter the number but with ZERO leading like: 028, 01803, etc.

    6. But only ZERO is entered would be accepted - no warning message needed.

    Many thanks for this great community.

    Cheers


  2. 0

    I’m not familiar with jQuery but have seen it enough to get some basic functionality working – the keyup callback has access to the element that triggered the event using $(this) and the native jQuery method val() can be used to both get and set the value therein.

    FYI: jquery is spelled incorrectly!

    jQuery(document).ready(function($) {
  jQuery('#priceID').on("keyup", function() {
    /* 
      within the callback you can access $(this) to refer to the element
      and you can find the value of the input using val()
    */
    var price = $(this).val();

    var valid = /^d{0,4}(.d{0,2})?$/.test(price);

    if (!valid) {
      console.log("Invalid input!");

      /* Using val() again to set the modified value */
      $(this).val(price.substring(0, price.length - 1));
    }
  });
});
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="priceID" name="price">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search