Я нашел учебник, который автоматически отправляет данные формы, но все, что я хочу сделать, это добавить кнопку отправки, чтобы передать данные в ajax.
Моя цель – иметь форму с несколькими входами и когда пользователь нажимает кнопку отправки, она отправляет ее через ajax и обновляет страницу без перезагрузки страницы. Кроме того, еще одна ключевая часть – это то, как она помещает все входы в массив, так что при запуске сценария обновления атрибуты имени из входных полей соответствуют столбцам в базе данных.
Я думаю, что я рядом. Я искал и не нашел свое точное решение. Заранее спасибо.
<script type="text/javascript" src="/js/update.js"></script> <form method="POST" action="#" id="myform"> <!-- start id-form --> <table border="0" cellpadding="0" cellspacing="0" id="id-form"> <tr> <th valign="top">Business Name:</th> <td><input type="text" name="company_name" class="inp-form" /></td> <td></td> </tr> <tr> <th valign="top">Address 1:</th> <td><input type="text" name="address_1" class="inp-form" /></td> <td></td> </tr> <tr> <th valign="top">Address 2:</th> <td><input type="text" name="address_2" class="inp-form" /></td> <td></td> </tr> <tr> <th> </th> <td valign="top"> <input id="where" type="hidden" name="customer_id" value="1" /> <button id="myBtn">Save</button> <div id="alert"> </td> <td></td> </tr> </table> <!-- end id-form --> </form>
update.js
var myBtn = document.getElementById('myBtn'); myBtn.addEventListener('click', function(event) { updateform('form1'); }); function updateform(id){ var data = $('#'+id).serialize(); // alert(data); $.ajax({ type: 'POST', url: "/ajax/update_company_info.php", data: data, success: function(data) { $('#id').html(data); $('#alert').text('Updated'); $('#alert').fadeOut().fadeIn(); }, error: function(data) { // if error occured alert("Error occured, please try again"); }, }); }
update_customer_info.php
<?php include($_SERVER['DOCUMENT_ROOT'] . '/load.php'); // FORM: Variables were posted if (count($_POST)) { $data=unserialize($_POST['data']); // Prepare form variables for database foreach($data as $column => $value) ${$column} = clean($value); // Perform MySQL UPDATE $result = mysql_query("UPDATE customers SET ".$column."='".$value."' WHERE ".$w_col."='".$w_val."'") or die ('Error: Unable to update.'); } ?>
Я думаю, что вы хотите обновить форму, когда submit.so вы должны удалить submit с помощью кнопки, приведенной ниже.
<button id="myBtn">Save</button>.
Вы должны добавить данный ниже код в файл ur js.
var myBtn = document.getElementById('myBtn'); myBtn.addEventListener('click', function(event){ Updateform('give id of the form'); }); function updateform(id){ var data = $('#'+id).serialize(); // alert(data); $.ajax({ type: 'POST', url: "/ajax/update_company_info.php", data: data, success: function(data) { $('#id').html(data); // alert(data); //alert(data); }, error: function(data) { // if error occured alert("Error occured, please try again"); }, });
Вы можете получить входное значение в своем php-коде, используя unserialize () в качестве массива. Таким образом, вы можете сохранить данные в базу данных и все, что захотите. Надеюсь, вы получите ответ.
<form method="POST" action="#" id="form1"> <!-- start id-form --> <table border="0" cellpadding="0" cellspacing="0" id="id-form"> <tr> <th valign="top">Business Name:</th> <td><input type="text" name="company_name" class="inp-form" /></td> <td></td> </tr> <tr> <th valign="top">Address 1:</th> <td><input type="text" name="address_1" class="inp-form" /></td> <td></td> </tr> <tr> <th valign="top">Address 2:</th> <td><input type="text" name="address_2" class="inp-form" /></td> <td></td> </tr> <tr> <th> </th> <td valign="top"> <input id="where" type="hidden" name="customer_id" value="1" /> <button id="myBtn">Save</button> </td> <td></td> </tr> </table> <!-- end id-form --> </form>
Ваш js-код станет
var myBtn = document.getElementById('myBtn'); myBtn.addEventListener('click', function(event) { Updateform('form1'); }); function updateform(id){ var data = $('#'+id).serialize(); // alert(data); $.ajax({ type: 'POST', url: "/ajax/update_company_info.php", data: data, success: function(data) { $('#id').html(data); // alert(data); //alert(data); }, error: function(data) { // if error occured alert("Error occured, please try again"); }, }); }
update_company_info.php станет
$data=unserialize($_POST['data']); // you can retrieve all values from data array and save all .
?>
Вместо:
$(".submit").click(function() {
Дайте вашей форме id как «myform»: <form method="POST" action="#" id="myform">
И используйте это для предотвращения отправки формы по умолчанию:
$("#myform").submit(function(e) { e.preventDefault(); //your code }
Закончился, поняв это. Спасибо за помощь всем.
<p id="alert"></p> <form id="form" method="post" action="/ajax/update_company_info.php"> <!-- start id-form --> <table border="0" cellpadding="0" cellspacing="0" id="id-form"> <tr> <th valign="top">Business Name:</th> <td><input type="text" name="company_name" class="inp-form" /></td> <td></td> </tr> <tr> <th valign="top">Address 1:</th> <td><input type="text" name="address_1" class="inp-form" /></td> <td></td> </tr> <tr> <th valign="top">Address 2:</th> <td><input type="text" name="address_2" class="inp-form" /></td> <td></td> </tr> <tr> <th> </th> <td valign="top"> <input id="where" type="hidden" name="customer_id" value="1" /> <input type="submit" value="Save" id="submit"> </td> <td></td> </tr> </table> <!-- end id-form --> </form>
update.js
$(document).ready(function() { $('form').submit(function(evt) { evt.preventDefault(); $.each(this, function() { // VARIABLES: Input-specific var input = $(this); var value = input.val(); var column = input.attr('name'); // VARIABLES: Form-specific var form = input.parents('form'); //var method = form.attr('method'); //var action = form.attr('action'); // VARIABLES: Where to update in database var where_val = form.find('#where').val(); var where_col = form.find('#where').attr('name'); $.ajax({ url: "/ajax/update_company_info.php", data: { val: value, col: column, w_col: where_col, w_val: where_val }, type: "POST", success: function(data) { $('#alert').html("<p>Sent Successfully!</p>"); } }); // end post });// end each input value }); // end submit }); // end ready
update_customer_info.php
<?php include($_SERVER['DOCUMENT_ROOT'] . '/load.php'); function clean($value) { return mysql_real_escape_string($value); } // FORM: Variables were posted if (count($_POST)) { // Prepare form variables for database foreach($_POST as $column => $value) ${$column} = clean($value); // Perform MySQL UPDATE $result = mysql_query("UPDATE customers SET ".$col."='".$val."' WHERE ".$w_col."='".$w_val."'") or die ('Error: Unable to update.'); } ?>