Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2019
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Jquery check user input and print text

    Hello to all members of the forum!
    I have the following problem - I have to check user input, and if blank is used, to display text under field. If another blank space is used, to display another field.

    Code:
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <script src="jquery-3.3.1.min.js"></script>
        <title> Jquery</title>
      </head>
      <body>
    
    
        <input type="text" name="prvi" id="prvi" value="Tag"></input>
    
        <button type="button" id="ponisti" name="ponistavanje">Poništi</button>
    
        <div id="prikazati"><br></div>
        <hr>
        <input type="number" name="broj1" placeholder="min"></input>
        <input type="number" name="broj2" placeholder="max"></input>
        <button type="button" name="generisi">Generiši</button>
    <script>
    
    var input_karakter = document.getElementById('prvi');
    var paragraf = document.getElementById('prikazati');
    input_karakter.onkeydown = function(e) {
      if input_karakter == keycode 32
    };
    
    $(function() {
        var sadrzaj = ("text");
    });
    
    </script>
    
      </body>
    </html>
    I have to print Tag under first field, if blank space is used, and if another blank is used, to print Tag2.
    Any suggestions ?

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,197
    Thanks
    38
    Thanked 1,092 Times in 1,088 Posts
    If this was something to use JavaScript for then use JS and not Jquery, it is a lot of overhead for such a small task.
    Try this in HTML and see if you like it:
    Code:
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <!-- <script src="jquery-3.3.1.min.js"></script> -->
    <title>Do Not Use Jquery</title>
    </head>
    
    <body>
    <form>
    <input type="text" name="prvi" id="prvi" placeholder="Tag" required>
    
    <!-- <div id="prikazati"></div> -->
    <br>
    <hr>
    
    <input type="number" name="broj1" placeholder="min">
    <input type="number" name="broj2" placeholder="max">
    <br><br>
    <input type="submit" value="Generiši">
    <input type="reset" value="Poništi">
    </form>
    
    </body>
    </html>
    And if you want to use a different message do this :
    Code:
    <body>
    <form>
    <input type="text" name="prvi" id="prvi" placeholder="Tag" required oninvalid="this.setCustomValidity('Please Some Text Boya')">
    Last edited by sunfighter; Aug 25th, 2019 at 11:42 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,752
    Thanks
    5
    Thanked 539 Times in 525 Posts
    The different message approach could also be handled without scripting using CSS generated content.

    Code:
    <input type="text" name="prvi" id="prvi" placeholder="Tag" required>
    <span></span>
    Code:
    input:invalid + span:before {
    	content:"Your required text here";
    }
    So in modern terms, this REALLY isn't JavaScript's job. Much less something for the bloated idiotic train wreck laundry list of how NOT to write JavaScript that is jQuery.
    Last edited by deathshadow; Aug 25th, 2019 at 11:56 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  4. #4
    New Coder
    Join Date
    Jul 2019
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank you very much.
    But there is another problem, probably there was misunderstanding.
    I need to check user input.
    If user is entering blank (or space), I need to fill under that field Tag, Tag2, Tag3, Tag4...
    For each one blank, I need to display one Tag.
    I need to use jquery, next step is to click on tags to remove them.
    Thank you.

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,752
    Thanks
    5
    Thanked 539 Times in 525 Posts
    Not sure that even makes sense. Could you explain it better? I mean, you've got enough problems with issues such as "PLACEHOLDER is NOT a LABEL" and an incomplete form...

    What are you trying to accomplish with this? What's the use case / actual data?
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  6. #6
    New Coder
    Join Date
    Jul 2019
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts
    There is field for user input.
    When user is enter one blank space, under user input "Tag1" will be added.
    With each new user input, user input field will be cleared.
    With each new user input of blank space, another "Tag2" "Tag3" and so on, will be added.
    When user click one of Tags, that tag will be removed.
    When there is mouse over Tag, that Tag changes it's color to yellow.
    When user click button "Reset", there will be clearing of user input field, as well as all Tags that have been displayed.
    That's part of my homework.
    Thank you.

  7. #7
    New Coder
    Join Date
    Jul 2019
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <script src="jquery-3.3.1.min.js"></script>
        <title> Jquery</title>
      </head>
      <body>
    
    
        <input type="text" name="prvi" id="prvi" value="Tag"></input>
    
        <button type="button" id="ponisti" name="ponistavanje">Poništi</button>
        <div class="prikazati"><br></div>
        <hr>
        <input type="number" name="broj1" placeholder="min"></input>
        <input type="number" name="broj2" placeholder="max"></input>
        <button type="button" name="generisi">Generiši</button>
    <script>
     var brojac = 1;
    $('#prvi').on('input', function(e) {
      if (e.target.value === ' ') {
        $('.prikazati').append('Tag' + brojac);
        $('#prvi').val('');
        brojac += 1;
            }
        });
        $('.prikazati').on('click', function() {
          $('.prikazati').remove(this);
        });
    
    $('#ponisti').click(function() {
      $('.prikazati').html('<br>');
      brojac = 1;
    });
    
    </script>
    
      </body>
    </html>
    Many unknown friends helped me. And I figured out the rest of my problem. But that's just the beginning.
    Now :
    Clicking space is creating Tag under input field.
    How to select just one Tag and to remove only clicked Tag, I manage to remove all Tags at once by clicking on one tag ?
    Thank you.

  8. #8
    New Coder
    Join Date
    Jul 2019
    Posts
    16
    Thanks
    9
    Thanked 0 Times in 0 Posts
    This is what left - how to append random number ?

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <script src="jquery-3.3.1.min.js"></script>
        <title> Jquery</title>
      </head>
      <body>
    
        <style>
    
        .obojeno = { color: red; size: 1.55em }
    
        </style>
    
        <input type="text" name="prvi" id="prvi" value="Tag"></input>
    
        <button type="button" id="ponisti" name="ponistavanje">Poništi</button>
        <div class="prikazati"><br></div>
        <hr>
        <form id="unesi" action="#">
    
        <input type="number" id="min" placeholder="min"></input>
        <input type="number" id="max" placeholder="max"></input>
        <button type="button" id="generisanje" name="generisi">Generiši</button>
    
    
        <p id="slu"><b>Slucajan broj </b></p>
        </form>
    <script>
    $('#slu').append('<b>[0-10]:</b>');
    
    var brojac = 1;
    var kopirati = $(`<div class="prikazati"></div>`);
    $('#prvi').on('input', function(e) {
     if (e.target.value === ' ') {
       kopirati.clone().insertAfter('#ponisti').append('Tag' + brojac);
       $('#prvi').val('');
       brojac += 1;
     }
    });
    $(document).on('click', '.prikazati', function() {
     $(this).remove();
    });
    
    $('#ponisti').click(function() {
     $('.prikazati').html('<br>');
     brojac = 1;
    });
    
    $('#generisanje').click(function()   {
      var don = Number(document.getElementById( 'min' ).value );
      var gor = Number(document.getElementById( 'max' ).value );
      var broj;
       broj = (Math.round( Math.random() *  (gor - don + 1)) +  don);
    //   $('#slu').replaceWith('<br> <br> Slucajan broj','['+ don + ' - ' + gor + ']: ');
    $('#slu').each(function(){
    var elemSlu = $(this);
    elemSlu.replaceWith('<br> <br> Slucajan broj','['+ don + ' - ' + gor + ']: ');
    });
    });
    
    </script>
    
      </body>
    </html>
    Tried with append... any suggestions ? Thank you.
    Part with - Slucajan broj - should be with added broj, as random variable.
    I have following problem - "broj" should be styled with css, with bigger font and other color. How to target only random number ?
    Last edited by CA.RIA; Sep 30th, 2019 at 09:02 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •