javascript - Alert message will show up after the submission - Stack Overflow

admin管理员组

文章数量:1337125

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>

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>

• javascript
• php
• jquery

Share Improve this question Follow edited Oct 18, 2015 at 13:50 MinusFour 14.4k44 gold badges3131 silver badges3939 bronze badges asked Oct 18, 2015 at 13:37 VistaVista 20122 gold badges55 silver badges2727 bronze badges 8

• If you want to display the alert after something happens then you'd need to write the code in response to that event. If the form is being submitted via AJAX then you'd display the alert in the response handler for the AJAX call. If the form is being submitted at the browser level then you'd need to display the alert on the next page instead of this one. – David Commented Oct 18, 2015 at 13:40
• Do you mean you need to stop submission of the form when form validation fails ? if so, add return false; to your myFunction when your form validation fails. – Sachin Commented Oct 18, 2015 at 13:41
• or atleast the "required/" must first shows up before the alert – Vista Commented Oct 18, 2015 at 13:45
• @Sachin If there is any false validation the alert message will not pop up – Vista Commented Oct 18, 2015 at 13:48
• You have only one input field? – Sandeep Nayak Commented Oct 18, 2015 at 13:52

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

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>

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;
    }
}

本文标签： javascriptAlert message will show up after the submissionStack Overflow