2017-01-05 2 views
0

誰かがこれを重複としてマークする前に、私は多くのサイトを見て、現在この1つを使用しています - jQuery - passing value from one input to anotherガイダンスのために、まだ結果はありません...私は値を1つある形式で別の入力に「表」で入力します。私は非常に奇妙な理由のためにテーブルに入れました - 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()); 
     }); 
    }); 

submitを押すとtxtFullNameuserInputの入力に表示されますが、submitを押すと `txtFullName 'だけが表示されます。また、提出はフォームの送信ボタンです。

もはや必要情報は私が知っている:)

+0

フォームの外に 'input type = submit'を置くことはできません。また、なぜここでJQueryを使用するのですか? –

+0

@ScottMarcus投稿されたリンクに従っていたので。 –

+0

$( 'txtFullName') - セレクタが間違っています。 – sinisake

答えて

1

送信ボタンを使用する場合は、フォーム上のonclickactionに変更する必要があります。他の方法ではなく、入力タイプ]ボタンを使用することですの提出:だから

$(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>

1

あなたはユーザ入力にtxtFullNameを表示したい場合は、単にこのような何か:

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

をそしてヨーヨー必要がある場合は、なぜあなたは、そこに機能を変更する必要がありますか送信をクリックすると変更されます。

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>

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()); 
}); 

関連する問題