How to submit only one of hide/show fields data when required - Laravel

问题

A form contains multiple fields. One field is "yes/no" dropdown. When yes selected, another dropdown appears. When no selected a text input field appears. Depending on yes/no dropdown one of the fields' data should be submitted to the database.

However, both fields data is sent to the database. But the database wants a string and now it gets an array. Data can be submitted. What should be adapted to prevent this, so only data from the showed field is put through the controller and not also data from at that moment hidden field?

Note: 1 field (input of dropdown) should be filled in, required.

JQuery

    window.onload = function() {
            document.getElementById('ifYes').style.display = 'none';
            document.getElementById('ifNo').style.display = 'none';
    }
    function hideShow() {
        var D = document.getElementById("yesno")
        var Y = document.getElementById('isYes')
        var N = document.getElementById('isNo')
            if (D.selected) {
            if (D.value == "yes"){
                    Y.style.display = 'block';
                N.style.display = 'none';
                Y.required = true;
            }
            else{
                    N.style.display = 'block';
                Y.style.display = 'none';
                N.required = true;
                } 
        }
    }

HTML

<div class="row">
    <div class="col-6"> 
          <select name="agree" class="form-control" onchange="hideShow();" id="yesno" required>
<option></option>
              <option id="yes">Yes</option>
              <option id="no">No</option>
          </select>
    </div> 
    <div class="col-6">
           <select name="type" class="form-control" id="ifYes">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
            </select>
            <input type="text" id="ifNo" class="form-control input-text" name="type">
     </div>
</div> 
<div class="row">
    <button type="submit" class="btn btn-primary btn-block" style="margin: 10px;">New</button>
</div>

回答1:

In my controller, I have performed validation on institute saying required. Now, I remove this. And with adapting the javascript code the error is gone.

$this->validate($request, [
            'institute'             => 'min:2', 
            ...
]); 

$project = new Project();
...
$project->type = request('type');
...
$project->save();

Javascript adding the disabled fields

    function hideShow() {

        var x = document.getElementById('YesNo');
        var r = x.options[x.selectedIndex].value;
        var y = document.getElementById("ifyes");
        var n = document.getElementById("ifno");
        if ( r == "Yes"){
            y.style.display = "block";
            n.style.display = "none";
            y.disabled = false;
            n.disabled = true;
        y.required = true;
        n.required = false;
        }
        else if ( r == "No") {
            y.disabled = true;
            n.disabled = false;
            y.style.display = "none";
            n.style.display = "block";
        y.required = false;
        n.required = true;
        } else{
            y.disabled = true;
            n.disabled = true;
            y.style.display = "none";
            n.style.display = "none";
        y.required = false;
        n.required = true;
        }
    }

来源：https://stackoverflow.com/questions/57658588/how-to-submit-only-one-of-hide-show-fields-data-when-required-laravel

标签

javascript

jquery

html

jquery-selectors

show-hide