Change DIV to external form page, once submitted update only that DIV
So I googled AJAX, JQuery, JSON, InnerHTML and a few other things. I cant find any working examples for changing a DIV to an external page which has a form. If the form passes validation the original DIV is refreshed to the new update content from the form.
The code must be reuseable because there will be multiple DIVs to switch back and forth between forms
I know that javascript and such needs to be added, but since I'm not sure where i'm putting just the standard html for demonstration purposes.
I'll explain with the attached code
<!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>
UPDATED
Someone recommended a hide/show setup to load the external page. I used Jquery's toggle function to swap DIVs in order to load the external page in an iFrame containing the form and validation. It works great so far.
2 problems now.
How do I load the iframe content ONLY AFTER THE LINK is clicked. There are 8 DIVs that use the above method to update information 开发者_StackOverflow社区on certain sections of the website. I dont want 8 iframes to be opened every time someone visits the page. I was looking at the .load function for Jquery but I don't know how to combine it with the .toggle function.
After form validation in the iframe how do I close the iframe and return to the original DIV with the updated contents.
Here's the mock-up of what I basically have now
<!--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>
You can use a function like: JavaScript - AJAX / SJAX - Submit Form Data to a Script Then a function to process the form:
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;
}
The script you use whether it be PHP or ASP would then return the page you want back to the div.
For example in PHP you could have something as simple as
<?php include("myform.html") ?>
Ofcourse you would want to use the POST data you sent to the PHP page to return a more customised page.
So putting it all together:
your submit button would look like this:
<input type="text" name="Send" onkeyup="runSQL('myformdiv', 'sql.php', postForm(this.form))" />
this would send the form data to the runSQL function which sends the data to sql.php which would return myform.html to the myformdiv div.
加载中,请稍侯......
精彩评论