Question

所以我用Google搜索了AJAX，JQuery，JSON，InnerHTML和其他一些东西。我找不到任何将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个问题。

如何点击LINK后才能加载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>

Answer 1

您可以使用以下功能：JavaScript - AJAX / SJAX - Submit Form Data to a Script 然后是一个处理表单的函数：

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

1 个答案: