javascript - 如何在需要时仅提交一个隐藏/显示字段数据 - Laravel

标签 javascript jquery html jquery-selectors show-hide

一个表单包含多个字段。一个字段是“是/否”下拉菜单。选择"is"时,会出现另一个下拉菜单。当没有选择文本输入字段时出现。 根据是/否下拉列表,应将其中一个字段的数据提交到数据库。

但是,这两个字段数据都被发送到数据库。但是数据库想要一个字符串,现在它得到一个数组。可以提交数据。 应该采取什么措施来防止这种情况发生,以便只有显示字段中的数据通过 Controller 而不是当时隐藏字段中的数据?

注意:需要填写 1 个字段(下拉列表的输入)。

查询
    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>

最佳答案

在我的 Controller 中,我已经对研究所说需要进行了验证。现在,我删除它。通过调整 javascript 代码,错误消失了。

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

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

Javascript 添加禁用字段

    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;
        }
    }

关于javascript - 如何在需要时仅提交一个隐藏/显示字段数据 - Laravel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57658588/

相关文章:

javascript - Three.js Mesh 没有使用 AnimationHandler 进行动画处理

php:使用变量名在不同页面上显示特定图像

javascript - 仅在一个组件中调用方法

javascript - 基于复选框添加数字

javascript - 为什么函数响应 .prototype 但常规对象不响应?

javascript - 使用 Node.js 框架使用 JavaScript 将数据从 Mongodb 传递到 HTML 表

javascript - 字母字符串排序

javascript - 通过 php/html/javascript 等控制浏览器的搜索栏文本

javascript - 如何防止 fancybox 关闭?想让用户点击关闭按钮而不是浏览器上的任何地方

php - 使用 PHP 动态验证 HTML 表单