检查输入按钮

Check input push button

本文关键字:按钮 输入 检查      更新时间:2023-09-26

基本上,我正在尝试创建一个表,用于获取用户输入并检查答案是否正确。

我希望它根据用户的回答将第4列更改为正确或不正确。

以下是我尝试过的:

    <form name="input" action="javascript:void(0);" method="get">
        <table id="compsci-table" style = "margin: auto;">
            <tr>
                <th>Microsoft Office</th>
                <th>Example</th>
                <th>Extension</th>
                <th>Feedback</th>
            </tr>
            <tr>
                <td>Word Processing</td>
                <td>Word</td>
                <td>
                    <form id="form1" method="" action="" onsubmit="return validateAns(wpExtension)">
                            <input type="text" name="wpExtension">
                            <input type="submit" name="b1" value="Check" class="submitbutton aligncenter"/>
                    </form>
                        <script>

                            function validateAns(Ans) {
                                if(Ans == "docx")
                                    alert("Correct!");  
                                    $("#formA").submit(function() {
                                    $("#reveal-space1").text("Correct").show();
                                      return true;
                                    });
                                else
                                    alert("Incorrect."); 
                                    $("#formA").submit(function() {
                                    $("#reveal-space1").text("Incorrect").show();
                                      return true;
                                    });
                        </script>
                </td>
                <td>
                    <form id="formA" action="javascript:void(0);">
                        <div id="reveal-space1"> 

                        </div>
                    </form> 

                </td>

            </tr>
            <tr>
                <td>Spreadsheet</td>
                <td>

                    <form id="form2" method="" action="" onsubmit="return validateAns(ssExample)">
                            <input type="text" name="ssExample">
                            <input type="submit" name="b1" value="Check" class="submitbutton aligncenter"/>
                    </form>
                        <script>

                            function validateAns(Ans) {
                                if(Ans == "Excel")
                                    alert("Correct!");  
                                    $("#formA").submit(function() {
                                    $("#reveal-space2").text("Correct").show();
                                      return true;
                                    });
                                else
                                    alert("Incorrect."); 
                                    $("#formA").submit(function() {
                                    $("#reveal-space2").text("Incorrect").show();
                                      return true;
                                    }); 
                        </script>


                </td>
                <td>xlsx</td>
                <td>
                    <form id="formB" action="javascript:void(0);">
                        <div id="reveal-space2"> 

                        </div>
                    </form> 

                </td>
            </tr>

如有任何正确方向的指导,我们将不胜感激。

您的代码中存在一些问题:

  • <form>不应该在另一个<form>中,它不是有效的HTML,并且您不需要那么多表单
  • id在html中是唯一的,不要两次使用相同的id
  • 不要用相同的名称命名两个不同的函数
  • name(例如wpExtension)指的是元素,而不是其值。改为使用wpExtension.value
  • 如果{}有多行,请将其置于if条件中

以下是清理代码后的工作演示:http://jsfiddle.net/VbCnu/4/

请看一看,看看你是否能弄清楚:)