提交一个表单导致提交另一个：页面中的3个Html表单

** Scenario:**

I have 3 forms in one page (settings)
When I click on any button, the other two forms are set to hide by jquery

** Problem:**

When I submit the second form or the third, the first form is been submitted only although all the forms name are different
the other two forms do not even respond to jquery and to the preventDefault method

first form submit code :

$('form[name=noteForm]').submit(function(e){    
    var postData = $(this).serialize();
    $.ajax({
        url: baseURL + "admin/Settings/ChangeNotificationSettings",
        type:'post',
        data:postData,
        success:function(data){
            SetNotificationModal('settings successfully updated');
        } ,
        error:function(data){
            alert(data);
        }
    });
    e.preventDefault();
});

second form :

$('form[name=socialMedia]').submit(function(evt){
        evt.preventDefault();
        var postData = $(this).serialize();
        $.ajax({
            url:baseURL +"admin/settings/change_social_media",
            type:'post',
            data:postData,
            success:function(){
                SetNotificationModal('social media settings updated');
            }    
        });    
    });

You have to use the id in the form tag

This is for your first Form Notifications

$('#form1').submit(function(e){
  var postData = $(this).serialize();

  $.ajax({
    url: baseURL + "admin/Settings/ChangeNotificationSettings",
    type: 'post',
    data: postData,
    success:function(data){
      SetNotificationModal('settings successfully updated');
    } ,
    error:function(data){
      alert(data);
    }
  });
  e.preventDefault();
});

This is for your second Form SocialMedia

<form id="form2"></form>

$('#form2').submit(function(evt){
  evt.preventDefault();
  var postData = $(this).serialize();
  $.ajax({
    url:baseURL +"admin/settings/change_social_media",
    type:'post',
    data:postData,
    success:function(){
     SetNotificationModal('social media settings updated');
    }    
  });    
});

Hope this helpful for you

First ensure your all forms are separated or closed with tag. if you miss any then it will miss behave because of nested form.

check your Html

<html>
    <body>
        <form name='noteForm'>
            <button>NoteForm Submit</button>
        </form>

        <form name='socialMedia'>
            <button>SocialMedia Submit</button>
        </form>  
    </body>
</html>

Your Js

$('form[name=noteForm]').submit(function(e){


 var postData = $(this).serialize();

$.ajax({
url: baseURL + "admin/Settings/ChangeNotificationSettings",
type:'post',
data:postData,
success:function(data){

SetNotificationModal('settings successfully updated');

} ,
error:function(data){

alert(data);

}

 });


e.preventDefault();
});

////////////second form

$('form[name=socialMedia]').submit(function(evt){

 evt.preventDefault();

 var postData = $(this).serialize();

$.ajax({

url:baseURL +"admin/settings/change_social_media",

type:'post',

data:postData,

success:function(){


SetNotificationModal('social media settings updated');

}    
});    
});