如何使用AJAX提交一個提交按鈕的3個表單

我正在創建一個在線商店，我有三種形式（使用2個不同的php文件）。第一種形式 - 基於用戶填寫標題的文本，價格&產品說明第二種形式 - 爲新產品上傳圖像第三種形式 - 從數據庫中選擇一個類別（表格）以將記錄添加到給定的表如何使用AJAX提交一個提交按鈕的3個表單

我將如何使用AJAX做到這一點？新的PHP和AJAX請幫我如何修改我的代碼。

第一形式

<form action="insert.php" method="post" name="form1" enctype="multipart/form-data"> 
<div> 
    <label for="title">Title: </label><input type="text" name="title"/> 
</div> 
<div> 
    <label for="description">Desc: </label><input type="text" name="description"/> 
</div> 
<div> 
    <label for="price">Price: </label><input type="text" name="price" /> 
</div> 
<input type="hidden" name="submit" value="Submit"> 
</form>

insert.php（由第一形式使用）

<?php 
    $con=mysqli_connect('localhost','root', '',"onlineshop"); 
    // Check connection 
    if (mysqli_connect_errno()) 
    { 
     echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
    } 


    $sql="INSERT INTO mens (title, description, price) 
    VALUES 
    ('$_POST[title]','$_POST[description]','$_POST[price]')"; 

    if (!mysqli_query($con,$sql)) 
    { 
     die('Error: ' . mysqli_error($con)); 
    } 
    echo "1 record added"; 

    mysqli_close($con); 
?>

第二形式

<script type="text/javascript" src="../cms/scripts/jquery.min.js"></script> 
<script type="text/javascript" src="../cms/scripts/jquery.form.js"></script> 

<script type="text/javascript" > 
$(document).ready(function() {   
    $('#photoimg').live('change', function(){ 
     $("#preview").html(''); 
     $("#preview").html('<img src="loader.gif" alt="Uploading"/>'); 
     $("#imageform").ajaxForm({ 
        target: '#preview' 
     }).submit(); 

    }); 
}); 
</script> 

<style> 

body 
{ 
    font-family:arial; 
} 

.preview 
{ 
    width:160px; 
    border:solid 2px #dedede; 
    padding:10px; 
} 

#preview 
{ 
    color:#cc0000; 
    font-size:10px 
} 

</style> 
<body bgcolor="#ffdd55">  
<font face=Arial size=3 color="#880088"> 
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php' > 
<small>Upload your image <input type="file" name="photoimg" id="photoimg" /></small> 
</form> 
<div id='preview'> 
</div>

第三形式

<?php 
    include_once 'dropdown.php'; 
?> 
<small>Choose category:</small> 
<br> 
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST"> 
    <select name="Tables" id="ddTables" name="form3"> 
<?php 

    echo $tables; 

?> 
    </select> 
    <input type="hidden" id="tableSubmit" value="Submit"/> 
</form> 
</div> 

<!-- Submit 3 forms together--> 
<script> 
$('#form1_submit_button').click(function(){ 
    $('#form1 #imageform #form3').submit(); 
}); 
</script>

dropdown.php（由第三形式使用）

<?php 
    $dbname = 'onlineshop'; 

    if (!mysql_connect('localhost', 'root', '')) { 
     echo 'Could not connect to mysql'; 
     exit; 
    } 

    $sql = "SHOW TABLES FROM $dbname"; 
    $result = mysql_query($sql); 

    if (!$result) { 
     echo "No tables exist! \n"; 
     echo 'MySQL Error: ' . mysql_error(); 
     exit; 
    } 
    $tables = ''; 
    while ($row = mysql_fetch_row($result)) { 


    $tables .="<option value='$row[0]'>$row[0]</option>"; 

    } 

    mysql_free_result($result); 
?>

來源

2014-03-28 cmario

jQuery有一個很好的功能這一點。（POST）

https://api.jquery.com/jQuery.post/

使用.VAL讀取表格數據

http://api.jquery.com/val/

來源

2014-03-28 02:49:04 Companjo

我會建議的是你的代碼的一些重組 - 而不是試圖張貼到三個單獨的頁面M 1，也許嘗試要麼步驟結合成一個，或確定將它們分成3

例如：

（分離成3）：

頁面之一，則填寫的基本信息產品，將其提交併插入到數據庫中，然後將其帶到頁面/步驟2（通過包含特定「產品ID」或其他內容的隱藏POST'd字段），從數據庫中選擇一個類別。當你從那裏提交時，它被插入到數據庫中，並且你被帶到頁面/步驟3，在這裏你上傳一個圖像。提交後，你就完成了！

-優點：較小的單個頁面，更容易對其中的任何一個進行調整。

- 缺點：難以改變影響所有3頁的內容，並且如果用戶網絡速度較慢，可能會導致創建單個產品花費很長時間。

（合併）：輸入在一個頁面上

的所有信息 - 類別選擇，基本的產品信息和文件上傳。提交該頁面將一舉處理所有信息。

效果 - ：更容易做出大的變化，所有的信息被加載/一次提交的，所以你不會在局部數據庫的數據不完整的結束。

-Disadvantages：信息填寫在一個頁面上許多，可以使找到一個單一的東西來改變難以用大量的代碼。

來源

2014-03-28 03:08:55 Helpful

我有興趣做下面的結合的方法，這是主要的想法。你能幫我這麼做嗎，因爲我有點新鮮感？ – cmario

什麼你基本上想要做的就是收集你知道你需要的所有表單元素（文本輸入，複選框，單選按鈕等），並把它們放在一個頁面上。在處理這些提交的PHP頁面上，只需沿着輸入列表，並確保處理每個輸入。 – Helpful

所以應我把所有的不同的PHP文件合併成一個，然後創建一個形式，它使用的是PHP文件？它會起作用還是會混淆一切？ – cmario

如何使用AJAX提交一個提交按鈕的3個表單

回答

相關問題