jQuery-измените действие и идентификатор формы и используйте это

По-видимому, в DOM изменились значения, даже изменился идентификатор формы с идеей, что скрипт больше не имеет эффекта, но когда вы нажимаете кнопку Опубликовать, ничего не происходит. Поиск я попытался использовать "prop" вместо "attr", но это все еще не работает. Я думаю, что это из-за "e.preventDefault ()". Но я не знаю, как его отключить. Это мой код. Как вы можете видеть, как только запрос отправлен, вход и кнопка" Отправить " деактивированы, и когда значения получены, они измените идентификатор формы, идентификатор и имя кнопки, и она будет переименована в "опубликовать".

<script>
    jQuery(function($){
        var pluginUrl = '<?php echo plugin_dir_url( __FILE__ ); ?>' ;
        $('[id^="form-search"]').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type : 'POST',
                url  : 'http://localhost/ladoserver/getapi.php',
                data : $(this).serialize(),
                cache: false,
                beforeSend: function(){
                    $('input#keyword').prop('disabled', true);
                    $('button#search').prop('disabled', true);
                    $('#resuls').html('<img src="'+pluginUrl+'../../assets/img/loading.gif" />');
                }
            }).done(function(data) {
                $('#results').html(data);
                $('input#keyword').prop('value', 'PUBLISH DATA');
                $('button#search').prop({disabled: false, id:'publish', name:'publish'}).html('Publish');
                $('span#help').hide();
                $('[id^="form-search"]').prop('action','publish.php');
                $('[id^="form-search"]').prop('id', 'form-publish'); 
                var countResults = $('input#total_data').val();
                for (var i = 1; i <= countResults; i++) {
                    $('#lista>select').clone().prop({ id: "cat_"+i, name: "cat_"+i}).appendTo('.category_'+i);
                }
                $('#lista').remove();
            });
        });
    });
</script>

Вот мой html

        <form action="" method="post" class="form-search" id="form-search">
            <fieldset>
                <!-- Form Name -->
                <legend>Name</legend>
                <div class="form-group">  
                  <input id="keyword" name="keyword" required="" type="text">  
                  <button id="search" name="search" class="btn btn-success boton">Search</button>
                  <span class="help-block" id="help">Help</span>
                    <div id="lista" style="display:none">Test</div>
                </div>
            </fieldset>
            <div id="result"></div>
        </form>

Вот скрипка, показывающая, что произошло (check DOM). JSFiddle.net

1 2
javascript forms html jquery preventdefault

1 ответ:

            //var pluginUrl = '<?php echo plugin_dir_url( __FILE__ ); ?>' ;
            // when the action is plugin url.
            
            $(document).on('submit','[id^="form-search"]', function(e) {
                e.preventDefault();
                $.ajax({
                    type : 'POST',
                    url  : 'http://localhost/ladoserver/getapi.php',
                    data : $(this).serialize(),
                    cache: false,
                    beforeSend: function(){
                        $('input#keyword').prop('disabled', true);
                        $('button#search').prop('disabled', true);
                        $('#resuls').html('<img src="'+pluginUrl+'../../assets/img/loading.gif" />');
                    }
                }).done(function(data) {
                    $('#results').html(data);
                    $('input#keyword').prop('value', 'PUBLISH DATA');
                    $('button#search').prop({disabled: false, id:'publish', name:'publish'}).html('Publish');
                    $('span#help').hide();
                    $('[id^="form-search"]').prop('action','publish.php');
                    $('[id^="form-search"]').prop('id', 'form-publish'); 
                    var countResults = $('input#total_data').val();
                    for (var i = 1; i <= countResults; i++) {
                        $('#lista>select').clone().prop({ id: "cat_"+i, name: "cat_"+i}).appendTo('.category_'+i);
                    }
                    $('#lista').remove();
                });
            });

    // when the action point to publish.php    === This is what you need

      $(document).on('submit','[id^="form-publish"]', function(e) {
                e.preventDefault();
                var url = $(this).attr('action');
                $.ajax({
                    type : 'POST',
                    url  : url,
                    data : $(this).serialize(),
                    cache: false,
                    beforeSend: function(){
                        // do your pre-processing
                    }
                }).done(function(data) {
                    // do your post processing.
                });
            });        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <form action="" method="post" class="form-search" id="form-search">
                <fieldset>
                    <!-- Form Name -->
                    <legend>Name</legend>
                    <div class="form-group">  
                      <input id="keyword" name="keyword" required="" type="text">  
                      <input type ="submit" id="search" name="search" class="btn btn-success boton">Search</button> 
    <!-- change the button type to submit type -->
                      <span class="help-block" id="help">Help</span>
                        <div id="lista" style="display:none">Test</div>
                    </div>
                </fieldset>
                <div id="result"></div>
            </form>
1