将DIV更改为外部表单页面，一旦提交则仅更新该DIV

问题描述

|| 所以我用AJAX，JQuery，JSON，InnerHTML和其他一些东西搜索了Google。我找不到任何将DIV更改为具有表单的外部页面的工作示例。如果表单通过验证，则原始DIV将刷新为表单中的新更新内容。该代码必须可重用，因为将有多个DIV在表单之间来回切换我知道需要添加javascript和此类代码，但是由于我不确定我将标准html放在哪里用于演示目的。我将用随附的代码进行解释

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>

<style type=\"text/css\">

span.text{
font:normal 14px verdana;
font-style:italic;
line-height:20px;
margin:0 0 20px 10px;
}

div#link{
height:18px;
width:30px;
background:#000000;
padding:4px;
margin:0 0 0 10px;
}

div#link a{
color:#ffffff;
text-decoration:none;
font:normal 12px arial;
}

div#dynamic {
border:solid 1px #000000;
text-align:left;
text-transform:capitalize;
height:300px;
width:400px;
margin:10px 0 20px 10px;
padding:10px;
font:normal 14px arial;
}

.nopadding{
margin:0px;
padding:0px;
}

</style>

</head>

<body>
<!--link container with \'edit\' hyperlink-->

<div id=\"link\">
<a href=\'#0\'>Edit</a>
</div>

<!--Original DIV-->

<div id=\"dynamic\">

content content content

</div>

<span class=\"text\">After clicking the edit link or button the div containing the content should change into a form (if you hit close the div will revert back to the original DIV content</span>

<!--link container with \'edit\' hyperlink-->

<div id=\"link\">
<a href=\'#1\'>Close</a>
</div>

<!--Original DIV-->

<div id=\"dynamic\">

<form class=\"nopadding\" method=\"post\" action\"\">
enter new text
<input type=\"textbox\" name=\"blah\" maxlength=\"30\" />
<input type=\"submit\" value=\"submit\" />
</form>

</div>

<span class=\"text\">After clicking submit and form validation the DIV is updated with the new value fro mthe form</span>


<!--link container with \'edit\' hyperlink-->

<div id=\"link\">
<a href=\'#0\'>Edit</a>
</div>

<!--Original DIV-->

<div id=\"dynamic\">

NEW content NEW content NEW content

</div>
</body>
</html>

更新有人建议使用隐藏/显示设置来加载外部页面。我使用Jquery的切换功能交换DIV，以便将外部页面加载到包含表单和验证的iFrame中。到目前为止效果很好。现在有2个问题。仅在单击链接后，如何加载iframe内容。有8个DIV使用上述方法来更新网站某些部分上的信息。我不希望每次有人访问该页面时都打开8个iframe。我正在查看Jquery的.load函数，但不知道如何将其与.toggle函数结合使用。在iframe中进行表单验证后，如何关闭iframe并返回具有更新内容的原始DIV。这是我现在基本拥有的模型

    <!--Original page containing DIV toggle which loads an iframe-->

<a href=\"javascript:void(0);\" id=\"toggle-look\">Edit/Cancel</a>

<script type=\"text/javascript\">
$(function(){
  $(\'#toggle-look\').click(function(){
     $(\'#original\').toggle();
     $(\'#external\').toggle(); 
  });
});
</script>

<div id=\"original\" style=\"width:605px;overflow:hidden;padding:0px;margin:0px;overflow:hidden;font:normal 12px arial;border:solid 1px #666666;\">
Original Content Original Content Original Content Original Content 
</div>

<div id=\"external\" style=\"display:none;width:605px;overflow:hidden;padding:0px;margin:0px;overflow:hidden;font:normal 12px arial;border:solid 1px #666666;\">
<iframe style=\"width:605px;height:540px;padding:0px;margin:0px;\" FRAMEBORDER=\"0\" scrolling=\"no\" hspace=\"0\" vspace=\"0\" allowtransparency=\"true\" src=\"external.html\"></iframe>
</div>

<!--External iFrame Page With Form on external.html-->

<div id=\"form_and_validation\">
<form method=\"post\" action=\"external.html\" style=\"padding:0px;margin:0px;\">
Enter New Content:<input type=\"textbox\" name=\"newcontent\" />
</form>
</div>

解决方法

您可以使用以下函数：JavaScript-AJAX / SJAX-将表单数据提交到脚本然后是一个处理表格的函数：

function postForm(form) {
data = \"x_form=\"+(form.id == \'\' ? \'none\' : form.id);
for(var i = 0;i < form.elements.length;i++) {
    fields = form.elements[i];
    data += \"&\" + fields.name + \"=\" + (fields.type == \"checkbox\" || fields.type == \"radio\" ? (fields.checked == true ? \"Yes\" : \"No\") : (fields.type == \"select-one\" ? fields.options[fields.selectedIndex].value : encodeURI(fields.value)));
}
return data;
}

您使用的脚本（无论是PHP还是ASP）都会将您想要的页面返回到div。例如，在PHP中，您可能会像

<?php include(\"myform.html\") ?>

当然，您可能希望使用发送到PHP页面的POST数据来返回更自定义的页面。所以放在一起：您的提交按钮如下所示：

<input type=\"text\" name=\"Send\" onkeyup=\"runSQL(\'myformdiv\',\'sql.php\',postForm(this.form))\" />

这会将表单数据发送到runSQL函数，该函数将数据发送到sql.php，后者将myform.html返回到myformdiv div。

div 外部提交提交改为更新更新表单表单页面页面

将DIV更改为外部表单页面，一旦提交则仅更新该DIV

问题描述

解决方法

相关问答