当前显示的表单值使用 ajax 提交到服务器时，我正在尝试显示另一个表单
这是我的html和ajax代码
<script>
function getproblem(){
var city=document.getElementById('city').value;
var serve=document.getElementById('service').value;
var service;
var url='insert.php';
var xmlhttp=ajax();
if(xmlhttp){
xmlhttp.open("POST",url);
xmlhttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 &&
xmlhttp.status == 200) {
service=xmlhttp.responseText;
var div=document.getElementById('form').innerHTML;
div.innerHTML='';
div.innerHTML=service;
}
}
xmlhttp.send("city="+city+"&service="+serve);
}
}
function ajax(){
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
return XMLHttpRequestObject;
}
</script>
<link rel="stylesheet" src="runnable.css" />
<!-- Load jQuery from Google's CDN -->
<!-- Load jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- Load jQuery JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI Main JS -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load SCRIPT.JS which will create datepicker for input field -->
<script src="script/script.js"></script>
<script>
function populate(selector) {
var select = $(selector);
var hours, minutes, ampm;
for(var i = 600; i <= 1100; i += 30){
hours = Math.floor(i / 60);
minutes = i % 60;
if (minutes < 10){
minutes = '0' + minutes; // adding leading zero
}
ampm = hours % 24 < 12 ? 'AM' : 'PM';
hours = hours % 12;
if (hours === 0){
hours = 12;
}
select.append($('<option></option>')
.attr('value', i)
.text(hours + ':' + minutes + ' ' + ampm));
}
}
</script>
</head>
<body >
<div id="form">
<form method="post" >
<select name="city" id="city" onChange="configureDropDownLists(this,document.getElementById('service'))">
<option selected="selected" value="">-- --City-- --</option>
<option value="jhansi">Jhansi</option>
<option value="lucknow">Lucknow</option>
</select>
<select id="service">
<option selected="selected" value="">-- --Service-- --</option>
</select>
<button onclick="getproblem()" name="proceed" >NEXT</button>
</form>
</div>
<p id="a"></p>
</body>
</html>
这是我的 php 文件
<?php
include_once('db.php');
$db=new db();
$sql=$db->database_initialise();
$city=$_POST['city'];
$service=$_POST['service'];
$service_id=mt_rand();
$query="insert into `service` (`id`,`city`,`service_type`) values('$service_id','$city','$service')";
$result=$sql->query($query);
if($result===true){
$ui=uigenerator($service_id,$service);
echo $ui;
}
else
echo "Sorry An error occured";
function uigenerator($ssid,$service){
$ui='<form method="post" action="next.php?ssid='.$ssid.'" onload="populate(#timeSelect)"><input type="text" id="problem" value="What''s Your Problem" onfocus="document.getElementById(''problem'').value='''' " />';
if($service=='AC Repair/Service'||$service=='Washing Machine Repair'||$service='Refrigerator Repair/Service'|| $service=='Television Repair'){
$ui=$ui.'<input type="text" value="Brand" id="brnd" onfocus="document.getElementById(''brnd'').value=''''">';
if($service=='Washing Machine Repair')
$ui=$ui.'<select id="type" name="type"> <option selected="selected" value="">-- Type --</option><option value="Semi-automatic">Semiautomatic</option><option value="Automatic">Automatic</option></select>';
else if ($service=="Television Repair")
$ui=$ui.'<select id="type" name="type"><option selected="selected" value="">-- Type --</option><option value="CRT">Flat screen</option><option value="LCD">LCD</option><option value="LED">LED</option></select>';
}
$ui=$ui.'<input type="text" id="datepicker" value="Date" onfocus="document.getElementById(''datepicker'').value=''''" /> <select id="timeSelect"><option selected="selected" value="">Time</option></select><input type="submit" name="next" value="Proceed" /></form>';
return $ui;
}
提交表单并将详细信息记录在数据库中时，应显示新表单并删除以前的表单。
问题是没有显示新表单，而是显示具有重置值的旧表单
实际上，当我在控制台中查看调试它并将responsetext放入另一个元素时，它会显示出来，但随后页面会自动刷新到起始页
您正在分配 document.getElementById（'form'）。innerHTML 到变量 div。然后，您尝试再次分配给属性innerHTML，这将提供innerHTML.innerHTML。
var xmlhttp=ajax();
if(xmlhttp){
xmlhttp.open("POST",url);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
service=xmlhttp.responseText;
// var div=document.getElementById('form').innerHTML;
var div=document.getElementById('form');
div.innerHTML='';
div.innerHTML=service;
}
}
xmlhttp.send("city="+city+"&service="+serve);
}