如果在 HTML 表单中选择了某些选择选项，则需要输入字段

Question

我正在尝试选择选择选项并提交时所需的文本框。

当我选择教育时，需要输入教育 当我选择业务时，需要输入业务 当我选择商业和教育时，两个输入都是必需的。是必需的

任何帮助将不胜感激。谢谢。

function changePurpose(){
    if(document.getElementById('TravelPurpose').value == "Education")
        {
            document.getElementById('PoT_Ebudget').setAttribute("required","");
        }
        else
        {
            document.getElementById('PoT_Ebudget').setAttribute("required","");
        }
    if(document.getElementById('TravelPurpose').value == "Business")
        {
            document.getElementById('PoT_Bbudget').setAttribute("required","");
        }
        else
        {
            document.getElementById('PoT_Bbudget').setAttribute("required","");
        }
    if(document.getElementById('TravelPurpose').value == "Education & Business")
        {
            document.getElementById('PoT_Bbudget').setAttribute("required","");
            document.getElementById('PoT_Ebudget').setAttribute("required","");
        }
        else
        {
            document.getElementById('PoT_Bbudget').setAttribute("required","");
            document.getElementById('PoT_Bbudget').setAttribute("required","");
        }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form id="myform">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group options">
                <label class="form-label" for="purpose"> Purpose of Travel</label>
                <div class="controls" onchange="purpose(this)">
                    <select class="form-control" id="TravelPurpose" name="PoT_TravelPurpose" onchange="changePurpose()" required>
                        <option selected value="">Select Travel Purpose</option>
                        <option value="Business">Business</option>
                        <option value="Education">Education</option>
                        <option value="Education & Business">Education and Business</option>
                    </select>
                </div>                   
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="form-label" for="Budget"> Education</label>
                <div class="controls input-group primary">
                    <span class="input-group-addon">$</span>
                    <input type="number" style="text-align: right;" id="PoT_Ebudget" name="PoT_Ebudget"  placeholder="00.00" min="0" max="10000"   oninput="this.value = Math.abs(this.value)">
                </div>
                <br />
                <label class="form-label" for="Budget"> Business</label>
                <div class="controls input-group primary">
                    <span class="input-group-addon">$</span>
                    <input type="number" style="text-align: right;" id="PoT_Bbudget"  name="PoT_Bbudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)">
                </div>
            </div>
        </div>
    </div> 
    <input type="submit" value="Submit" >

</form>

Answer 1

您可以通过设置其required 属性来将字段设置为必填：

例子：

document.getElementById('PoT_Ebudget').required = true;

//...or

document.getElementById('PoT_Ebudget').required = false;

此外，最好将元素引用缓存在变量中，以提高代码的可读性和性能。

const PoT_Ebudget = document.getElementById('PoT_Ebudget');
const PoT_Bbudget = document.getElementById('PoT_Bbudget');

function changePurpose(){
    const value = document.getElementById('TravelPurpose').value;
    PoT_Ebudget.required = (value == "Education" || value == "Education & Business");
    PoT_Bbudget.required = (value == "Business" || value == "Education & Business");
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<form id="myform">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group options">
                <label class="form-label" for="purpose"> Purpose of Travel</label>
                <div class="controls">
                    <select class="form-control" id="TravelPurpose" name="PoT_TravelPurpose" onchange="changePurpose()" required>
                        <option selected value="">Select Travel Purpose</option>
                        <option value="Business">Business</option>
                        <option value="Education">Education</option>
                        <option value="Education & Business">Education and Business</option>
                    </select>
                </div>                   
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="form-label" for="Budget"> Education</label>
                <div class="controls input-group primary">
                    <span class="input-group-addon">$</span>
                    <input type="number" style="text-align: right;" id="PoT_Ebudget" name="PoT_Ebudget"  placeholder="00.00" min="0" max="10000"   oninput="this.value = Math.abs(this.value)">
                </div>
                <br />
                <label class="form-label" for="Budget"> Business</label>
                <div class="controls input-group primary">
                    <span class="input-group-addon">$</span>
                    <input type="number" style="text-align: right;" id="PoT_Bbudget"  name="PoT_Bbudget" placeholder="00.00" min="0" max="10000" oninput="this.value = Math.abs(this.value)">
                </div>
            </div>
        </div>
    </div> 
    <input type="submit" value="Submit" >

</form>