0

So, again, I'm new to JQuery but for whatever reason JQuery isn't appending the form when I click the "Add Scenario" button. It's not even getting to the function involving #add. I have a breakpoint set on the .on() line and it doesn't seem to recognize it when I click.

$(document).ready(function ()
{
    $('#add').on('submit',function(e)
    {
        var form = "<div class='form'>\
        <h3> Scenario </h3>\
        <form id='scenario'>\
            <div>Name: <input type='text' name='ScenarioName'> </div>\
            <div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>\
            <div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>\
            <div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>\
            <div><input type='submit' value='Submit'></div>\
        </form>\
        <div><button id='add' type='submit'>Add Scenario </button></div>\
    </div>"
        $('body').append($(form));
        e.preventDefault();
    });
});

<body>
    <div class='form'>
        <h3> Basic Information </h3>
        <form id='basic'>
            <div>Year of Birth: <input type='number' name='YOB'> </div> 
            <div>Current Savings: <input type='number' name='CurrSav'> 
            </div>  
            <div>Expected Retirement Age: <input type='number' name='RetAge'></div>     
            <div>Life expectancy: <input type='number' name='LifeExp'>
            </div>  
            <div><input type='submit' value='Submit'></div> 
        </form>
    </div>
    <div class='form'>
        <h3> Scenario </h3>
        <form id='scenario'>
            <div>Name: <input type='text' name='ScenarioName'> </div>
            <div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>
            <div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>
            <div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>
            <div><input type='submit' value='Submit'></div>
        </form>
        <div><button id='add' type='submit'>Add Scenario </button></div>
    </div>
</body>
Improve this question
1
  • You're listening for the submit event of a form, and the button is not inside that form, so how is that supposed to work ? Commented Oct 2, 2013 at 9:06

3 Answers 3

Reset to default
3

Instead of the submit event handler you need to use the click event handler - submit event is for the form element, you are registering the handler for the button element.

$(document).ready(function () {
    $('#add').on('click', function (e) {
        var form = "<div class='form'>\
        <h3> Scenario </h3>\
        <form id='scenario'>\
            <div>Name: <input type='text' name='ScenarioName'> </div>\
            <div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>\
            <div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>\
            <div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>\
            <div><input type='submit' value='Submit'></div>\
        </form>\
    </div>";
        $(this).parent().before(form)
        e.preventDefault();
    });
});

Demo:

$(document).ready(function() {
  $('#add').on('click', function(e) {
    var form = "<div class='form'>\
        <h3> Scenario </h3>\
        <form id='scenario'>\
            <div>Name: <input type='text' name='ScenarioName'> </div>\
            <div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>\
            <div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>\
            <div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>\
            <div><input type='submit' value='Submit'></div>\
        </form>\
    </div>";
    $(this).parent().before(form)
    e.preventDefault();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <h3> Basic Information </h3>

  <form id='basic'>
    <div>Year of Birth:
      <input type='number' name='YOB' />
    </div>
    <div>Current Savings:
      <input type='number' name='CurrSav' />
    </div>
    <div>Expected Retirement Age:
      <input type='number' name='RetAge' />
    </div>
    <div>Life expectancy:
      <input type='number' name='LifeExp' />
    </div>
    <div>
      <input type='submit' value='Submit' />
    </div>
  </form>
</div>
<div class='form'>
  <h3> Scenario </h3>

  <form id='scenario'>
    <div>Name:
      <input type='text' name='ScenarioName' />
    </div>
    <div>Rate of Investment Return (While Working):
      <input type='number' name='Working' />
    </div>
    <div>Rate of Investment Return (Retired):
      <input type='number' name='Retired' />
    </div>
    <div>Desired Retirement Yearly Income:
      <input type='number' name='desiredInc' />
    </div>
    <div>
      <input type='submit' value='Submit' />
    </div>
  </form>
  <div>
    <button id='add' type='submit'>Add Scenario</button>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Would you mind, very briefly, explaining the difference between the two. Or point me to something that would help. I guess 'click' is pretty self explanatory but what makes 'submit' different
@sreya submit event only can be used for HTMLFormElement not for a button
The submit event is not triggered by the input element, it is by the form element when it is submitted... when you click on a submit button it internally triggers a form submission which will cause the submit event to trigger
@sreya in your case since the event is registered to the button itself you need to use the click event
Okay cool, thanks! Another thing I noticed is that when I duplicated my form that when I clicked the "Add scenario" button on the duplicates no action occurs. Is there any was to change that?
|
1

Try this:

$('#add').on('click', function(e) // <-- click instead of submit
    {
        var form = "<div class='form'>\
        <h3> Scenario </h3>\
        <form id='scenario'>\
            <div>Name: <input type='text' name='ScenarioName'> </div>\
            <div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>\
            <div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>\
            <div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>\
            <div><input type='submit' value='Submit'></div>\
        </form>\
        <div><button id='add' type='submit'>Add Scenario </button></div>\
    </div>";
        $('body').append(form); // no need to wrapping with jQuery
    });
Improve this answer

Comments

0

Your click event handler is wrong.

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to form elements.

Change this 

 $('#add').on('submit',function(e)

to:

$('#add').on('click',function(e)
Improve this answer

1 Comment

bah, idk who answered first

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.