Question

大家好我有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" >

和一个按钮

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

现在我希望函数merge（）接受前2个表单中插入的文本，并将第2个字符串的附加符号放在第3个表单中。

我尝试过类似的事情：

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

idform1，idform2和idform3不是正确的ID，但它只是更清楚。当然它不起作用，任何人都可以帮助我吗？感谢

Answer 1

用这个

替换你的代码

<!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>

Answer 2

你得到了所有东西只需改变这个

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

到

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

如果您有更多规范，可以使用String(yourValue)这样的$('#result').val(String(r1)+String(r2))功能，但在这里我们并不需要这样做。

Answer 3

首先您知道使用了错误的输入标记ID更改了正确的ID然后将val("r1+r2")更改为val(r1+r2)。如果您使用变量，那么 string " " quote String Quote仅适用于您设置的普通文本。

最后你在JavaScript下使用jQuery，所以添加head标签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>

从表单html中检索数据

3 个答案: