CODEWITHSUNDEEP
javascriptphpjquery
Vista
Vista

Reputation: 201

Alert message will show up after the submission

My alert message pop ups before the loading/submission of a record, so if the user didn't input any data. It still pops up. What additional javascript function should I use for my alert box?

Here's my code 

function myFunction() {
    alert("Adding Succesful!");
}
<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
 <input name="bName" class="form-control req" required/> 

<button type="submit" class="btn btn-default bt"  onclick="myFunction()" style="align:right;">ADD</button>

Upvotes: 1

Views: 20295

Answers (2)

MinusFour
MinusFour

Reputation: 14423

Use HTML5 validity checks to see if the form is valid or not.

var form = document.getElementById('f');

function myFunction() {
  if (form.checkValidity()) {
    alert("Adding Succesful!");
  }
}
<form id="f">
  <label for="bName" class="control-label col-xs-4">
    <p class="left">Brand Name</p>
  </label>
  <input name="bName" class="form-control req" required/>

  <button type="submit" class="btn btn-default bt" onclick="myFunction()" style="align:right;">ADD</button>
</form>

Upvotes: 3

Ultimater
Ultimater

Reputation: 4738

Try using:

<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
 <input name="bName" class="form-control req" required/> 

<button type="submit" class="btn btn-default bt"  onclick="return myFunction(this)" style="align:right;">ADD</button>

(note I changed the onclick to include a return and a this)

And use it with the JavaScript:

function myFunction(t)
{
    if($(t).prev().val())
    {
        alert('Adding Succesful!')
        return true;
    }else{
        return false;
    }
}

Upvotes: 1

Related Questions