Question

我正在尝试显示另一个表单，当前显示的表单值是使用ajax

提交给服务器的

这是我的html＆amp; 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放在另一个元素中然后显示它然后页面自动刷新到起始页

Answer 1

您正在将 document.getElementById（＆＃39; form＆＃39;）。 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);
}

在先前表单提交上显示更改的表单

1 个答案: