提出されたフォームデータを同じページに表示

Question

入力したものを同じページに自分のフォームで表示しようとしています。私は表示するために最初のエントリ "名前"を持っていますが、残りを表示することはできません。私はJQueryバリデーターを使用しています。私はそれが私がここで欠けている簡単な何かのように感じる。ありがとう！

スクリプト：

$(function() { 
    $("#signup").validate(); 

    $("#signup").submit(function(e) { 
     e.preventDefault(); 

     var display = 

     $("#name").val(); 
     $("#theage").val(); 
     $("#theemail").val();   


     $("#result").html(display); 
    }); 
}); 

HTML：。

<div> 
    <form id="signup"> 
     <label for="name" class="label">Enter your name</label> 
     <input type="text" name="name" id="name" title="Required" class="required">&nbsp; 

     <label for="theage" class="label">Enter your age</label> 
     <input type="text" name="theage" id="theage" title="Required" class="required digits">&nbsp; 

     <label for="theemail" class="label">Enter your email</label> 
     <input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">&nbsp; 

     <input type='submit' value='Submit' name="submit" id='submitme'> 
    </form> 

    <p> Your name: </p> 
    <p> Age: </p> 
    <p> Email: </p> 
    <p id="result"></p> 
</div> 

Answer 1

私はあなただけ$（ "＃名"）を追加しているので、あなたの問題があると考えているのval（）表示変数には、次のものが必要ですそれらを連結する。

var display = $("#name").val() + " " + 
       $("#theage").val() + " " + 
       $("#theemail").val(); 

は、ここに例を示します

var result = 
 
      "Hello "; // semi colon ends the assignment 
 
      "world"; // this is doing nothing 
 

 
$('#result1').html(result); 
 

 

 
var result2 = 
 
      "Hello " + 
 
      "world"; 
 

 
$('#result2').html(result2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
1: 
 
<div id="result1"></div> 
 
<br> 2: 
 
<div id="result2"></div>

Answer 2

は、エラーがコンソールに投げされていない、あなたはプラグインを欠落していました。あなたは、フォームの値を連結する必要が

$(function() { 
 

 
     $("#signup").validate(); 
 

 
     $("#signup").submit(function(e) { 
 
      e.preventDefault(); 
 

 
      var display = 
 

 
      $("#name").val(); 
 
      $("#theage").val(); 
 
      $("#theemail").val();   
 

 

 
      $("#result").html(display); 
 

 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<div> 
 
    <form id="signup"> 
 

 
     <label for="name" class="label">Enter your name</label> 
 
     <input type="text" name="name" id="name" title="Required" class="required">&nbsp; 
 

 

 

 
     <label for="theage" class="label">Enter your age</label> 
 
     <input type="text" name="theage" id="theage" title="Required" class="required digits">&nbsp; 
 

 

 

 
     <label for="theemail" class="label">Enter your email</label> 
 
     <input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">&nbsp; 
 

 
     <input type='submit' value='Submit' name="submit" id='submitme'> 
 

 
    </form> 
 
    <p> Your name: </p> 
 
    <p> Age: </p> 
 
    <p> Email: </p> 
 
    <p id="result"></p> 
 

 
</div>

Answer 3

。現在、nameをdisplay varに追加するだけです。

var display = 
    $("#name").val(); // statement ends here because of semicolon 
    $("#theage").val(); 
    $("#theemail").val(); 

値を表示するには

var display = 
    $("#name").val() + " " + 
    $("#theage").val() + " " + 
    $("#theemail").val(); 

Answer 4

に変更する必要がありますが、以下のように使用することができ、フォームに入力された：

$(function() { 
    $("#signup").validate(); 

    $("#signup").submit(function(e) { 
     e.preventDefault(); 

     var display = "<p>Your name: " + $("#name").val() + "</p><p>Your age: " + $("#theage").val() + "</p><p>Your email: " + $("#theemail").val() + "</p>"; 

     $("#result").html(display); 
    }); 
});