Question

我有一个表单，用户可以在其中更新某些内容。要更新的字段之一是预先填充了来自数据库的数据的选择框。但是，如果用户想要向该选择框添加新选项，我希望他们能够点击＆＃34;添加新项目＆＃34;选择框下方的按钮，让该链接启动一个带有表单的模态，并以模态形式填写文本框。当他们点击模态表单中的提交按钮时，我希望关闭模式和原始选择框以显示添加到数据库的新记录而不刷新整个页面。

我希望这是有道理的。

以下是主窗体中的选择框：

<select name="brand" style="width: 100%;">
  <option value="select">Brand Name...</option>
  <?php
  include 'ahdb.php';
  $sql = "SELECT * FROM Brand_Name WHERE active='1'";
  $sql_result = mysqli_query($sql, $connection) or die ('Could not select the Brand Name Categories');
  while ($brand = mysqli_fetch_assoc($sql_result)) {
    echo "<option value='" .$brand['brand_name_id']. "'>" .$brand['brand_name']. "</option>";
  }
  ?>
</select>
<a href="#brandForm">Add New Brand Item</a>

我已经在页面上运行了模态弹出窗口，但是这里是模态内部表单的代码：

<form name="brandForm" method="post" action="processForm.php">
<input type="text" name="new-item">
<input type="submit" name="new-item-submit" value="Add New Item">
</form>

以下是我用于模态和模态形式的一点点jQuery和Ajax。在没有刷新整个页面的情况下，让原始选择框自动刷新我缺少什么？

<script type="text/javascript">

var messageDelay = 2000;  // How long to display status messages (in milliseconds)

// Init the form once the document is ready
$( init );

// Initialize the form

function init() {

// Hide the form initially.
// Make submitForm() the form's submit handler.
// Position the form so it sits in the centre of the browser window.
$('#brandForm').submit( submitForm ).addClass( 'positioned' );

$('a[href="#brandForm"]').click( function() {
$('#overlay').fadeIn( 'slow' );
$('#brandForm').fadeIn( 'slow', function() {
  $('#brandName').focus();
} )

return false;
} );


// When the OVERLAY DIV is clicked, close the form
$('#overlay').click( function() {
$('#brandForm').fadeOut();
$('#overlay').fadeOut( 'slow' );
} );

// Submit the form via Ajax

function submitForm() {

var brandForm = $(this);

$.ajax( {
  url: brandForm.attr( 'action' ) + "?ajax=true",
  type: brandForm.attr( 'method' ),
  data: brandForm.serialize(),
  success: submitFinished
} );
}

// Prevent the default form submission occurring
return false;
}

// Handle the Ajax response

function submitFinished( response ) {
response = $.trim( response );

if ( response == "success" ) {

// Form submitted successfully:
// 1. Display the success message
// 2. Clear the form fields
// 3. Fade the content back in

$('#brandName').val( "" );

$('#overlay').delay(messageDelay+500).fadeOut( 'slow' );

}  }
}

</script>

以下是模式表单提交的processForm.php脚本：

<?php
session_start();
include 'ahdb.php'; //connect to database

// Read the form values
$success = false;
$brandName = isset( $_POST['brandName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['brandName'] ) : "";

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
echo $success ? "success" : "error";

//insert into database before sending response to the browser
mysql_query("INSERT INTO `Brand_Name` (brand_name) VALUES ('$brandName')");

}
?>

我能够获取模态表单以将值添加到数据库中，但是当模式关闭时，我无法使原始选择框显示添加的新项目而不刷新整个页面，这是我不想要的。 / p>

请帮忙。

非常感谢。

提交表单和更新数据库后自动刷新选择框

0 个答案: