我遇到了向用户显示我的代码的问题，这是通过更改alert(this.response); ajax代码以显示自定义消息来解决的。
我还遇到一个问题，即提交后我的表格没有刷新。
可以通过手动清除"onreadystatechange"函数中的每个字段来解决此问题。
我遇到此错误，并在另一篇文章中找到了此内容（Mozilla错误 不会清除日期字段）： https://bugzilla.mozilla.org/show_bug.cgi?id=1465979
How do you programmatically clear HTML5 date fields?
我必须为此切换到chrome，因为Firefox无法清除该字段...清除Firefox中的日期字段的任何其他代码？
请参见下面的代码段：
创建xml文档的代码
<script>
var template = [
'<?xml version="1.0"?>',
'<unattend xmlns="urn:schemas-microsoft-com:unattend">',
'<Data>',
' <SubmitBy><?SubmitBy?></SubmitBy>',
' <Level1><?Level1?></Level1>',
' <Level2><?Level2?></Level2>',
' <Level3><?Level3?></Level3>',
' <Level4><?Level4?></Level4>',
' <Title><?Title?></Title>',
' <Subject><?Subject?></Subject>',
' <Author><?Author?></Author>',
' <Keywords1><?Keywords1?></Keywords1>',
' <Keywords2><?Keywords2?></Keywords2>',
' <Destroy_Date><?Destroy_Date?></Destroy_Date>',
' <Projects><?Projects?></Projects>',
'</Data>',
'</unattend>'
].join('\r\n');
const ajax=function( params ){
with( new XMLHttpRequest() ){
onreadystatechange=function(e){
if( this.status==200 && this.readyState==4 ){
alert("Your form was successfully saved");
document.getElementById("Level1").innerHTML = '<option selected="selected"> - Select 1 - </option><option value="FINANCE">FINANCE</option><option value="JOB OBSERVATIONS">JOB OBSERVATIONS</option><option value="MARKETING">MARKETING</option><option value="PAYROLL">PAYROLL</option><option value="PROJECTS">PROJECTS</option>';
document.getElementById("Level2").innerHTML = '';
document.getElementById("Level3").innerHTML = '';
document.getElementById("Level4").innerHTML = '';
document.getElementById("Title").value = '';
document.getElementById("Subject").value = '';
document.getElementById("Author").value = '';
document.getElementById("Keywords1").value = '';
document.getElementById("Keywords2").value = '';
document.getElementById("Date").value = 'yyyy/mm/dd';
document.getElementById("Destroy_Date").value = 'yyyy/mm/dd';
}
}
open( 'POST', location.href, true );
setRequestHeader('Content-Type','application/x-www-form-urlencoded');
send( params );
}
}
document.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('input[ type="button" ]').addEventListener('click', e=>{
let vars={};
Array.prototype.slice.call( document.querySelectorAll('form > input[ type="text" ]') ).forEach( field =>{
vars[ field.name ]=field.value
});
Array.prototype.slice.call( document.querySelectorAll('select') ).forEach( field =>{
vars[ field.name ]=field.value
});
Array.prototype.slice.call( document.querySelectorAll('form > input[ type="date" ]') ).forEach( field =>{
vars[ field.name ]=field.value
});
let xml=template.replace(/<\?(\w+)\?>/ig, (match,name)=>{
return vars[name];
});
ajax.call( this, 'xml='+xml);
})
});
</script>
背后的PHP代码
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['xml'] ) ){
$Counter = date("Y-m-d") . ' ' . Time();
$file = 'D:\\Input\\' . $Counter . ' - Export.xml';
$bytes = file_put_contents( $file, $_POST['xml'] );
exit( sprintf('%d bytes written to %s',$bytes,realpath($file) ) );
}
?>
HTML代码
<form method='POST'>
<label>Submitted By:</label>
<input type="text" id="SubmitBy" name="SubmitBy"></input>
</form>
</div>
<div id="TableSpacing">
<h2 style="padding-left: 20px;">User Selection</h2>
<table id="table" style="padding-left:20px;">
<tr>
<td width="200px">Select Level 1 of 4</td>
<td>
<form method='POST'>
<select id="Level1" name="Level1" style="width:200px;" onchange="FunctionLevel1()">
<option selected="selected"> - Select 1 - </option>
<option value="FINANCE">FINANCE</option>
<option value="JOB OBSERVATIONS">JOB OBSERVATIONS</option>
<option value="MARKETING">MARKETING</option>
<option value="PAYROLL">PAYROLL</option>
<option value="PROJECTS">PROJECTS</option>
</select>
</form>
</td>
</tr>
<tr>
<td width="200px">Select Level 2 of 4</td>
<td>
<form method="POST">
<select id="Level2" name="Level2" style="width:200px;" onchange="FunctionLevel2()">
</select>
</form>
</td>
</tr>
<tr>
<td width="200px">Select Level 3 of 4</td>
<td>
<form method='POST'>
<select id="Level3" name="Level3" style="width:200px;" onchange="FunctionLevel3()">
</select>
</form>
</td>
</tr>
<tr>
<td width="200px">Select Level 4 of 4</td>
<td>
<form method='POST'>
<select id="Level4" name="Level4" style="width:200px;">
</select>
</form>
</td>
</tr>
</table>
</div>
<div id="TableSpacing2">
<table style="padding-left:20px;">
<tr>
<td width="200px">Title</td>
<td>
<form method='POST'>
<input type="text" style="width: 195px;" id="Title" name="Title"></input>
</form>
</td>
</tr>
<tr>
<td width="200px">Subject</td>
<td>
<form method='POST'>
<input type="text" style="width: 195px;" id="Subject" name="Subject"></input>
</form>
</td>
</tr>
<tr>
<td width="200px">Author</td>
<td>
<form method='POST'>
<input type="text" style="width: 195px;" id="Author" name="Author"></input>
</form>
</td>
</tr>
<tr>
<td width="200px">Keywords1</td>
<td>
<form method='POST'>
<input type="text" style="width: 195px;" id="Keywords1" name="Keywords1"></input>
</form>
</td>
</tr>
<tr>
<td width="200px">Keywords2</td>
<td>
<form method='POST'>
<input type="text" style="width: 195px;" id="Keywords2" name="Keywords2"></input>
</form>
</td>
</tr>
<tr>
<td width="200px">Date</td>
<td>
<form method='POST'>
<input type="date" style="width: 195px;" id="Date" name="Date" onchange="Destroy_Date()"></input>
</form>
</td>
</tr>
<tr>
<td width="200px">Destroy Date</td>
<td>
<form method='POST'>
<input readonly="readonly" type="date" style="width: 195px;" id="Destroy_Date" name="Destroy_Date"></input>
</form>
</td>
</tr>
<tr id="Projects">
</tr>
</table>
</div>
<input type="button" id="submit" value="Save Info" style="margin-top: 10px;width: 100%;height: 30px;background-color: #444;color: white;font-family: cinzel;font-size: 16pt;border: 2px solid gray;"/>
</div>