javascriptを使用して入力フィールドからdiv要素値を設定する方法

div要素に入力フィールド値を表示したいとします。ユーザーがサブミットボタンをクリックすると、divに入力フィールドの値が表示されます。私のコードはjavascriptを使用して入力フィールドからdiv要素値を設定する方法

<form onsubmit="add_value()"> 
    <div class="form-group"> 
     <label for="email">Email address:</label> 
     <input type="email" class="form-control" id="email"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="password" class="form-control" id="pwd"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" id="remember"> Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 

function add_value() 
{ 
    var email = document.getElementById('email').value; 
    var pass = document.getElementById('pwd').value; 
    var chek = document.getElementById('remember'); 
    var add = document.getElementById('ele_val'); 
    add.innerHTML = email; 

}

出典

2017-05-01 Niranjan Parmar

id = ele_valでdivを追加する必要があります –

はい、すべてhtmlでidを持つdiv要素を追加しましたが、私の質問では忘れてしまいます。私のすべてのコードが聞こえます

–

以下のスニペットを参照してください。

document.getElementById('form').addEventListener('submit', function(e) { 
 
    var email = document.getElementById('email').value, 
 
     pass = document.getElementById('pwd').value, 
 
     chek = document.getElementById('remember'), 
 
     add = document.getElementById('ele_val'); 
 
    add.innerHTML = email; 
 

 
    //for testing purposes 
 
    e.preventDefault(); 
 
    return false; 
 
});

<form id="form"> 
 
    <div class="form-group"> 
 
     <label for="email">Email address:</label> 
 
     <input type="email" class="form-control" id="email"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="pwd">Password:</label> 
 
     <input type="password" class="form-control" id="pwd"> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <label><input type="checkbox" id="remember"> Remember me</label> 
 
    </div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
    <div id="ele_val" style="color:red;"></div> 
 
</form>

出典

2017-05-01 07:13:59

ありがとうございます@ Dilhan Jayathilake –

受け入れ答えは、与えられた問題の最善の解決策を示しています。

しかし、あなたは（推奨されません）インラインを使用する場合は、次のように行うことができます。

あなたが検証を実行するために check_validation()方法であなたのロジックを追加することができます

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script> 
 
    function check_validation() 
 
    {  
 
     var email = document.getElementById('email').value; 
 
     var pass = document.getElementById('pwd').value; 
 
     var chek = document.getElementById('remember'); 
 
     var add = document.getElementById('ele_val'); 
 
     add.innerHTML = email; 
 
     return false; // return true if validation is okay! 
 
    }; 
 
    </script> 
 
</head> 
 
<body> 
 
    <form onsubmit="event.preventDefault();check_validation();"> 
 
     <div class="form-group"> 
 
      <label for="email">Email address:</label> 
 
      <input type="email" class="form-control" id="email"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="pwd">Password:</label> 
 
      <input type="password" class="form-control" id="pwd"> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label><input type="checkbox" id="remember"> Remember me</label> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
    <div id="ele_val"></div> 
 
</body> 
 
</html>

を。ユーザー入力が正常でない場合は、falseを返します。それ以外の場合はtrueを返します。それが役に立てば幸い！

出典

2017-05-01 07:36:17 arsho

javascriptを使用して入力フィールドからdiv要素値を設定する方法

答えて

関連する問題