qq_33554165
King_尛唸
采纳率100%
2017-08-21 01:10

表单 选择其他后要求必填文本

已采纳

如下:
选择标签select中有一个option为“其他”,现想实现如果选择为“其他”选项的时候,显示一个“input type="text" ”的输入框,然后对这个输入框做失去焦点验证是否有值的功能。请各位大大帮忙下(JS不佳,最好详细点)
部分代码片段如下
图片说明

 <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf8_decode" /> 
<title>无标题文档</title> 
</head> 
<script>
    <!--故障类型选择“其他”的时候弹出文本框-->
        function select_change() 
        {
            if (document.getElementById("select_id").value == "其他") 
            {
                document.getElementById("input_text").style.display = "block";

            } 
            else {
                document.getElementById("input_text").style.display = "none";
            }
        }
        function show() {
            var input_text = document.getElementById("input_text").value;
            if (input_text.length > 0) {
                document.getElementById("input_text").style.display = "none";
            } else {
                document.getElementById("input_text").style.display = "block";
            }
        }
</script> 
<body> 
<form name="form1" action="update2.php" method="post">
        <table >    
            <tr>
                <td>故障描述</td>
                <td>
                    <select name="question" onchange="select_change()" id="select_id"> 
                        <option>花屏</option>
                        <option>3.5mm接口无法使用</option>
                        <option>电源接口接触不良</option>
                        <option>电脑蓝屏</option>
                        <option>提示需运行“chkdsk”工具</option>
                        <option>其他</option>
                    </select>
                    <input type="text" id="input_text" style="display: none" name="question2" onblur="show()"/>
                    <strong id="input_text" style="color: red;display: none;">您输入的信息为空!</strong>
                </td>
            </tr>
        </table>
</form> 
</body> 
</html> 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • Small_Mouse0 鼠小 4年前

    改好了,,,,哎你的输入框和输入出错提示id叫的一样,,,这是有问题的。,,我改了,,你看看

     <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
        <title>无标题文档</title>
    </head>
    <script>
        <!--故障类型选择“其他”的时候弹出文本框-->
        function select_change() {
            if (document.getElementById("select_id").value == "其他") {
                document.getElementById("input_text").style.display = "block";
            }
            else {
                document.getElementById("input_text").style.display = "none";
            }
        }
        function show() {
            var input_text = document.getElementById("input_text").value;
            if (input_text.length > 0) {
                document.getElementById("input_hint").style.display = "none";
            } else {
                document.getElementById("input_hint").style.display = "block";
            }
        }
    </script>
    <body>
    <form name="form1" action="update2.php" method="post">
        <table>
            <tr>
                <td>故障描述</td>
                <td>
                    <select name="question" onchange="select_change()" id="select_id">
                        <option>花屏</option>
                        <option>3.5mm接口无法使用</option>
                        <option>电源接口接触不良</option>
                        <option>电脑蓝屏</option>
                        <option>提示需运行“chkdsk”工具</option>
                        <option>其他</option>
                    </select>
                </td>
                <td><input type="text" id="input_text" style="display: none" name="question2" onblur="show()"/>
                </td>
                <td><strong id="input_hint" style="color: red;display: none;">您输入的信息为空!</strong></td>
            </tr>
        </table>
    </form>
    </body>
    </html>
    
    点赞 1 评论 复制链接分享
  • qiuqidehao 行做笔心当墨 4年前
     <div style="padding:20px;">
                姓名:<input type="text" /><br /><br />
                公司:<select name="" id="s">
                    <option value="def">---选择---</option>
                    <option value="tx">腾讯</option>
                    <option value="bd">百度</option>
                    <option value="al">阿里</option>
                    <option value="orther">其他</option>
                </select><br /><br />
                备注:<input type="text" />
                <script>
                    $(function(){
                        $("#s").on("change",function(){
                            var v = $(this).val();
                            if(v == "def"){ return }
                            if(v == "orther"){
                                $(this).before("<input type='text' id='other' />");
                                $("#other").focus();
                                $("#other").blur(function(){
                                    if(!$(this).val()){
                                        alert("没有值!");
                                        $(this).focus();
                                    };
                                });
                                $(this).hide();
                            }
                        });
                    });
                </script>
            </div>
    
    点赞 评论 复制链接分享
  • qiuqidehao 行做笔心当墨 4年前
    姓名:

    公司:---选择---腾讯百度阿里其他

    备注: $(function(){ $("#s").on("change",function(){ var v = $(this).val(); if(v == "def"){ return } if(v == "orther"){ $(this).before("<input type='text' id='other' />"); $("#other").focus(); $("#other").blur(function(){ if(!$(this).val()){ alert("没有值!"); $(this).focus(); }; }); $(this).hide(); } }); });
    
    
    点赞 评论 复制链接分享
  • Small_Mouse0 鼠小 4年前

    给个例子吧,,,现敲的,,,有问题还可以追问。,,,木有问题,,给个采纳

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> new document </title>
        <meta charset="UTF-8">
        <!--<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->
        <script type="text/javascript">
            function show() {
                var input = document.getElementById("input").value;
                if (input.length > 0) {
                    document.getElementById("text").style.display = "none";
                } else {
                    document.getElementById("text").style.display = "block";
                }
    
            }
        </script>
    </head>
    
    <body>
    姓名:<input type="text" id="input" onblur="show()"/>
    <strong id="text"
            style="color: red;display: none;">您输入的信息为空!</strong>
    </body>
    </html>
    
    

    图片说明
    图片说明

    点赞 评论 复制链接分享
  • qq_38005982 我本狂儒 4年前

    这么和你说,给其他这个下拉菜单按键一个onclick事件,点击后进入js的方法里!你可以先预先设定一个空的div,点击后在onclick的方法里用attr();
    把这个attr的添加给div,就能显示一个文本框,只要失去焦点就进入失去焦点的方法,判断又没有值,没值就弹窗

    点赞 评论 复制链接分享

相关推荐