如何从输入之间传输值

时间:2017-01-05 00:29:44

标签: javascript jquery html forms

在任何人将此标记为重复之前,我已查看了许多网站,目前正在使用此网站 - jQuery - passing value from one input to another作为指导,但没有结果......我正在尝试从一个输入中传递一个值形成表格中的另一个输入'。我把它放在一个表中是因为一个非常奇怪的原因 - 当一个表单只显示在表中时它不会显示Sparql值,因此input被放在一个表中。我的代码如下:

表格

<form  onclick="txtFullName.value = txtFirstName.value +'_'+ txtLastName.value">
    First name : <input type="text" name="txtFirstName" value="@ViewBag.FirstName"/> <br><br>
    Last name : <input type="text" name="txtLastName" value="@ViewBag.LastName" /> <br><br>
    Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
    <input id="submit12" type="button" value="Submit">
</form>

表格

 <table id="results">
       <Full name: 
        <br>
        <input id="userInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="@ViewBag.DisplayName">
        <br>
        <input id="submit" type="submit" value="Submit">
    </table>

JQUERY

  $('#submit12').on('click', function (e) { //Form submit 
        $('#userInput').change(function () {
            $('txtFullName').val($(this).val());
        });
    });

我在按提交时尝试将txtFullName显示为userInput输入,但现在只显示`txtFullName&#39;按提交时显示。提交也是FORM中的提交按钮。

需要的信息让我知道:)

4 个答案:

答案 0 :(得分:1)

如果要将txtFullName显示到userInput中,只需执行以下操作:

$('#submit12').on('click', function (e) { //Form submit 
        $('#userInput').val($('#txtFullName').val());
});

如果在点击提交时需要更改,为什么还需要更改功能呢?

答案 1 :(得分:1)

如果您尝试使用提交按钮,则需要将表单上的onclick更改为action。另一种方法是使用输入类型按钮而不是提交:

所以:

$(document).ready(function() {

     $('#submit12').on('click', function (e) { 
       console.log('test');
        $("#txtFullName").val($("#txtFirstName").val() + '_' + $("#txtLastName").val());        
    });
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    First name : <input type="text" id="txtFirstName" value="First"/> <br><br>
    Last name : <input type="text" id="txtLastName" value="Last" /> <br><br>
    Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
    <input id="submit12" type="button" value="Submit">
</form>

答案 2 :(得分:1)

像这样编辑你的JQuery:

$('#submit12').on('click', function (e) { //Form submit 
    $('#userInput').change(function () {
        $('#txtFullName').val($(this).val());
    });
});
$('#submit').on('click', function () { //Form submit         
    $('#userInput').val($('#txtFullName').val());
});

我不清楚你为什么这样做,但它可以修复你的代码。

答案 3 :(得分:0)

这两个按钮的作用并不完全清楚,但操作本身非常简单。请参阅内联注释以获得解释:

// Wait until the DOM is loaded and all elements are avaialble
window.addEventListener("DOMContentLoaded", function(){

  // Get references to the DOM elements you'll need
  var theForm = document.getElementById("frmTest");
  var txtFirstName = document.getElementById("txtFirstName");
  var txtLasttName = document.getElementById("txtLastName");
  var txtFulltName = document.getElementById("txtFullName"); 
  var txtUserInput = document.getElementById("txtUserInput");   
  
  var btn1 = document.getElementById("btnSubmit1");
  var btn2 = document.getElementById("btnSubmit2");  
  
  // Function to join names together
  function combine(){
    txtFullName.value = txtFirstName.value + '_' + txtLastName.value;
  }
  
  // Set event handlers
  
  frmTest.addEventListener("click", combine);  
  btn1.addEventListener("click", combine);
     
});
<!-- Keep you JavaScript out of your HTML -->
<form  id="frmTest">
    First name : <input type="text" id="txtFirstName" name="txtFirstName" value="@ViewBag.FirstName"> 
    <br><br>
    Last name : <input type="text" id="txtLastName" name="txtLastName" value="@ViewBag.LastName" > 
    <br><br>
    Full name : <input type="text" id="txtFullName" name="txtFullName"> <br><br />
    <input id="btnSubmit1" type="button" value="Combine Names">



 <table id="results">
       <Full name: 
        <br>
        <input id="txtUserInput" type="text" name="fullname" ${userJson.userId == ''?'': 'disabled'} value="@ViewBag.DisplayName">
        <br>
        <input id="btnSubmit2" type="submit" value="Submit">
    </table>
  
</form>