Javascript 从html表单检索数据_Javascript_Html_Forms_Text

Javascript 从html表单检索数据

javascript html forms text

Javascript 从html表单检索数据,javascript,html,forms,text,Javascript,Html,Forms,Text,大家好，我有3张表格： <label for="color1" style="color: yellow;">1° colore:</label> <input type="text" class="form-control" id="color1" placeholder="Insert color"> <label for="color2" style="color: yellow;">2° colore:</label> <

大家好，我有3张表格：

<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">

<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">

<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >

1°颜色：
2°颜色：
Risultato：

和按钮

<button type="button" onclick="merge()">merge</button>

合并

现在，我希望函数merge（）接受前两种形式中插入的文本，并将这两个字符串的附加内容放在第三种形式中

我试过这样的方法：

<script>
function merge(){
    var r1= $('#idform1').val();
    var r2= $('#idform2').val();
    $('#idform3').val('r1+r2');}
</script>


函数merge（）{
var r1=$（'#idform1'）.val（）；
var r2=$（'#idform2'）.val（）；
$（'#idform3'）.val（'r1+r2'）；}

idform1、idform2和idform3不是正确的id，但为了更清楚起见。

当然不行了，有人能帮我吗？谢谢用这个替换你的代码

<!DOCTYPE html>
<html>
<script src="put your path to jquery.js"></script>
<body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">

<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">

<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
<button type="button" onclick="merge()">merge</button>
<script>
function merge(){ 
    var r1= $('#color1').val();
    var r2= $('#color2').val();
    $('#result').val(r1+r2);}
</script>
</body>
</html>


1°颜色：
2°颜色：
Risultato：
合并
函数merge（）{
var r1=$（'#color1'）.val（）；
var r2=$（'#color2'）.val（）；
$（“#结果”）.val（r1+r2）；}

你得到了一切只要改变这个

<script>
function merge(){
    var r1= $('#idform1').val();
    var r2= $('#idform2').val();
    $('#idform3').val('r1+r2');}// this line
</script>


函数merge（）{
var r1=$（'#idform1'）.val（）；
var r2=$（'#idform2'）.val（）；
$（'#idform3'）.val（'r1+r2'）；}//此行

到


函数merge（）{
var r1=$（'#idform1'）.val（）；
var r2=$（'#idform2'）.val（）；
$（'#result'）.val（r1+r2）；}//

如果你有更多的规范，你可以使用

String（yourValue）

函数，比如

$（“#result”）.val（String（r1）+String（r2））

，但这里我们并不真正需要它。

首先你知道你使用了错误的输入标签id更改了正确的id，然后将

val（“r1+r2”）

更改为

val（r1+r2）

。如果您使用的变量不是字符串
”
quotestring quote仅用于设置正常文本时

最后，您可以在JavaScript下使用jQuery，因此可以添加头标记jQuery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这是您的完整代码：

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function merge(){
    var r1= $('#color1').val();
    var r2= $('#color2').val();
    $('#result').val(r1+r2);}
</script>
</body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<br>
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<br>
<label for="result" style="color: red;" >Risultato:</label>
<input type="text" class="form-control" id="result" >
<br>
<button type="button" onclick="merge()">merge</button>
</body>
</html>


函数merge（）{
var r1=$（'#color1'）.val（）；
var r2=$（'#color2'）.val（）；
$（“#结果”）.val（r1+r2）；}
1°颜色：


2°颜色：


Risultato：


合并

试试

$（'idform3'）.val（r1+r2）

而不是

$（'#idform3'）.val（'r1+r2'）r1
和r2
已经是字符串了，你为什么需要将它们转换成字符串？我知道我提到了这一点，正如你所看到的“但这里我们并不真正需要它”。这是为了不同的场景和额外的知识。然后你忘了提到更换轮胎时应该拧紧车轮上的螺栓（也与问题无关——但还是有额外的知识！）您意识到在第三个元素上已经有一个id（result
），您添加了第二个id属性（color3）我更改了您所说的一切，我插入了jquery库并省略了val上的“”。（r1+r2）但当我按下按钮时，仍然没有任何事情发生，我正在与英特尔合作XDK@nescionomen93你可以检查我的代码它的工作。你可以粘贴你的完整的原始代码，以便调试任何其他问题。这是你所要求的，它工作得很好
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function merge(){
    var r1= $('#color1').val();
    var r2= $('#color2').val();
    $('#result').val(r1+r2);}
</script>
</body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<br>
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<br>
<label for="result" style="color: red;" >Risultato:</label>
<input type="text" class="form-control" id="result" >
<br>
<button type="button" onclick="merge()">merge</button>
</body>
</html>