Дублированные записи в mySQL с помощью jQuery ajax и PHP

Я использую jQuery (версия 1.8.1) с PHP (версия 5.3), чтобы отправить форму, добавляющую запись в базу данных mySQL, то, что происходит, на первом отправлении все нормально, но для каждой последующей отправки без обновления страницы она добавляет дополнительная запись.

Кроме того, я также использую Bootstrap (версия 2.1.1) и виджет загрузки из Jasny для Bootstrap (версия j1a) в пользовательском интерфейсе. Я еще не подключил виджет загрузки к обработке или отправке, поскольку я обнаружил проблему дублирования при ее реализации.

• Передача переменной JQuery в php в модальном
• Аккаунт Bootstrap Active для модальных скрытых
• Изменение диалогового окна подтверждения javascript для загрузки
• Передача переменной PHP в bootstrap modal
• добавление класса в form_submit в PHP Codeigniter

Обратите внимание, что это доказательство концепции системы, поэтому код является грубым, поскольку я не собираюсь вкладывать средства в его очистку до тех пор, пока проект не будет подтвержден. Из-за этого вы заметите некоторые встроенные запросы mySQL, я знаю, что это не лучший способ сделать это, однако он работает с целью демонстрации и позже будет очищен. Также, как система POC, она находится на внутреннем сервере в настоящее время, я могу поделиться этим кодом, но пока не могу показать пример сайта.

Теперь, к примеру, в первом выпуске для «Company 1» добавлено 1 запись для «Company 1», вторая запись для «Company 2» добавляет 2 записи для «Company 2», третья запись для «Компании 1», Компания 3 "добавляет 3 записи для" Company 3 "и так далее. Если я перезагружу страницу формы каким-либо образом (обновить или новый запрос), проблема будет перезапущена из первого представления.

Я использую serialize jQuery с ajax для размещения данных в PHP-процессоре. Я зарегистрировал все сообщения, полученные процессором, и я вижу, что процессор получает несколько записей из формы, я думал, что это может быть вызвано циклом foreach в PHP, но это не так.

Я удалил функции jQuery, и он отлично работает каждый раз без каких-либо дубликатов на обычном PHP submit. Я вручную обработал записи через jQuery, а не serialize но так как есть динамический массив через PHP, я все еще использовал serialize в этом массиве, это создало дубликаты, как описано выше. Я искал проблему в течение нескольких дней, но не могу найти ничего определенного, чтобы прояснить проблему, все предложения по блогам и форумам, которые выглядели связанными, не работали, я пробовал около 10-15 различных вариантов.

Сочетание всего этого приводит меня к мысли, что проблема исходит от функций serialize jQuery и / или ajax но мои глаза стали глазуроваться каждый раз, когда я смотрю на этот код сейчас.

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

Любая помощь очень ценится, заблаговременно за помощь!

код jquery

 <script> $(document).ready(function() { $('.fileupload').fileupload('name:logo'); $('.help-inline').hide(); $("#btn_process").click(function() { $('form').submit(function() { $('.help-inline').hide(); var company_name = $("#company_name").val(); if (company_name === "") { $("div#name_group").addClass("error"); $("span#name_error").show(); return false; } var dataString = $('form').serialize(); $.ajax({ type: "POST", url: "inc/addcompany.php", data: dataString, success: function(html) { if(html === 'success') { $('#message') .addClass("label label-success") .css("margin-bottom","20px") .html("<h3>Login successful</h3><p>Company added</p>") .slideDown(1500, function() {}); } else { $('#message') .addClass("label label-important") .css("margin-bottom","20px") .html("<h3>Error</h3><p>There was an error, please check the information and try again</p>") .slideDown(1500, function() {}); $("div#name_error").addClass("error"); $("span#name_error").show(); $("div#type_error").addClass("error"); $("span#type_error").show(); return false; } } }); return false; }); }); }); </script> . <script> $(document).ready(function() { $('.fileupload').fileupload('name:logo'); $('.help-inline').hide(); $("#btn_process").click(function() { $('form').submit(function() { $('.help-inline').hide(); var company_name = $("#company_name").val(); if (company_name === "") { $("div#name_group").addClass("error"); $("span#name_error").show(); return false; } var dataString = $('form').serialize(); $.ajax({ type: "POST", url: "inc/addcompany.php", data: dataString, success: function(html) { if(html === 'success') { $('#message') .addClass("label label-success") .css("margin-bottom","20px") .html("<h3>Login successful</h3><p>Company added</p>") .slideDown(1500, function() {}); } else { $('#message') .addClass("label label-important") .css("margin-bottom","20px") .html("<h3>Error</h3><p>There was an error, please check the information and try again</p>") .slideDown(1500, function() {}); $("div#name_error").addClass("error"); $("span#name_error").show(); $("div#type_error").addClass("error"); $("span#type_error").show(); return false; } } }); return false; }); }); }); </script> 

