0

基本的に私がやろうとしているのは、フォームデータをフォームの同じ場所に送信することだけです。

コードは次のようにする必要があります。

  1. #submit クリック アクションを取得する
  2. #email、#selection1、#selection2 のデータを抽出する
  3. フォームを隠す #form
  4. #email、#selection1、#selection2 を段落 #preview 内に表示

私は JQuery の経験がないので、迷っています。私は周りを見回して別のコードを試してみましたが、何もうまくいきませんでした.

私のフォームコードは次のとおりです。

<form method="post" id="form">
                <div class="form-group col-lg-10 col-lg-offset-1">
                    <input type="email" id="email" class="form-control" name="email" placeholder="Email" />
                </div>

                <div class="form-group col-lg-10 col-lg-offset-1">
                    <select class="form-control" id="selection1">
                        <option>Option 1</option>
                        <option>Option 2</option>
                     </select>
                </div>

                <div class="form-group col-lg-10 col-lg-offset-1">
                    <select class="form-control" id="selection2">
                        <option selected="selected">Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                    </select>
                </div>

                <div class="form-group col-lg-offset-1 col-lg-10">
                    <button type="button" id="submit" class="btn btn-primary btn-lg">Sign in</button>
                </div>
</form>

<p id="preview"></p>

これが私が試したJQUEryです。

<script type="text/javascript">
      $("#submit").click(function () {
          var FormVal = {
              datafield1: $('#email').val(),
              datafield2: $('#field2').val()
          };

          $.ajax({
              type: "POST",
              dataType: "json",
              data: FormVal,
              async: false,
              success: function (response) {
                  $('#preview').html($('#email').val() + '<br />' + $('#selection1').val()) + '<br />' + $('#selection2').val());
              }
          });
      });
  </script>
4

2 に答える 2

0 
$('#preview').html($('#email').val() + '<br />' + $('#selection1').val()) + '<br />' + $('#selection2').val());

このコードには余分な括弧があります: $('#selection1').val()). ブラウザのコンソールを使用して、構文エラーをデバッグできます。

于 2013-10-29T18:29:31.200 に答える