CODEWITHSUNDEEP
javascriptjquerytooltip
wayneuk2
wayneuk2

Reputation: 154

showing tooltip if field(s) are empty on click

I know this is similar to the 'required' on a form but I need it to work like this if possible. I am using modified code from here already but it only works on 1 form element. The only way I can do it is to add the same proccess 4 times but is there a quicker and cleaner way of doing it???? Basically so this could be used on multiple forms with various different inputs get different message. Thanks

The JS fiddle is https://jsfiddle.net/DTcHh/79251/

and the HTML code is 

<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Check form</button>
<input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number2" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number3" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">
<input type="number4" name="stock" class="form-control" id="id_stock" required="" data-original-title="" title="">

and the JS is :

/* Latest compiled and minified JavaScript included as External Resource */
// Initialize tooltip on #id_stock input
$('#id_stock').tooltip({
  title: "Please enter address",
  trigger: "manual"
});

// Manually hide tooltip when re-clicking the input
// This can be modified to hide the tooltip whenever you see fit
$("#id_stock").click(function(e) {
  $(this).tooltip("hide");
});

$("#id_stock_btn").click(function() {
  /* Act on the event */
  if(!$('#id_stock').val())
  {
    $('#id_stock').tooltip("show");  // Show tooltip
  }
  else {
    //Do Some Other Stuff
  }

});

Upvotes: 1

Views: 4021

Answers (2)

Vignesh Raja
Vignesh Raja

Reputation: 8751

First, you should not use same ids to multiple elements. They must be unique. To handle same process for multiple elements, use class or data- attributes.

$('.form-control').tooltip({
    trigger: "manual"
});

$("#id_stock_btn").click(function(){
    $(".form-control").each(function(){
        if(!$(this).val())
        {
            $(this).tooltip("show");
            return false;
        }
    });
    
});

$(".form-control").click(function(e) {
    $(this).tooltip("hide");
});
body {
    margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Check form</button>
<input type="number" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Name" title="">
<input type="number2" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Email" title="">
<input type="number3" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Phone" title="">
<input type="number4" name="stock" class="form-control" id="id_stock" required="" data-original-title="Please  enter Address" title="">

Upvotes: 0

owmasch
owmasch

Reputation: 69

If I'm understanding your question correctly, you're trying to apply the save javascript to 4 similar elements.

An easy way of doing this would be to wrap your inputs in a div and then change the jquery selector to select all of the forms. I got the following code to work in your JS fiddle.

<label class="control-label" for="id_stock">Stock</label>
<button id="id_stock_btn" type="button" name="stock_btn">Check form</button>
<div id="wrapper">

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). Names should be different.

    <input type="number" name="stock" class="form-control" id="id_stock1" required="" data-original-title="" title="">
    <input type="number2" name="stock1" class="form-control" id="id_stock2" required="" data-original-title="" title="">
    <input type="number3" name="stock2" class="form-control" id="id_stock3" required="" data-original-title="" title="">
    <input type="number4" name="stock3" class="form-control" id="id_stock4" required="" data-original-title="" title="">
</div>


/* Latest compiled and minified JavaScript included as External Resource */
    // Initialize tooltip on #id_stock input
    $('#wrapper input').tooltip({
      title: "Please enter address",
      trigger: "manual"
    });

    // Manually hide tooltip when re-clicking the input
    // This can be modified to hide the tooltip whenever you see fit
    $('#wrapper input').each(function() {
        $(this).click(function(e) {
            $(this).tooltip("hide");
        })
    });

    $("#id_stock_btn").click(function() {
      /* Act on the event */
      $('#wrapper input').each(function() {
          if(!$(this).val())
          {
            $(this).tooltip("show");  // Show tooltip
          }
          else {
            //Do Some Other Stuff
          }
      })

    });

Upvotes: 1

Related Questions