Pressing the enter key to fire Onclick function, with multiple forms

Question

Idea: I'm trying to use the enter key to fire an onClick function from a submit input in #form1 without the enter key also firing off #form2 onclick function.

Issue: I got this code to work but the problem is my page has 2 forms and when I click enter from the 1st form's input field, it also fires the onClick for the 2nd form.

Question: Is there a way to hit enter from the 1st form's input field without firing off the 2nd form's onClick?

Notes: I've searched up and down in StackExchange and tried multiple answers but none seem to be working properly.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

   <script>
    function post1() {
        alert("Hey");
    }

    function post2() {
        alert("Hey Again");
    }
    </script>


<form id="form1">
 <input type="text" id="city1" class="form-control" required>
  </div><br />
  <br />
<input type="button" onclick="post1();" value="Post Ad!" id="sub1" class="btn btn-success btn-lg">
</form>

<form id="form2">
 <input type="text" id="city2" class="form-control" required>
  </div><br />
  <br />
<input type="button" onclick="post2();" value="Post Ad!" id="sub2" class="btn btn-success btn-lg">
</form>

<script>
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
    if(e.keyCode == 13) {
        e.preventDefault();
        $("#sub1").click();    
        return false;
    }
});
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
      if(e.keyCode == 13) {
          e.preventDefault();
          $("#sub2").click();    
          return false;
      }
});
</script>

I'm sorry if I missed a post that gives this answer, if so please someone reference me to that location so that I may understand this issue better and move on. Thank you in advanced.

The Fix for those who have the same issue!

Thanks to Jazzepi for the answer!

Change --> $(document).on('keyup keypress', 'form input[type="text"]', function(e) {...
To --> $(document).on('keyup keypress', 'form input[id="city1"]', function(e) {...

Answer 1

The problem is here in your code. You've attached an event delegate that responds to the same type of element. Because both listeners have form input[type="text"] each one will fire when you click on something that is a child of document, and matches that css selector. You need something that will discriminate between the two. Instead of what you have you could try #city1 and #city2 in the second argument to each of your on $.on calls.

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
    if(e.keyCode == 13) {
        e.preventDefault();
        $("#sub1").click();    
        return false;
    }
});

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
      if(e.keyCode == 13) {
          e.preventDefault();
          $("#sub2").click();    
          return false;
      }
});

Answer 2

When I ran your code, I noticed you have else clauses without prior if clauses in your function definitions. In addition, try to bind those handlers on the submit event and not the keypress or keyup event, because I think it would be impossible to prevent the default (prevent the form from submitting) if there is no submit button.