Jquery does not find form

Asked

Viewed 79 times

1

I am using a form as follows:

<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. This way Jquery does not find the form but if I put an onclick in the form button that calls a function that executes this jquery then I can find the form but the new Formdata(this) operation returns an error. What might be causing Jquery to not find the form?

javascript jquery html5 wordpress

  • I don’t know if it’s gonna work @Andrear, it’s a hunch, but try it this way: new FormData($(this)).

  • The error persists

  • The form is loaded onto the screen dynamically?

  • Could you put the html of the form after it is generated by PHP?

2 answers

1


Try to use .on('Ubmit') instead of .Submit()

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

That way, even if the form enters later on the page the event will work because it was added to document, not a non-existent element in page loading.

0

Sometimes javascript runs before your form is loaded, so you didn’t add your event to the form and it might be that. use that way:

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

Browser other questions tagged javascript jquery html5 wordpress

You are not signed in. Login or sign up in order to post.