表格带单选按钮+逻辑

时间:2017-07-09 17:25:58

标签: javascript html forms logic

我试图创建一个使用单选按钮和逻辑来生成和显示不同诊断结果的表单(有点像测验)。以下是我对一些表单结构的看法(还有更多选项,逻辑在实际版本中更重要):

  <form action='index.php' method='post'>
  Q1: Does Patient experience Symptom X?
  <br/>
  <label><input type="radio" name="Q1" value="Q1Y"/> Yes</label> &nbsp;
  <label><input type="radio" name="Q1" value="Q1N"/> No</label>
  <br/>
  <br/>

  Q2: Does Patient experience Symptom Y?
  <br/>
  <label><input type="radio" name="Q2" value="Q2Y"/> Yes</label> &nbsp;
  <label><input type="radio" name="Q2" value="Q2N"/> No</label>
  <br/>
  <br/>

  Q3: Does Patient experience Symptom Z?
  <br/>
  <label><input type="radio" name="Q3" value="Q3Y"/> Yes</label> &nbsp;
  <label><input type="radio" name="Q3" value="Q3N"/> No</label>
  <br/>
  <br/>

  <input type="submit" name="formSubmit" value="See Result"/>
  <br/>

如何设置其余逻辑:

If (Q1Y && Q2Y){ 
Diagnosis = A; 
}

If (Q2Y && Q3Y){ 
Diagnosis = B; 
}

理想情况下,当用户点击表单上的提交时,诊断将存储在变量中,然后显示在当前页面上。

2 个答案:

答案 0 :(得分:1)

if(($_POST['Q1']=='Q1Y') && ($_POST['Q2']=='Q2Y'))
{
// Your Logic
}
if(($_POST['Q2']=='Q2Y') && ($_POST['Q3']=='Q3Y'))
{
// Your Logic
}

答案 1 :(得分:1)

使用嵌套对象来保存所有答案组合的结果。

.one{
    height: 50px;
    padding: 5px;
    background-color: #0f0;
    display: block;
}
.two{
    height: 70px;
    padding: 5px;
    background-color: #0ff;
    display: block;
}
.three{
    width: 56%;
    height: 100px;
    padding: 5px;
    background-color: #f00;
    float: right;
    display: inline-block;
}

.left {
    float: left;
    display: block;
    width: 42%;
}
.four{
    width: 500px;
    padding: 5px;
    margin: 5px;
    background-color: #ff0;
    display: block;
    float: left;
}

然后获取每个输入的值,并执行:

var allDiagnosis = {
    Q1Y: {
        Q2Y: {
            Q3Y: 'A',
            Q3N: 'B'
        },
        Q2N: {
            Q3Y: 'C',
            Q3N: 'D'
        },
    Q1N: {
        Q2Y: {
            Q3Y: 'E',
            Q3N: 'F'
        },
        Q2N: {
            Q3Y: 'G',
            Q3N: 'H'
        }
    }
}