Ако виждаш това съобщение, значи уебсайтът ни има проблем със зареждането на външни ресурси.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Основно съдържание

Преговор: Обработка на форми с 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();
    });

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

  • Аватар blobby green style за потребителя Любомир Михалчев
    Имам един проблем в една форма трябва да сложа 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 глас)
    Аватар Default Khan Academy avatar за потребителя
Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.