Отслеживать изменения в javascript

165

28 августа 2019, 17:50

Есть такая форма

<form method="post" id="ajax_form" action="" > 
   	<div class="container"> 
    Количество карточек 
    <input required=""type="number" id="quantity" name="quantity"> 
    Вариант исполнениея 
    <select name="option" class="form-control" id="option"> 
   						<option value="variant1">Вариант 1</option> 
   						<option value="variant2">Вариант 2</option> 
   						<option value="variant3">Вариант 3</option> 
   					</select> 
     
    <button id="calc-price" type="button" class="btn-warning">Посчитать</button> 
    Цена работы <span class="pricework">0</span> 
     
    Чтобы заказать, оставте свои данные и нажмите кнопку отправить 
     
    <div class="formemail"> 
          <input name="email" required="" class="form-control" type="email" placeholder="Ваш e-mail"> 
          <input name="name" required="" class="form-control" type="text" placeholder="Ваше имя"> 
          <input name="phone" class="form-control" type="text" placeholder="Ваш номер телефона (по желанию)"> 
        </div> 
         
        <button id="send" type="submit" class="btn-success">Отправить</button>

Потом у меня стоит js который по ajax передает данные на php обработчик

Мне нужно отслеживать варианты которые нажали люди но не заказали. Тоесть нажали кнопку Посчитать но не нажали кнопку Отправить.

Скрипт который пересылает данные выглядит так

$(document).ready(function() { 
 
  $("#ajax_form").submit(function() { 
    $.ajax({ 
      type: "POST", 
      url: "/calc-price/e-mail-form/send-form1.php", 
      data: $(this).serialize() 
    }).done(function() { 
      $(this).find("input, span").val(""); 
      alert("Спасибо за заявку! Скоро мы с вами свяжемся."); 
      $("#ajax_form").trigger("reset"); 
    }); 
    return false; 
  }); 
   
});

Я скопировал код и убрал некоторые события.

$(document).ready(function() { 
 
  $("#ajax_form").submit(function() { 
    $.ajax({ 
      type: "POST", 
      url: "/calc-price/e-mail-form/send-form1.php", 
      data: $(this).serialize() 
    }).done(function() { 
      $(this).find("input, span").val(""); 
    }); 
    return false; 
  }); 
   
});

Alert и Reset мне не нужен. Как повесить обработчик на кнопку

<button id="calc-price" type="button" class="btn-warning">Посчитать</button>

Если .submit(function(){}); я сделать уже не могу ( Все находится в одной форме) Это был первый вопрос=) Второй вопрос как сделать чтобы скрипт срабатывал только после 10 секунд на одного и того же пользователя? Ну чтобы если кто-то кликает 20 раз на кнопку то мне 20 e-mail не приходило.

Изменил скрипт вот так

$(document).ready(function() { 
 
  $("#calc-price").bind('click', function(){ 
    $.ajax({ 
      type: "POST", 
      url: "/calc-price/e-mail-form/send-form1.php", 
      data: $("#ajax_form").serialize() 
    }).done(function() { 
      $("#ajax_form").find("input, span").val(""); 
      alert("ок"); 
    }); 
    return false; 
  }); 
   
});

Теперь проблемма в том что обнуляются данные формы. И тут нету триггера reset. Не понимаю в чем причина.