检查输入按钮答案

【问题标题】：Check input push button检查输入按钮
【发布时间】：2013-11-22 22:39:46
【问题描述】：

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

我希望它根据用户的回答将第 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>

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

【问题讨论】：

标签： javascript jquery html button input

【解决方案1】：

你的代码有几个问题：

<form> 不应该在另一个 <form> 中，它不是有效的 HTML，而且你不需要那么多表单......
id 在 html 中是唯一的，不要使用相同的 id 两次
不要用相同的名称命名两个不同的函数
name 如wpExtension 指的是元素，而不是它的值。请改用wpExtension.value
如果超过一行，请将{}放入if条件中

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

请看一下，看看你能不能弄明白:)

【讨论】：