Преговор: Обработка на форми с jQuery

За да обработиш форма с jQuery, трябва да добавиш слушател за събитието към елемента form за събитието 'submit':

    $("form").on("submit", function() {
       // обработка на формата
    });

Ако обработваш формата изцяло с jQuery, трябва да извикаш preventDefault(), за да избегнеш презареждането на страницата:

    $("form").on("submit", function(event) {
       event.preventDefault();
       // обработка на формата
    });

Когато искаш да разбереш какво е попълнено от потребител във формата, обикновено използваш val():

    var answer = $("#answer").val();

В колбек функцията можеш да се обърнеш към елемента form, като използваш ключовата думаthis. Често срещан шаблон е да извикаш find() върху елемента form, за да намериш входните данни само в този елемент:

    $("form").on("submit", function() {
      // съхрани стойността на входа с атрибут name='age' 
       var age = $(this).find('[name=age]').val();
    });

(Виж пълен пример тук)

Искаш ли да се присъединиш към разговора?

Вписване в профила

Сортирай по:

Любомир Михалчев
Публикувано преди 5 години. Пряка връзка до поста на Любомир Михалчев: “Имам един проблем в една ...”
Имам един проблем в една форма трябва да сложа tabs с полета за попълване. Проблема е ,че когато кликна върху бутоните на tabs-а формата задейства. Сложих
$('form').on('submit', function(event) {
event.preventDefault(); за да предотвратя това, но сега пък submit- бутона спря да работи и не мога да изпратя формата.

Може ли да ми помогнете ?

------------------------

<form name="form1" method="post" action="">

<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button tablink w3-red" onclick="openCity(event,'London')">London</button>
<button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Paris')">Paris</button>
<button class="w3-bar-item w3-button tablink" onclick="openCity(event,'Tokyo')">Tokyo</button>
</div>

<div id="London" class="w3-container w3-border city">
<h2>London</h2>
<p> <textarea name="textarea_1"></textarea></p>
</div>

<div id="Paris" class="w3-container w3-border city" style="display:none">
<h2>Paris</h2>
<p> <textarea name="textarea_2"></textarea></p>
</div>

<div id="Tokyo" class="w3-container w3-border city" style="display:none">
<h2>Tokyo</h2>
<p> <textarea name="textarea_3"></textarea></p>
</div>
</div>

<input type="submit" name="Submit" value="Submit">

</form>

<script>
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";

$('form').on('submit', function(event) {
event.preventDefault();
});

}
</script>
Бутонът води до страницата за създаване на профилБутонът води до страницата за създаване на профил
(1 глас)
Отговор

Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.