如何创建一个按钮来清除我的表单

问题描述 投票:0回答:2

我正在编写一个使用AJAX从表单获取信息的程序,我想知道是否有一种方法可以使按钮清除表单并进行某种形式的重置。现在,如果您按一个按钮,该文本将不会消失,但是我希望创建一个使该文本消失的主页按钮。我只是要发布.html文件,因为我认为这就是我们所需要的。让我知道您是否需要更多代码。我尝试制作一个重置按钮,但似乎不起作用。

<!DOCTYPE html>
<html>
<head>
<title>Assignment8</title>
<script src="ajax.js"></script>
<script>

function getXML() {
        var xmlHttp = xmlHttpObjCreate();
        if (!xmlHttp) {
                alert("The browser doesn't support this action.");
                return;
        }

        xmlHttp.onload = function() {
                if (xmlHttp.status == 200) {
                        // Get XML Document
                        var xmlDoc = xmlHttp.responseXML;

                        // Variable for our output
                        var output = '';

                        // Build output by parsing XML
                        dinos = xmlDoc.getElementsByTagName('title');

                        for (i = 0; i < dinos.length; i++) {
                                output += dinos[i].childNodes[0].nodeValue + "<br>";
                        }

                        // Get div object
                        var divObj = document.getElementById('dinoXML');

                        // Set the div's innerHTML
                        divObj.innerHTML = output;
                }
        }

        xmlHttp.open("GET", "dino.xml", true);
        xmlHttp.overrideMimeType("text/xml")
        xmlHttp.send();
}


function getJSON() {
        var xmlHttp = xmlHttpObjCreate();
        if (!xmlHttp) {
                alert("The browser doesn't support this action.");
        return;
        }
        xmlHttp.onload = function() {
                if (xmlHttp.status == 200) {

                        // Get Response Text
                        var response = xmlHttp.responseText;

                        // Prints the JSON string
                        console.dir(response);

                        // Get div object
                        var divObj = document.getElementById('dinoJSON');

                        // We used JSON.parse to turn the JSON string into an object
                        var responseObject = JSON.parse(response);

                        // This is our object
                        console.dir(responseObject)

                        // We can use that object like so:
                        for (i in responseObject) {
 divObj.innerHTML += "<p>"+responseObject[i].name + " lived during the " + responseObject[i].pet + "period.</p>";
}  
}
}
        xmlHttp.open("GET", "json.php", true);
        xmlHttp.send();
} 

</script>
</head>
<body>
<form>
<h3> Dinosaur Web Services </h3>
<div id="home"></div>
<button type="reset" value="Reset"> Home</button>

<div id="dinoJSON"></div>
<button type="button" onclick="getJSON();"> JSON Dinos</button>


 <div id="dinoXML"></div>
 <button type="button" onclick="getXML();"> XML Dinos</button>
 </form>
 </body>
 </html>
php html reset
2个回答
0
投票

您的重置按钮应该已经执行此操作,如果它在<form></form>中或具有“表单”属性,请参见here


0
投票

您可以使用默认的重置按钮(如果它位于form标记之间,也可以使用jquery为您完成此操作。您只需要在主页按钮的click事件上添加一个事件,即可实现您想要的功能。

这是您可以接受的参考

$(“。reset”)。click(function(){ $(this).closest('form')。find(“ input [type = text],input [type =” password“],textarea”)。val(“”);});

添加要单击主页按钮时要清除的所有其他字段

© www.soinside.com 2019 - 2024. All rights reserved.