Benim form submit geçiş ajax-I sadece onsubmit eylemi değiştirmek?

3 Cevap php

Ben sıfırdan formu göndermek bina jquery öğreticiler çok görmek ve serin, ama benim mevcut form dönüştürebilirsiniz merak ediyorum.

Ben tipik bir formu kullanarak, zaten bir e-posta ve yerinde denetimi boş değerlere sahip değilim. Şu anda, formu göndererek, kullanıcı onay php sayfa Withing form submit.php alınır.

Ben "Sizin formu teslim edilmiştir" sadece bir kullanıcıya geçerli sayfada bir çizgi vererek değiştirmek istiyorum

İşte benim şeklidir:

<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" >
<table class="formTable" cellpadding="3" cellspacing="0">
  <tbody><tr>
    <td align="left"><b>Name:</b></td>
    <td><input name="name" id="name" size="25" value="" type="text" /></td>
   </tr>
  <tr>
    <td align="left"><b>Email:</b></td>
    <td><input name="email" id="email" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Confirm Email:</b></td>
    <td><input name="email_confirm" id="email_confirm" size="25"  type="text" /></td>
  </tr>
  <tr>
    <td align="left"><b>Subject:</b></td>
    <td><input name="Subject" id="subject" size="35" value="" type="text" /></td>
  </tr>
  <tr>
    <td align="left" valign="top"><b>Message:</b></td>
    <td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td>
  </tr>
  <tr align="left"><td>&nbsp;</td><td><input type="submit" value="Submit" onclick=" return checkEmail();" />&nbsp;<input type="reset" value="Reset" /></td></tr>
</tbody>
</table>
</form>

Bu yüzden sadece üzerinde değişiklik göndermek veya onclick dış php dosyası aracılığıyla formu göndermek hem muktedir ve aynı sayfada kalmak mümkün mü?

3 Cevap

Sen varolan formu dönüştürebilir, ama sadece onSubmit veya onClick olayları değiştirmek gibi basit değildir.

Eğer bir geri yapmak için jQuery veya başka Ajax kitaplığı kullandığınızda varolan sayfanın içine yeni içerik yükleme vardır. Değiştirmek için herhangi bir veri içeren, bir etiketli bloğu, genellikle bir div gerekir yapmak için. Ayrıca göndermek için geri arama için sarma kod yazmak ve sayfanın HTML güncellemeniz gerekir.

Form üzerinde hızlı ve kirli versiyonu bu div için yeni HTML dönmek bir div etiketi ve Ajax çağrısı tabloyu kaydırmak olacaktır. Onsubmit için yeni hedef yukarıda açıklanan geri arama için sarma kodu olacaktır.

Hala jQuery kullanmak ve doğru yerlere işaret etmek için tüm çalışmaları yapmak gerekiyor. Ben prototype.js kullanmak gibi ben gerçekten detay jQuery süreci olabilir, ancak can okuduğunuz tüm öğreticiler.

Evet öyle. Ben bazı JavaScript (Aşağıdaki örnek jQuery kullanır) tanıtan öneririm:

<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
    // bind some code to the form's onsubmit handler
    $('form[name=theForm]').submit(function() {
        if(formCheck(this)) {
            // $.post makes a POST XHR request, the first parameter takes the form's
            // specified action
            $.post($("form[name=theForm]").attr('action'), function(resp) {
                if(resp == '1') {
                    alert('Your form has been submitted');
                } else {
                    alert('There was a problem submitting your form');
                }
            });
        }
        return false;
    });
});
</script>

Yukarıdaki teslim işleyici sonunda dönüş sahte geleneksel şekilde (url aşağıdaki) formun eylemi yüklenmesini tarayıcı engeller. Javascript yoksa Dahası, formu eski okul yolu sunacak, böylece aslında nazikçe alçaltır standart formu uygulanması üzerinde kullanılabilirlik bir katman ekledi.

Ben gerçekçi geribildirim ile kullanıcıya sunmak için her zaman iyi bir fikir olduğunu işaret etmek istiyorum. Yani yukarıdaki örnekte ben bir '1 'rekor başarıyla kaydedildiği anlamına gelir ve bir '0' olduğunu varsaydık bu değildi demek, formun ajax gönderme sunucudan bu bazı gösterge yakalayabilir, demek ki (sorgu, vb başarısız) kurtardı. Kullanıcıya görüntülenen mesaj bu sonuca bağlıdır.

Myajaxsubmit () fonksiyonu: Evet, bir javascript onclick form eylemi değiştirebilirsiniz.

etiketler