Электронная почта формы интерактивности - PullRequest
Новая
       14

Электронная почта формы интерактивности

0 голосов
/ 31 марта 2011

Я студент по веб-разработке, и мне нужна помощь. У меня есть код ниже; Как сделать так, чтобы она работала только тогда, когда форма отправлена, а не текстовое поле, по нажатию. Я также хотел бы получить и вставить значение textField в .thanks Div. Пожалуйста, помогите мне учиться. 

<script type="text/javascript">

$(document).ready(function(){
  $(".quote").click(function(){
     $(this).fadeOut(5000);
    $(".thanks").fadeIn(6000);
    var name = $("#name").val(); 
      $("input").val(text);


  }); 

});

</script>

<style type="text/css">
<!--
.thanks {
    display: none;
}
-->
</style>
</head>

<body>
<form action="" method="get" id="quote" class="quote">
  <p>
    <label>
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="button" id="button" value="Submit" />
    </label>
  </p>
</form>
<div class="thanks"> $("#name").val();  Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->

Ответы [ 2 ]

0 голосов
/ 31 марта 2011

Это немного грубо и готово, но вы должны начать 

$(document).ready(function(){
  $("#submitbutton").click(function(){
    //fade out the form - provide callback function so fadein occurs once fadeout has finished
    $("#theForm").fadeOut(500, function () {
        //set the text of the thanks div
        $("#thanks").text("Thanks for contacting us " + $("#name").val());
        //fade in the new div
        $("#thanks").fadeIn(600);
        });

  }); 

});

, и я немного изменил html: 

<div id="theForm">
<form action="" method="get" id="quote" class="quote">
  <p>
    <label>
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="button" name="submitbutton" id="submitbutton" value="Submit" />
    </label>
  </p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
0 голосов
/ 31 марта 2011

Здесь есть несколько вопросов:

Используя $('.quote').click(), вы устанавливаете обработчик на любое событие щелчка для любого элемента, содержащегося в <form>.Если вы хотите перехватывать только события отправки, вы должны либо установить обработчик щелчка на кнопке отправки: 

// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() { 
    // do stuff
    return false; // this will keep the form from actually submitting to the server,
                  // which would cause a page reload and kill the rest of your JS
});

, либо, предпочтительно, обработчик отправки в форме: 

// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() { 
    // do stuff
    return false; // as above
});

Обработчики отправки лучше, потому что они ловят другие способы отправки формы, например, нажимая Enter при вводе текста.

Кроме того, в вашем скрытом <div> вы помещаете Javascript в обычный текст, а нев теге <script>, так что это просто будет видно на экране.Возможно, вам нужен элемент-заполнитель, на который вы можете сослаться: 

<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>

Затем вы можете вставить имя в заполнитель: 

var name = $("#name").val();
$('#nameholder').html(name);

Я не знаю, что вы пытаетесь сделатьсо строкой $("input").val(text); - text здесь не определено, так что это не имеет никакого смысла.

...