根据从下拉列表中选择的选项在文本框中设置整数值

时间:2015-09-28 20:07:33

标签: javascript html

我希望在文本框中设置一个整数值,具体取决于从下拉菜单中选择的选项。 dropDown中的每个选项都会在文本框中设置不同的值。这是我的代码。等待有用的答案。

<html>

    <head>

        <script>

    function myfunction(val)
    {
            var x=document.getElementById('ops');

            var y=document.getElementById('text');

            var z=document.getElementById('lb');
            //if(val='pepsi')

                z.style.display = "block";

                y.style.display = "Inline";

                }

        function setval(data)
        {


            var b=document.getElementById('ops');
            var a=document.getElementById('txtprice');

            if (data.value='pepsi')
                {
                var c='50';
                a.value=parseInt(c);    
            }
            else if(data.value='fanta') 
                {

                a.value=parseInt(12);

                }
        // other options 
        }


    function myfun2()
            {
            var c=document.getElementById("lb1");

            var b=document.getElementById("btn1");

            var a=document.getElementById('dte');

            b.style.display="block";

            c.style.display="block";

            a.style.display="block";
            }

    function validateform()
        {

        var n = document.getElementById("text");

    if(n.value==null || n.value==" ")
        {
        alert("please enter any val.");

            return false;
        }
    else
    {

        a = isNaN(n.value);
    //return ( ! isNaN(n.value));

    if(a==true)
    {
        alert ("Characters are not allowed :( ");

        return false;
    }
    else

        return true;    
    }
        }

            </script>


        </head>

<body>

 <form name='mform' action="process.php"  onSubmit="return validateform()">

        <select id="ops" onChange="setval(this)">

                        <option>PIck item </option>
                        <option value="pepsi">pepsi</option>
                        <option value="coke">coke</option>
                        <option value="fanta">Fanta</option>

        </select><br><br>


    <label id="lb" style="display:none" >Qty</label>

    <input type="text" name='qtytext' id="text" style="display:none" onKeyUp="return validateform()" on onSelect="return validateform()" onFocus="myfun2()" required/ >


    <label id="lb1" style="display:none" >.....Before proceeding, Make sure that form is properly filled.....</label>

    <input type="submit" name'btn' id='btn1' value="Submit" style='display:none' /> <br>

    <input type="date" name="dte" id='dte' style="display:none" onKeyUp="return validateform()"  onFocus="myfun2()">

    <input type="text" name'txt' id='txtprice' /> <br>

</form>

        </body>

                </html>

2 个答案:

答案 0 :(得分:1)

您的文本框输入有语法错误。它应该是(你在名字上缺少一个=符号):

<input type="text" name='txt' id='txtprice' />

此外,您应该将字符串传递给文本框,而不是int。所以,例如,改变这个:

a.value=parseInt(c);

对此:

a.value = '50';

更新(更新的小提琴链接):

您还要在条件中分配值,而不是评估它们。例如:

if (data.value='pepsi')

应该是:

if (data.value=='pepsi')

注意:我只评估了解决OP提出的特定问题的代码部分,并没有在代码的其他方面寻找问题。

JSFiddle演示

答案 1 :(得分:0)

这是一个简单的Demo如何实现这一目标。您可能需要稍微更改它以适合您的脚本,但这将向您显示如何从下拉列表中更改文本框中的值的基础知识。

基本上:

<强> HTML

<select id="sel">
   <option value="50">Pepsi</option>
   <option value="100">Fanta</option>
   <option value="150">Cola</option>
</select>    
<input type="text" id="txt">

<强>的jQuery

$('#sel').on('change', function() {
   $('#txt').val($(this).val());
});

如果您更喜欢使用纯Javascript而不是jQuery,只需将上面的jQuery脚本替换为:

<强> JS

document.getElementById("sel").onchange = function(){
   document.getElementById("txt").value = this.value;
}

Demo