Jquery dynamically generated submit button and fields

Question

How can I submit this form after replacing the original submit button with a jQuery generated submit button?

Form:

<form action="url" method="post" accept-charset="utf-8" class="form horizontal" id="reg">        
     <select name ="type" id="owner">
          <option...>
     </select>
     <div class="controls-actions">
         <button  type="submit" id="sub">Submit</button>
     </div>
</form>

There is an event listener to add fields to the form:

$('#owner').change(function(){
    if($('#owner').val() == 1){
         $('#owner').after('<input name="added" value="2">');
     }     
})

Now, if I use the default submit button, the new field doesn't get posted, so I tried using .submit():

//remove the old submit button and add new one
$('.control-actions').empty().append('<button id="added">Submit>');

Finally add an event listener to the newly generated button to submit the form:

$('#added').on('click', function(){
    $('#reg').submit(); 
})

Nothing happens when the newly generated button is clicked, no console errors, no form submission. I have also tried click(), delegate() etc. jQuery version is 1.10

What exactly were you trying to do before you started removing and adding buttons? Because it sounds like you have an XY problem, and solving the original problem would be more beneficial. — Heretic Monkey
– Heretic Monkey, Commented Feb 21, 2017 at 18:46
@mike: Add dynamic fields to the form while keeping a submit button, that is, the form isn't submitted until it is clicked. A dynamic field could contain user input. — Kisaragi
– Kisaragi, Commented Feb 21, 2017 at 18:52
If that's your actual code, then $('.control-actions') isn't matching anything, because the class is "controls-actions." — Rick Hitchcock
– Rick Hitchcock, Commented Feb 21, 2017 at 19:00
Also, no reason to .empty().append(...) when you could simply .html(...). — Rick Hitchcock
– Rick Hitchcock, Commented Feb 21, 2017 at 19:20

gaetanoM · Accepted Answer · 2017-02-21 18:59:13Z

1

After changing the form fields adding other field and substituting the submit button you can handle the newly created submit button with a delegated event.

$(document).on('click', '#added', function(e) {
  //$('#reg').submit();
  console.log('#added clicked');
})


$('#owner').on('change', function(e){
    if ($('#owner').val() == 1){
        $('#owner').after('<input name="added" value="2">');
        $('.controls-actions').empty().append('<button type="button" id="added">Submit: click me to test</button>');
    }
})

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


<form action="url" method="get" accept-charset="utf-8" class="form horizontal" id="reg">
    <select name ="type" id="owner">
        <option value=""></option>
        <option value="1">1</option>
    </select>
    <div class="controls-actions">
        <button  type="submit" id="sub">Submit</button>
    </div>
</form>

edited Feb 21, 2017 at 18:59

answered Feb 21, 2017 at 18:46

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

2 Comments

Kisaragi Over a year ago

Typo in the question, will update. I've mixed the ids up.

gaetanoM Over a year ago

@Kisaragi Right! Try to use a delegated event. Answer updated.

Валерий Васильев · Accepted Answer · 2017-02-21 19:10:16Z

0

try this:

    $('.controls-actions').empty();
    $('<button id="added" value="Submit">').appendTo('.controls-actions').bind('click', function() {
         $('#reg').submit(); 
    });

answered Feb 21, 2017 at 19:10

Валерий Васильев

135 bronze badges

Collectives™ on Stack Overflow

Jquery dynamically generated submit button and fields

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related