Разметка HTML

 <form class="form-horizontal" id="add_company" method="POST" action=""> <fieldset> <div id="message"></div> <div id="name_group" class="control-group"> <label class="control-label" for="company_name">Company name </label> <div class="controls"> <input type="text" id="company_name" name="company_name" /> <span id="name_error" class="help-inline">This needs to be more than 3 characters</span> </div> </div> <div id="type_group" class="control-group"> <label class="control-label">Company type </label> <div class="controls"> <? $sql = "SELECT description,id FROM types ORDER BY description"; $qry = mysql_query($sql) or die("ERROR: could not get company types => ".mysql_error()); while($company_type = mysql_fetch_array($qry)) { echo ' <label class="checkbox inline"><input type="checkbox" name="type[]" value="'.$company_type['id'].'" /> '.$company_type['description'].' </label>'; } ?> <span id="type_error" class="help-inline">Please select a minimum of 1 type</span> </div> </div> <div id="website_group" class="control-group"> <label class="control-label" for="website">Website </label> <div class="controls"> <input type="text" id="website" name="website" placeholder="www.something.com" /> </div> </div> <div id="logo_group" class="control-group"> <label class="control-label">Logo </label> <div class="controls"> <div class="fileupload fileupload-new" data-provides="fileupload"> <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="/img/50x50.png" /></div> <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div> <span class="btn btn-file"><span class="fileupload-new">Select image</span> <span class="fileupload-exists">Change</span> <input type="file" /></span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div> </div> </fieldset> <input type="hidden" name="action" value="add_company" /> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary" name="btn_process" id="btn_process">Save changes</button> </form> 

Процессор PHP

 $error = false; $error_company_name = false; $error_type = false; $error_website = false; $company_name = $_REQUEST['company_name']; $type = $_REQUEST['type']; $website = $_REQUEST['website']; $logo = $_REQUEST['logo']; if(empty($company_name)) { $error = true; $error_company_name = true; } include_once('db.php'); $sql = "SELECT description,id FROM company_types"; $qry = mysql_query($sql) or die("ERROR: could not get company types => ".mysql_error()); $type_count = 0; while($array = mysql_fetch_array($qry)) { $type_count = $type_count+1; } if($type_count == 0) { $error = true; $error_type = true; } $ic = 0; foreach($_REQUEST['type'] as $item) { $ic = $ic+1; } if($ic == 0) { $error = true; $error_type = true; } if(isset($website) && $website != ' ') { $url = 'http://'.$website; if(!filter_var($url, FILTER_VALIDATE_URL)) { $error = true; $error_website = true; } } if($error == false) { $sql = "INSERT INTO company_list (name,website,logo) VALUES('$company_name','$website','$logo')"; $qry = mysql_query($sql) or die ("ERROR: could not add company => ".mysql_error()); $company_id = mysql_insert_id($link); if($company_id == '' || $company_id == null || empty($company_id)) { echo 'fail'; exit; } foreach($_REQUEST['type'] as $company_type) { $sql = "INSERT INTO companies_types (companies_id,type_id) VALUES('$company_id','$company_type')"; $qry = mysql_query($sql) or die("ERROR: could not link company type: => ".mysql_error()); } echo 'success'; }