JQuery does not find form

Question

JQuery does not find form

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm using a form like this:

<form name="mapping_marc" method="post" id="mapping_marc">
        <?php foreach ($all_properties_id as $compound_name => $sub_properties) {?>
            <div class='form-group'>
                <label class='col-md-12 col-sm-12 meta-title no-padding' name="<?= $compound_name?>" id="<?= $compound_name?>"> <?= $compound_name?> </label>
            <?php foreach ($sub_properties as $name => $id){?>
                    <label class='col-md-6 col-sm-12 meta-title no-padding'style="text-indent: 5%;"> <?= $name?> </label>
                    <div class='col-md-6 col-sm-12 meta-value'>
                            <select name="<?= $name ?>" class='data form-control' id="<?= $name ?>">
                                <?php foreach ($all_marc_fields as $field) { ?>
                                    <option name="<?= $field ?>" id="<?= $field ?>" value="<?= $field ?>"><?= $field ?></option>
                                <?php } ?>
                            </select>
                    </div>
            <?php } ?>
            </div>
        <?php } ?>
        <button type="submit" class="btn btn-primary btn-lg tainacan-blue-btn-bg pull-right" id="mapping_save"><?php _e("Save", "tainacan"); ?></button>
 </form>

And JQuery like this:

$("#mapping_marc").submit(function (event) {
    event.preventDefault();

    $('#modalImportLoading').modal('show');
    $('#progressbarmapas').remove();

    $.ajax({
        url: $('#src').val() + '/controllers/collection/collection_controller.php?operation=save_mapping_marc',
        type: 'POST',
        data: {form: new FormData(this), collection_id: $("#collection_id").val()},
        success: function (elem) {
            if(elem.result)
            {
                window.location = elem.url;
            }
        }
    });
});

The form is inserted through a WordPress action. That way JQuery does not find the form but its me put an onclick on the form button that calls a function that executes this jquery so I can find the form but the new FormData (this) operation returns me an error. What could be causing JQuery not to find the form?

javascript jquery html5 wordpress

asked by anonymous 17.03.2017 / 13:50

2 answers

0

Sometimes javascript runs before your form is loaded, so your event is not added to the form, and it might be. use this way:

$(function(){ //executar somente quando o html for totalmente carregado
  $("#mapping_marc").on("submit", function(){
    //código
  })
})

20.03.2017 / 18:42

How do I put 3 backgrounds together? How to create product relationship with php and MySQL

score 1 · Accepted Answer

Try using .on ('submit') instead of . submit ()

$(document).on( 'submit', '#mapping_marc', function (event) { /* etc */ });

That way, even though the form later enters the page the event will work because it was added to the document , not to a nonexistent element in page load.