【问题标题】:ajaxForm Plugin submitting form normally without ajaxajaxForm插件正常提交表单,无需ajax
【发布时间】:2013-12-30 12:46:05
【问题描述】:

我有两种情况:

首先:我在使用 ajaxForm 插件通过 ajax 上传文件的页面上有一个 HTML 表单,它工作正常。

第二:我正在通过 php 和 ajax 生成另一个 HTML 表单,我正在尝试使用相同的插件,但它正常提交表单并在浏览器中回显结果。

难道 ajaxForm 不适用于动态生成的表单?我知道即使这样问也很愚蠢,但我目前的情况似乎让我相信了。

请帮忙...

第一个表单:这是一个写在 HTML 页面上的静态表单。 AJAXFORM 在这方面可以正常工作...

  <form action="brand_add.php" method="post" enctype="multipart/form-data" name="brands_form" id="brands_form">
 <input type="hidden" name="brand_timeVal" id="brand_timeVal" />
 <table>
 <tr><td><label>Title<label></td></tr>
 <tr><td><input type="text" id="brand_title" name="brand_title" autocomplete="off" class="large inputTexts" placeholder="e.g. Adidas, Puma, SS, BDM, Cosco, Head, Spalding etc..." /></td></tr>
 <tr><td><label>Description<label></td></tr>
 <tr><td><textarea class="inputTexts" id="brand_desc" name="brand_desc"></textarea></td>              </tr>
<tr><td><label>Brand Image<label></td></tr>
<tr><td><input type="file" name="brand_img" id="brand_img" onchange="sub(this,this.id)">    </td></tr>
<tr><td><input type="submit" class="saveButton" value="Save" id="brand_save_btn" onclick="timing(this.id,'brand_timeVal');"><button type="button" onclick="clearBox(); return false" class="cancelButton" style="margin-left:5px;">Cancel</button></td></tr>
</table>
</form>

第二种形式:这是通过ajax请求动态生成的。 AJAXFORM 不起作用。

 <?php

 $response .= "<div class='update_box_header'><span class='breadcrumb'><a href='brands.php'>Brands</a></span> / Update Brand</div>
 <div class='update_box_form'>
 <form action='#' method='post' enctype='multipart/form-data' name='brands_form_update' id='brands_form_update'>
<input type='hidden' name='brand_timeVal_update' id='brand_timeVal_update' />
<input type='hidden' name='brand_update_id' value='".$id."' />
<input type='hidden' name='brand_update_file_toggler_value' value='1' />
<table>
<tr><td><label>Title<label></td></tr>
<tr><td><input type='text' id='brand_title_update' name='brand_title_update' class='large inputTexts' value='".$row1['name']."' /></td></tr>
<tr><td><label>Description<label></td></tr>
<tr><td><textarea class='inputTexts' id='brand_desc_update' name='brand_desc_update'>".$row1['description']."</textarea></td></tr>
<tr><td><label>Brand Image<label></td></tr>

<tr><td id='brand_img_field'><img src='assets/brands/banners/".$img_path."' border='0' width='100' height='50' /></td></tr>
<tr><td><label>Upload New Image<label></td></tr>
<tr><td><input type='file' accept='image/*' name='brand_img_update' id='brand_img_update' onchange='sub(this,this.id)'></td></tr>
<tr><td><label>Status<label></td></tr>
<tr><td><select name='brand_life_update' id='brand_life_update'>";
        if($row1['status'] == 1){
$response .= "<option value='1' selected>Active</option><option value='0'>Inactive</option>";
             }
        else if($row1['status'] == 0) {
$response .= "<option value='1'>Active</option><option value='0' selected>Inactive</option>"; 
            }

  $response .= "</select></td></tr>
 <tr><td><input type='submit' class='saveButton' value='Save' id='brand_update_btn' onclick='timing(this.id,'brand_timeVal_update');'><button type='button' onclick='clearUpdateBox(); return false' class='cancelButton' style='margin-left:5px;'>Cancel</button></td></tr>
 </table>
 </form>
 </div>";


 ?> 

【问题讨论】:

  • 您能给我们一个 Fidde/一些代码,以便我们尝试了解问题所在吗?
  • @daker 我有两种形式,一种是用 HTML(静态)编写的,另一种是通过 AJAX 动态生成的。你想让我把这两个表格都写在这里吗?
  • @daker 我已经编辑了问题..
  • 如何添加第二个表单?使用 jquery ajax/post 或其他什么?
  • @daker 是的,我使用 jquery ajax 添加第二种形式。

标签: php jquery ajaxform


【解决方案1】:

发布您的 javascript 代码。


盲目的猜测是:您正在尝试设置您的 ajaxForm 之前它实际上存在于页面中。

如果你想在“#brands_form_update”上运行 ajaxForm,你必须请求它,将它插入到文档中,然后调用 ajaxForm。这应该是这样的:

// $.get(...) sends the request
// $(..).append inserts the form inside the document
// $('#brands_form_update').ajaxForm() sets up the form
$.get('myDynamicForm.php', { ...data...}, function(html){
    $('*mySelector*').append(html);
    $('#brands_form_update').ajaxForm();
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-12
    • 2017-05-10
    • 2016-01-06
    • 1970-01-01
    相关资源
    最近更新 更多