Как изменить скрипт PHP / Jquery / Ajax, чтобы иметь более одного поля поля формы

У меня есть сценарий php / Ajax / Jquery, который вставляет поле формы в MySQL и обновляет страницу без обновления при нажатии submit. Я бы хотел, чтобы сценарий представлял четыре поля формы, а не только один.

Я уже обновил таблицу базы данных add_delete_record с тремя дополнительными полями: balance, account_number и ежемесячно , а также поле содержимого, которое уже было там.

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

Это страница php & html:

 <div class="content_wrapper"> <ul id="responds"> <?php //include db configuration file include_once("config.php"); //MySQL query $Result = mysql_query("SELECT id,content FROM add_delete_record"); //get all records from add_delete_record table while($row = mysql_fetch_array($Result)) { echo '<li id="item_'.$row["id"].'">'; echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">'; echo '<img src="images/icon_del.gif" border="0" />'; echo '</a></div>'; echo $row["content"].'</li>'; } //close db connection mysql_close($connecDB); ?> </ul> <div class="form_style"> <textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea> <button id="FormSubmit">Add record</button> </div> </div> 

Это php, на который он отправляет:

 <?php //include db configuration file include_once("config.php"); //check $_POST["content_txt"] is not empty if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0) { //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); // Insert sanitize string in record if(mysql_query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')")) { //Record is successfully inserted, respond to ajax request $my_id = mysql_insert_id(); //Get ID of last inserted record from MySQL echo '<li id="item_'.$my_id.'">'; echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">'; echo '<img src="images/icon_del.gif" border="0" />'; echo '</a></div>'; echo $contentToSave.'</li>'; mysql_close($connecDB); }else{ //output error //header('HTTP/1.1 500 '.mysql_error()); header('HTTP/1.1 500 Looks like mysql error, could not insert record!'); exit(); } } elseif(isset($_POST["recordToDelete"]) && strlen($_POST["recordToDelete"])>0 && is_numeric($_POST["recordToDelete"])) {//do we have a delete request? $_POST["recordToDelete"] //sanitize post value, PHP filter FILTER_SANITIZE_NUMBER_INT removes all characters except digits, plus and minus sign. $idToDelete = filter_var($_POST["recordToDelete"],FILTER_SANITIZE_NUMBER_INT); //try deleting record using the record ID we received from POST if(!mysql_query("DELETE FROM add_delete_record WHERE id=".$idToDelete)) { //If mysql delete record was unsuccessful, output error header('HTTP/1.1 500 Could not delete record!'); exit(); } mysql_close($connecDB); }else{ //Output error header('HTTP/1.1 500 Error occurred, Could not process request!'); exit(); } ?> 

Это JQuery

 $(document).ready(function() { //##### Add record when Add Record Button is clicked ######### $("#FormSubmit").click(function (e) { e.preventDefault(); if($("#contentText").val()==="") //simple validation { alert("Please enter some text!"); return false; } var myData = "content_txt="+ $("#contentText").val(); //post variables jQuery.ajax({ type: "POST", // HTTP method POST or GET url: "response.php", //Where to make Ajax calls dataType:"text", // Data type, HTML, json etc. data:myData, //post variables success:function(response){ $("#responds").append(response); $("#contentText").val(''); //empty text field after successful submission }, error:function (xhr, ajaxOptions, thrownError){ alert(thrownError); //throw any errors } }); }); //##### Delete record when delete Button is clicked ######### $("body").on("click", "#responds .del_button", function(e) { e.preventDefault(); var clickedID = this.id.split("-"); //Split string (Split works as PHP explode) var DbNumberID = clickedID[1]; //and get number from array var myData = 'recordToDelete='+ DbNumberID; //build a post data structure jQuery.ajax({ type: "POST", // HTTP method POST or GET url: "response.php", //Where to make Ajax calls dataType:"text", // Data type, HTML, json etc. data:myData, //post variables success:function(response){ //on success, hide element user wants to delete. $('#item_'+DbNumberID).fadeOut("slow"); }, error:function (xhr, ajaxOptions, thrownError){ //On error, we alert user alert(thrownError); } }); }); }); 

Это не мой сценарий, поэтому я подумал, что должен также дать ссылку на кредит автора: http://www.sanwebe.com/2012/04/ajax-add-delete-sql-records-jquery-php

Я не эксперт по php, но это должно помочь вам:

Сначала измените область формы на главной странице:

 <div class="form_style"> <textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea><br/> <input type="text" id="balance" /><br/> <input type="text" id="acctNum" /><br/> <input type="text" id="monthly" /><br/> <button id="FormSubmit">Add record</button> </div> 

то ваш myData выглядит так:

 var myData = { content_txt: $("#contentText").val(), balance: $("#balance").val(), acctNum: $("#acctNum").val(), monthly: $("#monthly").val() }; 

и позже в ответе ajax:

 $("#contentText").val(''); //empty text field after successful submission $("#balance").val(''); $("#acctNum").val(''); $("#monthly").val(''); 

и, наконец, PHP:

 //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH $content = filter_var($_POST['content_txt'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $balance = filter_var($_POST['balance'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $account = filter_var($_POST['acctNum'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $monthly = filter_var($_POST['monthly'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $qry= "INSERT INTO add_delete_record(content,balance,account,monthly) VALUES('".$content."','".$balance."','".$account."','".$monthly."')"; // Insert sanitize string in record if(mysql_query("INSERT INTO add_delete_record(content,balance,account,monthly) VALUES('".$content."','".$balance."','".$account."','".$monthly."')")) { //Record is successfully inserted, respond to ajax request $my_id = mysql_insert_id(); //Get ID of last inserted record from MySQL echo '<li id="item_'.$my_id.'">'; echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">'; echo '<img src="images/icon_del.gif" border="0" />'; echo '</a></div>'; echo $content.'</li>'; mysql_close($connecDB); }else{ //output error //header('HTTP/1.1 500 '.mysql_error()); header('HTTP/1.1 500 Looks like mysql error, could not insert record!'); exit(); } 
 var myData = { content_txt: $("#contentText").val(), other_var: $("#anotherField").val() }; jQuery.ajax({ type: "POST", // HTTP method POST or GET url: "response.php", //Where to make Ajax calls dataType:"text", // Data type, HTML, json etc. data:myData, //post variables success:function(response){ $("#responds").append(response); $("#contentText").val(''); //empty text field after successful submission }, error:function (xhr, ajaxOptions, thrownError){ alert(thrownError); //throw any errors } }); 

Это более простой способ отправить несколько полей (обратите внимание на объект myData). В PHP вы можете восстановить и сохранить новую переменную следующим образом:

 //check $_POST["content_txt"] is not empty if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0 && !empty($_POST["other_var"])) // !empty() checks that the variable is set and not empty { //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $otherVarToSave = filter_var($_POST["other_var"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); // Insert sanitize string in record if(mysql_query("INSERT INTO add_delete_record(content, other) VALUES('".$contentToSave."', '".$otherVarToSave."')")) { 

Что-то вроде этого:

 var myData = "content_txt="+ $("#contentText").val()+"&other_value"+ $("#foo").val(); //post variables 

В файле php:

 $other_value = $_POST['other_value']; UPDATE: balance, account_number and monthly JS: var myData = "content_txt="+ $("#contentText").val()+"&balance"+ $("#balance").val(); myData = myData + "&account_number="+$('#acnum').val()+"&monthly="+$('#month').val(); PHP: $content = filter_var($_POST['content_txt'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $balance = filter_var($_POST['balance'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $account = filter_var($_POST['account_num'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $monthly = filter_var($_POST['monthly'],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); $qry= "INSERT INTO add_delete_record(content,balance,account,monthly) VALUES('".$content."','".$balance."','".$account."','".$monthly."')"; if(mysql_query($qry)){