基于HTML表单

问题描述 投票:0回答:1

我一直在尝试创建一个表单,当我们单击具有1到10的相应值的按钮时,所选的数字将写入输入“名称”。代码如下:

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (isNaN(x) || x < 1 || x > 10) {
    alert("Number should be between 1 to 10");
    return false;
  }
}

function click(theid) {
  var text = theid.toString();
  var val = document.forms["myForm"][text].value;
  val = Number(val);
  document.forms["myForm"]["fname"].value = val;
}
<!DOCTYPE html>
<html>

<body>
  <form name="myForm" onsubmit="return validateForm()" method="post">
    Name: <input type="text" name="fname" id="fname"><input type="submit" value="Submit">
    <br><br>
    <input type="button" value="1" id="one" name="one" onclick="click('one')">
    <input type="button" value="2" id="two" onclick="click('two')">
    <input type="button" value="3" id="three" onclick="click('three')">
    <input type="button" value="4" id="four" onclick="click('four')">
    <input type="button" value="5" id="five" onclick="click('five')">
    <input type="button" value="6" id="six" onclick="click('six')">
    <input type="button" value="7" id="seven" onclick="click('seven')">
    <input type="button" value="8" id="eigth" onclick="click('eigth')">
    <input type="button" value="9" id="nine" onclick="click('nine')">
    <input type="button" value="10" id="ten" onclick="click('ten')">
  </form>
</body>

</html>

单击的数字未写入输入中

javascript jquery html web
1个回答
0
投票

试试这个,我将click()的名称改为myFunction()

       <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
               <!DOCTYPE html>
                <html>
                <head>
                <script>
                function validateForm() {
                    var x=document.forms["myForm"]["fname"].value;
                    if(isNaN(x) || x<1 || x>10)
                    {
                        alert("Number should be between 1 to 10");
                        return false;
                    }
                }
                function myFunction(theid)
                {
                    console.log(theid);
                    var text=theid.toString();
                    var val=document.forms["myForm"][text].value;
                    val = Number(val);
                    document.forms["myForm"]["fname"].value=val;
                }
                </script>
                </head>
                <body>
    
                <form name="myForm" onsubmit="return validateForm()" method="post">
                Name: <input type="text" name="fname" id="fname"><input type="submit" value="Submit">
                <br><br>
                <input type="button" value="1" id="one" name="one" onclick="myFunction('one')">        
                <input type="button" value="2" id="two" onclick="myFunction('two')">     
                <input type="button" value="3" id="three" onclick="myFunction('three')">     
                <input type="button" value="4" id="four" onclick="myFunction('four')">     
                <input type="button" value="5" id="five" onclick="myFunction('five')">    
                <input type="button" value="6" id="six" onclick="myFunction('six')">     
                <input type="button" value="7" id="seven" onclick="myFunction('seven')">     
                <input type="button" value="8" id="eigth" onclick="myFunction('eigth')">     
                <input type="button" value="9" id="nine" onclick="myFunction('nine')">     
                <input type="button" value="10" id="ten" onclick="myFunction('ten')">     
                </form>
                </body>
                </html>
    </body>
    </html>
© www.soinside.com 2019 - 2024. All rights reserved.