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

编程问答 2022-04-26

问题描述

|| 所以我用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>
    

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

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