Ajax запрос триггеров submit .... почему?

Question

У меня есть кое-что, что может показаться немного немного, но здесь.

Все это делается с помощью JQuery

У меня есть функция «cont_refresh» я использую для освежающего содержимого страницы и тому подобное, который содержит запрос AJAX для передачи переменных на внешний документ/скрипт для обработки.

В дополнение к этому у меня есть анонимная функция, которая будет запущена на форме submit ..., которая должна быть полностью несвязанной и не должна произойти при нажатии этой кнопки.

Однако в какой-то момент, когда я запускаю «cont_refresh», функция отправки запускается, точка, в которой она появляется, запускает функцию отправки, когда я получаю запрос на мой запрос ajax.

Что происходит, я делаю запрос ajax, который предназначен только для запуска функции на сервере, а второй - для отправки моей формы ... Я не хочу, чтобы последнее произошло.

Есть две кнопки для обработки обеих этих вещей отдельно, одна - кнопка отправки, другая, связанная с этой проблемой, не является кнопкой отправки.

Почему? и как я могу это предотвратить?

Будет возникать вопрос, кружащийся вокруг ваших голов, о том, почему у этого шута есть две функции, которые в основном делают то же самое, но это для другой темы, для которой я бы изящно попросил вас поднять новое сообщение;;).

/* 
 
    This is what I want to run... it does but fails then.....(see below this function) 
 
*/ 
 
function cont_refresh(form,params,url,e,modal){ 
 
    $(".ng-loading-container").toggleClass("ng-loading-container-show"); 
 
    
 
    if(modal === 'undefined'){ 
 
     modal = false; 
 
    } 
 
    var request = $.ajax({ 
 
     method: 'post', 
 
     url: url, 
 
     data: params, 
 
     success: function(result){ 
 
      
 
      if(e !== '' && e !== 'undefined'){ 
 
       $(e).html(result);  
 
      } else { 
 
       alert('Success'); 
 
      } 
 
      
 
     }, 
 
     error: function(){ 
 
      alert('Page Error') 
 
      $(".ng-loading-container").toggleClass("ng-loading-container-show"); 
 
     }, 
 
     }).fail(function() { 
 
      alert("Something went wrong!"); 
 
      $(".ng-loading-container").toggleClass("ng-loading-container-show"); 
 
     }) 
 
    // end of cont_refresh() 
 
} 
 

 
/* 
 
.... This runs. Which is not my intention! 
 
*/ 
 

 
$('form').submit(function (e){ 
 
    e.preventDefault(); 
 
    submit_form(e.target); 
 
    // there is an additional function that handles any submition from this point but have not included it as . 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Rightly or wrongly the intention here is to run a stored SQL procudure.<br> 
 
<p>The reason the statements are stored in the db is so anyone (with access) can add and edit these statements or functions from my front end application.</p> 
 

 
<form role="form" action="myscript.php" method="post"> 
 
    <input type="hidden" name="stp_tsk_id" id="stp_tsk_id" class="form-control" value="34"> 
 
    <div class="form-group col-md-12"> 
 
     <label for="stp_function">Function (SQL statement)</label> 
 
     <textarea class="form-control" name="stp_function" id="stp_function" rows="3">SELECT * FROM SOME_TABLE</textarea> 
 
</div> 
 
<!-- this button should trigger only the function it is calling onclick --> 
 
<button role="button" 
 
     class="btn btn-default btn-md" 
 
     onclick="cont_refresh('',{'id':34},'app/handlers/process_steps.php')"> 
 
       Run this Step 
 
     </button> 
 
    
 
<!-- There is a second "submit" button but not relevent for this query --> 
 
    <button role="submit" class="btn btn-default btn-md">Save</button> 
 
</form>

Answer 1

Ответ относится к кнопкам.

Я не понимал, что с помощью кнопки HTML5 мне нужно было указать тип кнопки, чтобы предотвратить действие по умолчанию для отправки.

<button>This will Submit</button> 
<button type="button">Will not Submit</button> 

Я благодарю @TimBrownlaw & @Nitin для направления меня к решению.

Answer 2

Ok вы могли бы попробовать это ...

Дайте вашу форму идентификатор как

<form role="form" action="myscript.php" method="post" id="myForm"> 

Но, пожалуйста, не стесняйтесь быть более творческими с именем идентификатора ...

И измените ваше событие на

$('#myForm').submit(function (e){ 
    e.preventDefault(); 
    submit_form(e.target); 
    // there is an additional function that handles any submition from this point but have not included it as . 
}); 

И посмотрите, поможет ли это.

Answer 3

Вы добавили функцию form.submit глобально, которая, очевидно, будет вызвана после обновления страницы i.e на загрузке страницы.

Добавить $ ('form'). Submit() функция на событии нажатия кнопки или что-то еще.

Ваш Аякс не подает форму, ИТИС получения подан в связи с глобальной функцией $ («формой»). Представить()

$('form').submit(function (e){ // instead of form use here button click event 
    e.preventDefault(); 
    submit_form(e.target); 
    // there is an additional function that handles any submition from   this point but have not included it as . 
});