javascript 将input设置为required将禁用到< form>的操作目标的重定向

cld4siwp  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(65)

如果标题令人困惑,我很抱歉,以下是详细信息:我有一个简单的HTML页面,带有一个和一个提交按钮,也重定向到'/conclusion'页面,如下所示:

<div class="questions-form"> 
        <form  action="/conclusion" method="get">
        <p><strong> Question ... ?</strong></p>

            <input type="radio" name="qfb_r1" value="1"> First option ...<br>
            <input type="radio" name="qfb_r1" value="2"> Second option ...<br>
            ....

            <p style="margin-top: 100px;">
                <input class="link-btn button" type="submit" value="Next page"/>
            </p>
        </form>
</div>

这工作完美,直到我添加了这个脚本,使所有的答案都需要:

const inputs  = document.getElementsByTagName("input")
for (let i = 0; i < inputs.length - 1; i++) {
    inputs[i].required = true;
}

在Flask方面,没有发生太多事情:

@app.route('/conclusion')
def conclusion():
    #collect the answers from the form
    final_answers_b = request.args
    session["final_answers_b"] = final_answers_b.to_dict()
    #save the answers to some DB
    return render_template("conclusion.html")

还要注意的是,这段代码(Flask+HTML+JS)在其他内容几乎相同的页面上工作得很好(第1页上的表单带有强制性答案,当所有问题都得到回答时,提交按钮会重定向到第2页)。在Flask中,page 2从url收集第1页的答案并继续处理...)。

  • 我把get改成post了
  • 我为/conclusion添加了方法=['GET','POST'],就像Flask中的其他路由一样
  • 我试过这个:
<form onsubmit="redirect()">
</form>

<script>
  function redirect() {
            window.location.assign("conclusion");
            // also window.open({{url_for('conclusion')}}
  }
</script>

我想知道问题是否真的来自input.required,因为我没有收到任何错误消息来帮助我找出问题所在。但是现在,只有当input.required被激活时,才会发生这种情况。我的意思是,当我把答案保留为可选时,一切都很好。

c2e8gylq

c2e8gylq1#

修好了!
我有这个“Other”选项,当选中时,它旁边会出现一个文本框,当然这个文本框也被上面的JS脚本设置为required。因此,当“其他”选项未被选中时,框不会出现,但按钮仍然需要input来填写。因此,我必须将text_box.required = false添加到脚本中,以管理选择“Other”时文本框的外观:

<input type="radio" name="qfb_r1" value="7" id="option-other">Other 
      <input type="text" id="option-other-text" placeholder="..." style="display: none;">

<script>
        //Display text box when option Other is selected
        const text_box = document.getElementById('option-other-text');
        function handleRadioClick() {
        if (document.getElementById('option-other').checked) {
            text_box.style.display = 'inline-block';
            text_box.required = true
        } else {
            text_box.style.display = 'none';
            text_box.required = false
        }
        }
        const radioButtons = document.querySelectorAll('input[name="qfb_r1"]');
        radioButtons.forEach(radio => {
        radio.addEventListener('click', handleRadioClick);
        });
    </script>

相关问题