フォームの値を取得してHTMLに表示するにはどうすればいいですか？

私は疑問があります。私はjqueryを介してそのフォームのすべての値を取得し、それを私のdivに表示するフォームを持っています。フォームの値を取得してHTMLに表示するにはどうすればいいですか？

$("input").val();

は、私はこのような入力フィールドの値または任意の要素を取得する方法を知っている、ということを行う方法が、私は私のhtmlでそれを表示する方法を知りません...！上記の関数はちょうど "入力"フィールドの値を取得しますが、テキストエリアもあります。

は、ここに私のコードsnippits

$(document).ready(function(){ 
 
    $("div.radio-checked").hide(); 
 
    $("input[name$='custom']").click(function() { 
 
     $("div.radio-checked").show(); 
 
     $("#default").prop("checked", false); 
 
    }); 
 
    $("input[name$='standard']").click(function() { 
 
     $("div.radio-checked").hide(); 
 
     $("#custom").prop("checked", false); 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
*, 
 
*:after, 
 
*:before { 
 
    box-sizing: inherit; 
 
} 
 

 
html { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
hr { 
 
    display: block; 
 
    height: 1px; 
 
    border: 0; 
 
    border-top: 1px solid #ccc; 
 
    margin: 1em 0; 
 
    padding: 0; 
 
} 
 

 
audio, 
 
canvas, 
 
iframe, 
 
img, 
 
svg, 
 
video { 
 
    vertical-align: middle; 
 
} 
 

 
fieldset { 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
textarea { 
 
    resize: vertical; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    padding: 0 7%; 
 
    display: table; 
 
    margin: 0; 
 
    height: 50vh; 
 
    background: #ffffff; 
 
    color: #11999E; 
 
} 
 

 
section.home { 
 
    width: 100%; 
 
    padding: 0 7%; 
 
    display: table; 
 
    margin: 0; 
 
    background-color: #40514E; 
 
    height: 100vh; 
 
    color: #ffffff; 
 
} 
 

 
section.features { 
 
    width: 100%; 
 
    padding: 0; 
 
    display: table; 
 
    margin: 0; 
 
    height: 50vh; 
 
    background: #ffffff; 
 
    color: #11999E; 
 
} 
 

 
.content { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
h1 { 
 
    font-size: 3rem; 
 
    /* 3/16 */ 
 
    display: block; 
 
    font-weight: 300; 
 
} 
 
h1 .xl { 
 
    font-size: 6rem; 
 
} 
 

 
p { 
 
    font-size: 1.5rem; 
 
    /* 1.5/16 */ 
 
} 
 

 
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], textarea { 
 
    width: 100%; 
 
    border: 1px solid #11999E; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
} 
 

 
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"] { 
 
    height: 40px; 
 
} 
 

 
input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="date"]:hover, textarea:hover { 
 
    -webkit-transition: border-color 0.3s ease-in-out; 
 
    -moz-transition: border-color 0.3s ease-in-out; 
 
    transition: border-color 0.3s ease-in-out; 
 
    border: 1px solid #30E3CA; 
 
} 
 

 
textarea { 
 
    height: 100px; 
 
    max-width: 100%; 
 
    resize: none; 
 
} 
 

 
button[type="submit"] { 
 
    cursor: pointer; 
 
    width: 100%; 
 
    border: none; 
 
    background: #30E3CA; 
 
    color: #000000; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
} 
 

 
button[type="submit"]:hover { 
 
    background: #11999E; 
 
    color: #ffffff; 
 
    -webkit-transition: background 0.3s ease-in-out; 
 
    -moz-transition: background 0.3s ease-in-out; 
 
    transition: background-color 0.3s ease-in-out; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"] + label { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 0 2em 1em 2.5em; 
 
    margin-right: 2em; 
 
    cursor: pointer; 
 
    line-height: 2em; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
input[type="radio"] + label:before, 
 
input[type="radio"] + label:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    border: 1px solid #11999E; 
 
    -webkit-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
} 
 

 
input[type="radio"] + label:before { 
 
    -webkit-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
    box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 2em #ffffff; 
 
} 
 

 
input[type="radio"] + label:hover:before { 
 
    -webkit-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
    box-shadow: inset 0 0 0 0.3em white, inset 0 0 0 2em #30E3CA; 
 
} 
 

 
input[type="radio"]:checked + label:before { 
 
    -webkit-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
    box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 2em #11999E; 
 
} 
 

 
.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-left: -55px; 
 
} 
 

 
/* Tooltip text */ 
 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 180px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 5px 0; 
 
    border-radius: 6px; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -90px; 
 
    /* Position the tooltip text - see examples below! */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
/* Show the tooltip text when you mouse over the tooltip container */ 
 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
} 
 

 
.tooltip .tooltiptext::after { 
 
    content: " "; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    /* At the top of the tooltip */ 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: transparent transparent black transparent; 
 
} 
 

 
.radio-checked { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 16px; 
 
    transform: scale(0.8); 
 
    transition: 0.5s; 
 
} 
 
input[type="radio"]:checked ~ .radio-checked { 
 
    opacity: 1; 
 
    max-height: 200px; 
 
    padding: 0; 
 
    margin: 0; 
 
    transform: scale(1); 
 
} 
 
.radio-checked input[type="text"], .radio-checked input[type="number"] { 
 
    width: 50%; 
 
    border: 1px solid #11999E; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    height: 40px; 
 
    float: left; 
 
} 
 
.radio-checked label { 
 
    float: left; 
 
} 
 
.radio-checked input[type="text"]:hover, .radio-checked input[type="number"]:hover, .radio-checked textarea:hover { 
 
    -webkit-transition: border-color 0.3s ease-in-out; 
 
    -moz-transition: border-color 0.3s ease-in-out; 
 
    transition: border-color 0.3s ease-in-out; 
 
    border: 1px solid #30E3CA; 
 
} 
 
.radio-checked textarea { 
 
    width: 100%; 
 
    border: 1px solid #11999E; 
 
    margin: 0 0 5px; 
 
    padding: 10px; 
 
    height: 100px; 
 
    max-width: 100%; 
 
    resize: none; 
 
    float: left; 
 
}

<link href="https://emjimadhu.com/grid.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section class="home"> 
 
     <div class="content"> 
 
      <div class="col-md-6"> 
 
       <form class="" action="index.html" method="post"> 
 
        <fieldset> 
 
         <label for="name">Enter Your Full name</label> 
 
         <input type="text" id="name" name="name" placeholder="Your Full Name" required></input> 
 
        </fieldset> 
 
        <fieldset> 
 
         <label for="email">Enter your Email:</label> 
 
         <input type="email" id="email" name="name" placeholder="Your Email" required></input> 
 
        </fieldset> 
 
        <fieldset> 
 
         <label for="phone">Enter Your Phone Number:</label> 
 
         <input type="tel" id="phone" name="name" placeholder="Your Phone Number" required></input> 
 
        </fieldset> 
 
        <fieldset> 
 
         <label for="address">Enter Your Address:</label> 
 
         <textarea name="name" id="address" rows="8" cols="40" placeholder="Your Address" required></textarea> 
 
        </fieldset> 
 
        <fieldset> 
 
         <label for="pickup">Date of Courier</label> 
 
         <input type="date" name="name" id="pickup"></input> 
 
        </fieldset> 
 
        <fieldset> 
 
         <span>Select your type of Courier:</span><br> 
 
         <div> 
 
          <input type="radio" name="standard" id="default" required></input> 
 
          <label for="default">Standard</label> 
 
          <div class="tooltip"><i class="fa fa-question-circle-o"></i> 
 
           <span class="tooltiptext">A Standard courier is picking up a courier from you.</span> 
 
          </div> 
 
         </div> 
 
         <div> 
 
          <input type="radio" name="custom" id="custom" required></input> 
 
          <label for="custom">Custom</label> 
 
          <div class="tooltip"><i class="fa fa-question-circle-o"></i> 
 
           <span class="tooltiptext">A Custom Courier is type of gift where we buy products based on your interest and we deliver it to your recipent.</span> 
 
          </div> 
 
          <div class="radio-checked"> 
 
           <label for="product-name">Name of your Product?</label> 
 
           <input type="text" id="product-name" name="which-cat" data-require-pair="#custom" required> 
 
           <label for="product-cost">Approximate Cost of the product?</label> 
 
           <input type="number" id="product-cost" name="which-cat" data-require-pair="#custom" required> 
 
           <label for="product-address">Where to Buy/Pickup the product?</label> 
 
           <textarea name="name" id="product-address" rows="8" cols="40" data-require-pair="#custom" required></textarea> 
 

 
          </div> 
 
         </div> 
 
        </fieldset> 
 

 
        <fieldset> 
 
         <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> 
 
        </fieldset> 
 
       </form> 
 
      </div> 
 
      <div id="output" class="col-md-6"> 
 
       <p>name:</p> 
 
       <p> 
 
       number: 
 
       </p> 
 
       <p> 
 
       email: 
 
       </p> 
 
       <p> 
 
       address: 
 
       </p> 
 
       <p> 
 
       date: 
 
       </p> 
 
       <p> 
 
       courier type: 
 
       </p> 
 
       
 
      </div> 
 
     </div> 
 
    </section>

私は#outputのdiv要素に対応するフィールドにすべてのフィールドの値とショーを取得したい

です。

ラジオボタンの追加フィールドを表示するためのクリック機能があります。ラジオボタンをクリックすると、そのフィールドも表示します。

出典

2016-10-11 Em Ji Madhu

あなたが.htmlのを（使用することができます） – Fil

ソース：-http：//www.w3schools.com/js/js_input_examples.asp –

これを試してみてください。

$('#contact-submit').click(function(){ 
    var formKeyValue=null; 
    var string=""; 
    formKeyValue = $('#myForm').serializeArray(); 
    $(formKeyValue).each(function(index, obj){ 
    string = string+"<p>"+obj.name+' : '+obj.value+"</p><br>" 
    }); 
    $("#output").html(""); 
    $("#output").html(string); 
});

注：すべてのinputタグのname属性が異なる/一意である必要があります。

<fieldset> 
    <label for="email">Enter your Email:</label> 
    <input type="email" id="email" name="email" placeholder="Your Email" required/> 
</fieldset>

出典

2016-10-11 12:38:54

* "すべてのinputタグのname属性は、異なる/一意である必要があります。" *あなたは 'name ='と 'id ='を混在させています。名前はユニークである必要はなく、多くの場合、そうでなくてはなりません。（ただし、コードは良い:) –

これはユニークである必要はありませんが、この場合はラベルの名前属性を考慮しているので、ユニークでなければならないコントローラに同じフォームを送信する必要があります –

@rakesh私はラジオボタンを持っています。「カスタム」ラジオボタンのために私は追加のフィールドを持っています、何か方法はありますか？出力には、入力されたフィールドのみが表示されます。空のフィールドを表示しないでください？もう1つは、 'standard = on'として出力されるラジオボタンを表示することです。代わりにラジオのuttonに追加される値を表示できますか？例えば数値とか？本当に申し訳ありません、私はjqueryに新しい、thatsなぜこれらの多くの質問..！ –

フォームの値を取得してHTMLに表示するにはどうすればいいですか？

答えて

関連する問題