html forms not calling right function on submit

Question

EDIT: I have 2 forms on HTML page and both forms has single submit button. I tried to call particular function when submit button pressed. For this I am using 2 <script> tag which handle submit button click but as soon as I add 2 <script> tag it just refresh the page.

Form 1.

<div class="contact-form col-md-6 ">
  <form id="contact-form" method="post" action="" role="form">
    <div class="form-group">
      <input type="text" placeholder="Your Name" class="form-control" name="name" id="name" required>
    </div>
    <div class="form-group">
      <input type="email" placeholder="Your Email" class="form-control" name="email" id="email" required>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" id="phone" required>
    </div>
    <div class="response_msg"></div>
    <div id="mail-success" class="success">
      Thank you. Welcome in Family. :)
    </div>
    <div id="mail-fail" class="error">
      Sorry, don't know what happened. Try later :(
    </div>
    <div id="cf-submit">
      <input type="submit" id="contact-submit" class="btn btn-transparent" value="Register" name="submit">
    </div>
  </form>
</div>

Form 2

<div class="contact-form col-md-6 ">
  <form id="contact-form_message" method="post" action="" role="form">
    <div class="form-group">
      <input type="text" placeholder="Your Name" class="form-control" name="name" id="name" required>
    </div>
    <div class="form-group">
      <input type="email" placeholder="Your Email" class="form-control" name="email" id="email" required>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" id="phone" required>
    </div>
    <div class="response_msg"></div>
    <div id="mail-success" class="success">
      Thank you. Welcome in Family. :)
    </div>
    <div id="mail-fail" class="error">
      Sorry, don't know what happened. Try later :(
    </div>
    <div id="cf-submit">
      <input type="submit" id="contact-submit" class="btn btn-transparent" value="Register" name="submit">
    </div>
  </form>
</div>

Using 2 tag for each form

  <script> 
```
$(document).ready(function(){
  $("#contact-form").on("submit",function(e){
    e.preventDefault();
    if($("#contact-form [name='name']").val() === '')
      {
      $("#contact-form [name='name']").css("border","1px solid red");
      }
    else if ($("#contact-form [name='email']").val() === '')
      {
      $("#contact-form [name='email']").css("border","1px solid red");
      }
    else if ($("#contact-form [name='phone']").val() === '')
      {
      $("#contact-form [name='phone']").css("border","1px solid red");
      }
    else
    {
      $("#loading-img").css("display","block");
      var sendData = $( this ).serialize();
      $.ajax({
        type: "POST",
        url: "js/ajaxsubmit.php",
        data: sendData,
        success: function(data)
        {
          $("#loading-img").css("display","none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form").find("input[type=text], input[type=email], textarea").val("");
        }
      });
    }
    return false;
  });

  $("#contact-form input").blur(function(){
    var checkValue = $(this).val();
    if(checkValue != '')
      {
      $(this).css("border","1px solid #eeeeee");
      }
  });
});
```
    </script> 

    <script>
```
$(document).ready(function () {
  $("#contact-form_message").on("submit1", function (e) {
    e.preventDefault();
    if ($("#contact-form_message [name='name1']").val() === '') {
      $("#contact-form_message [name='name1']").css("border", "1px solid red");
    } else if ($("#contact-form_message [name='email1']").val() === '') {
      $("#contact-form_message [name='email1']").css("border", "1px solid red");
    } else if ($("#contact-form_message [name='phone1']").val() === '') {
      $("#contact-form_message [name='phone1']").css("border", "1px solid red");
    } else if ($("#contact-form_message [name='message1']").val() === '') {
      $("#contact-form_message [name='message1']").css("border", "1px solid red");
    } else {
      $("#loading-img").css("display", "block");
      var sendData = $(this).serialize();
      $.ajax({
        type: "POST",
        url: "js/contact.php",
        data: sendData,
        success: function (data) {
          $("#loading-img").css("display", "none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form_message").find("input[type=text], input[type=email], textarea").val("");
        }

      });
    }
    return false;
  });

  $("#contact-form_message input").blur(function () {
    var checkValue = $(this).val();
    if (checkValue != '') {
      $(this).css("border", "1px solid #eeeeee");
    }
  });
});

```
    </script>

I need to call desire function when submit button pressed. When i use only first form without double function as above then JS works fine as expected but as soon as I add one more <script> for another form it just refresh the page without submitting the form. Please help me in this. I am not good in JS.

Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — ADyson, Sep 28 '19 at 23:15
This really makes no sense. Why would you add JavaScript (which controls submitting a form) based on the same form having been submitted...you've got the whole process backwards. PHP runs on the server, first, when your page is being created. JavaScript runs on the browser, once the page is ready. So those PHP `if` statements will prevent the JavaScript from being added to your page when you first create it — ADyson, Sep 28 '19 at 23:18
P.s. do you realise you don't need all that manual validation code just to check if a field is empty or not? Simply add the `required` attribute to the input elements and the browser will do the rest. Google "HTML5 validation" for more info — ADyson, Sep 28 '19 at 23:20
@MisterJojo each form id and value is different please check. I am not using php anymore in above code. — Ritu, Sep 28 '19 at 23:33
so, `id="` `mail-success`, `mail-fail`, `cf-submit`, `contact-submit` **are not unique** — Mister Jojo, Sep 28 '19 at 23:44
Ok so both your forms have the same ID. This is invalid. IDs must be unique (or else, semantically, it's not an ID, because you can't use it to identify that specific item!). So when you use the ID to select the element in your jQuery, it cannot tell which form you mean. Since it has know way to know, it assumes you mean the first one, and it then considers the second one with the same ID to be invalid and ignores it. — ADyson, Sep 28 '19 at 23:50
@ADyson form 2 has `contact-form_message` ID and form 1 has `contact-form`. both are different — Ritu, Sep 28 '19 at 23:57
Not in your edited code they aren't. Look at what you posted. Did you make a copy and paste error or something? Your two forms are the same. — ADyson, Sep 29 '19 at 00:04
@ADyson Sorry it was copy paste error. Can you please help me in this problem — Ritu, Sep 29 '19 at 00:08

Mister Jojo · Accepted Answer · 2019-09-29T01:15:28.023

for a start...

<div class="contact-form col-md-6 ">
  <form id="contact-form" method="post" action="" role="form">
    <div class="form-group">
      <input type="text" placeholder="Your Name" class="form-control" name="name" required>
    </div>
    <div class="form-group">
      <input type="email" placeholder="Your Email" class="form-control" name="email"  required>
    </div>
    <div class="form-group">
      <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" required>
    </div>
    <div class="response_msg"></div>
    <div class="mail-success success">
      Thank you. Welcome in Family. :)
    </div>
    <div class="mail-fail error">
      Sorry, don't know what happened. Try later :(
    </div>
    <div id="cf-submit">
      <input type="submit" class="btn btn-transparent" value="Register" >
    </div>
  </form>
</div>

<div class="contact-form col-md-6 ">
    <form id="contact-form_message" method="post" action="" role="form">
      <div class="form-group">
        <input type="text" placeholder="Your Name" class="form-control" name="name" required>
      </div>
      <div class="form-group">
        <input type="email" placeholder="Your Email" class="form-control" name="email" required>
      </div>
      <div class="form-group">
        <input type="text" placeholder="Your Phone Number" class="form-control" name="phone" required>
      </div>
      <div class="response_msg">
      </div>
      <div id="mail-success" class="success">
        Thank you. Welcome in Family. :)
      </div>
      <div id="mail-fail" class="error">
        Sorry, don't know what happened. Try later :(
      </div>
      <div id="cf-submit">
        <input type="submit" class="btn btn-transparent" value="Register" >
      </div>
    </form>
  </div>

$(document).ready(function () {

  $("form input").blur(function () {
    var checkValue = $(this).val();
    if (checkValue != '') {
      $(this).css("border", "1px solid #eeeeee");
    }
  });

  function checkSubmitInputs(form)
  {
    $("input[type=text], input[type=email], textarea", form).css("border", "");

    var ret = false;
    if (     $("input[name='name']", form).val() === '')
      {      $("input[name='name']", form).css("border", "1px solid red");       }
    else if ($("input[name='email']", form).val() === '')
      {      $("input[name='email']", form).css("border", "1px solid red");      }
    else if ($("input[name='phone']", form).val() === '') 
      {      $("input[name='phone']", form).css("border", "1px solid red");      }
    else if ($("textarea[name='message']", form).val() === '')
      {      $("textarea[name='message']", form).css("border", "1px solid red"); }
    else
      { ret = true; }

    return ret
  }

  $("#contact-form").on("submit",function(e)
  {
    var sendData = $(this).serialize();
    e.preventDefault();

    if ( checkSubmitInputs(this)  )
    {
      $.ajax({
        type: "POST",
        url: "js/ajaxsubmit.php",
        data: sendData,
        success: function(data)
        {
          $("#loading-img").css("display","none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form").find("input[type=text], input[type=email], textarea").val("");
        }
      });
    }
  })

  $("#contact-form_message").on("submit",function(e)
  {
    var sendData = $(this).serialize();
    e.preventDefault();

    if ( checkSubmitInputs(this)  )
    {
      $.ajax({
        type: "POST",
        url: "js/contact.php",
        data: sendData,
        success: function (data) {
          $("#loading-img").css("display", "none");
          $(".response_msg").text(data);
          $(".response_msg").slideDown().fadeOut(3000);
          $("#contact-form_message").find("input[type=text], input[type=email], textarea").val("");
        }
      });
    }
  })

});

Can you tell me why using same name for both forms and no name value for submit button. How we can differ each other — Ritu, Sep 29 '19 at 10:23
Thanks.It works but can you tell me how to disappear whole form and in that area show success message. — Ritu, Sep 29 '19 at 11:40
@Ritu 1 _ The jQuery serialization feature uses names, not IDs. 2 _ the IDs must be unique: even if you have 2 forms on the same page, the same ID can only exist once. Even if they are inside 2 different forms. That's what you did in your code and what everyone is telling you here. 3 _ names belongs to forms, on JS "pure" you can directly acces to inputs by using FormElement.name, this more simplier to code. — Mister Jojo, Sep 29 '19 at 13:34
@Ritu remove a form or form element must be treated with css / JS. You have not given any indication on this topic, and I suppose you are using a CSS framework, but I do not know which one, and which version, which would necessarily affect the type of code to produce. Computer science is not a divinatory art. — Mister Jojo, Sep 29 '19 at 13:39

html forms not calling right function on submit

1 Answers1