HTML formu yuvalama sınırlamasının üstesinden nasıl gelirsiniz?

XHTML'nin iç içe form etiketlerini desteklemediğini biliyorum ve burada bu konuda Stack Overflow ile ilgili diğer cevapları zaten okudum, ancak yine de soruna zarif bir çözüm bulamadım.

Bazıları buna ihtiyacınız olmadığını ve bunun gerekli olacağını bir senaryo düşünemediklerini söylüyor. Şahsen buna ihtiyaç duymadığım bir senaryo düşünemiyorum .

Çok basit bir örnek görelim:

Bir blog uygulaması yapıyorsunuz ve yeni bir gönderi oluşturmak için bazı alanları ve "Kaydet", "Sil", "İptal" gibi "eylemleri" olan bir araç çubuğunu içeren bir formunuz var.

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

Amacımız, formu JavaScript gerektirmeyen bir şekilde yazmak , sadece eski HTML formunu ve düğmelerini göndermek.

Eylem URL'si Form etiketinde tanımlandığından ve her bir gönderme düğmesinde değil, tek seçeneğimiz genel bir URL'ye posta göndermek ve ardından düğmenin adını belirlemek için "if ... then ... else" komutunu başlatmaktır. gönderildi. Çok zarif değil, ama tek seçeneğimiz, çünkü JavaScript'e güvenmek istemiyoruz.

Tek sorun, bu eylem için gereken tek şey post-id ile bir Gizli girdi olmasına rağmen, "Sil" tuşuna basıldığında TÜM form alanlarını sunucuda göndermesidir. Bu küçük örnekte çok önemli değil, ancak LOB uygulamalarımda yüzlerce (tabiri caizse) alan ve sekme içeren formlar var (gereksinimler nedeniyle) her şeyi tek seferde göndermek zorunda ve her durumda bu çok verimsiz görünüyor ve bir israf. Form yerleştirme destekleniyorsa, en azından kendi formunun içindeki "Sil" gönderme düğmesini yalnızca post-id alanıyla sarabilirim.

"Gönder yerine" Sil "bağlantısını bir bağlantı olarak uygulayın" diyebilirsiniz. Bu pek çok düzeyde yanlış olur, ama en önemlisi burada "Sil" gibi yan etki eylemleri asla bir GET isteği olmamalıdır.

Yani sorum (özellikle yuva yerleştirmeye ihtiyaç duymadıklarını söyleyenler için) SİZ ne yapıyorsunuz? Eksik olduğum herhangi bir zarif çözüm var mı ya da sonuçta gerçekten "JavaScript ister ya da her şeyi gönderin" mi?

Bunu tam olarak açıkladığınız gibi uygulayacağım: her şeyi sunucuya gönderin ve hangi düğmenin tıklandığını kontrol etmek için basit bir if / else yapın.

Ve sonra form gönderilmeden önce kontrol eder ve sadece ilgili verileri sunucuya (muhtemelen bir şey işlemek için gerekli kimliğe sahip sayfada ikinci bir form aracılığıyla) göndermek formun onsubmit olayına bağlama bir Javascript çağrısı uygulamak gizli bir girdi içerebilir veya sayfanın konumunu GET isteği olarak iletmeniz gereken verilerle yenileyebilir veya sunucuya Ajax yayını yapabilir veya ...).

Bu şekilde, Javascript'i olmayanlar formu iyi kullanabilirler, ancak Javascript'i olan kişiler yalnızca gereken tek veri parçasını gönderdikleri için sunucu yükü dengelenir. Kendinizi yalnızca birini ya da diğerini desteklemeye odaklanmak seçeneklerinizi gerçekten gereksiz yere sınırlar.

Alternatif olarak, bir şirket güvenlik duvarının veya başka bir şeyin arkasında çalışıyorsanız ve herkes Javascript'i devre dışı bıraktıysa, iki form yapmak ve silme düğmesinin ilk formun bir parçası gibi görünmesini sağlamak için biraz CSS büyüsü yapmak isteyebilirsiniz.

Bunun eski bir soru olduğunu biliyorum, ancak HTML5 birkaç yeni seçenek sunuyor.

Birincisi, formu biçimlendirmedeki araç çubuğundan ayırmak, silme eylemi için başka bir form eklemek ve formöznitelik kullanarak araç çubuğundaki düğmeleri ilgili formlarla ilişkilendirmektir.

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

Bu seçenek oldukça esnektir, ancak orijinal yazı aynı zamanda tek bir formla farklı eylemler gerçekleştirmenin gerekli olabileceğinden de bahsetmiştir. HTML5 yine kurtarmaya geliyor. formactionGönderme düğmelerinde özelliği kullanabilirsiniz , böylece aynı formdaki farklı düğmeler farklı URL'lere gönderebilir. Bu örnek, formun dışındaki araç çubuğuna yalnızca bir klonlama yöntemi ekler, ancak formda yuvalanmışla aynı şekilde çalışır.

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

http://www.whatwg.org/specs/web-apps/current-work/#attributes-for-form-submission

Bu yeni özelliklerin avantajı, tüm bunları JavaScript olmadan bildirimsel olarak yapmalarıdır. Dezavantajı, eski tarayıcılarda desteklenmemeleridir, bu nedenle eski tarayıcılar için bazı çoklu doldurma yapmanız gerekir.

formları sayfada yan yana alabilir, ancak iç içe olamazsınız. sonra tüm düğmeleri güzel sıralamak için CSS kullanın?

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>

HTML5'in "form sahibi" fikri vardır - girdi öğeleri için "form" özniteliği. Yuvalanmış formları taklit etmeyi sağlar ve sorunu çözer.

Eski bir konu, ama bu birisi için yararlı olabilir:

Yukarıda belirtildiği gibi - kukla formu kullanabilirsiniz. Bir süre önce bu sorunun üstesinden gelmek zorunda kaldım. İlk başta bu HTML kısıtlamasını tamamen unuttum ve iç içe formları ekledim. Sonuç ilginçti - ilk formumu yuvadan kaybettim. Daha sonra, gerçek iç içe formlardan önce kukla bir form (tarayıcıdan kaldırılacak) eklemek için bir tür "hile" olduğu ortaya çıktı.

Benim durumumda şöyle görünüyor:

<form id="Main">
  <form></form> <!--this is the dummy one-->
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  ......
</form>

Chrome, FireFox ve Safari ile iyi çalışır. IE 9'a kadar (10'dan emin değilim) ve Opera ana formdaki parametreleri algılamaz. $ _REQUEST global girdilerden bağımsız olarak boş. İç formlar her yerde iyi çalışıyor gibi görünüyor.

Burada açıklanan başka bir öneriyi test etmedim - iç içe formların etrafındaki alan kümesi.

EDIT : Çerçeve kümesi işe yaramadı! Basitçe diğerleri sonra Ana formu (artık iç içe formlar) ekledi ve düğme tıklamasıyla formdaki girişleri çoğaltmak için jQuery "klon" kullanılır. Düzeni değiştirmeden tutmak için klonlanmış girişlerin her birine .hide () eklendi ve şimdi bir cazibe gibi çalışıyor.

Bence Jason haklı. "Sil" işleminiz minimal bir işlemse, bunu tek başına bir formda yapın ve arayüzün olmasa bile birleştirilmiş bir form gibi görünmesini sağlamak için diğer düğmelerle hizalayın.

Ya da, elbette, arayüzünüzü yeniden tasarlayın ve insanların enormo formu görmelerini gerektirmeyen tamamen başka bir yerde silmelerine izin verin.

Javascript olmadan bunu yapmanın bir yolu, alınacak eylemi tanımlayan bir radyo düğmeleri kümesi eklemek olacaktır:

• Güncelleme
• Sil
• Her neyse

Daha sonra eylem komut dosyası, radyo düğmesi setinin değerine bağlı olarak farklı eylemler gerçekleştirir.

Başka bir yol, önerdiğiniz gibi sayfaya iki form koymak, iç içe değil. Düzeni kontrol etmek zor olabilir:

<form name = "editform" action = "the_action_url" method = "post">
   <input type = "gizli" ad = "görev" değer = "güncelleme" />
   <input type = "text" name = "foo" />
   <input type = "gönder" name = "save" value = "Kaydet" />
</ Form>

<form name = "delform" action = "the_action_url" method = "post">
   <input type = "gizli" ad = "görev" değer = "sil" />
   <input type = "hidden" name = "post_id" değer = "5" />
   <input type = "gönder" name = "delete" value = "Sil" />
</ Form>

Uygun şekilde dallamak için işlem komut dosyasındaki gizli "görev" alanını kullanma.

Bu tartışma hala ilgimi çekiyor. Orijinal yazının arkasında OP'nin paylaştığı "gereksinimler" vardır - yani geriye dönük uyumluluğa sahip bir form. Yazma esnasındaki çalışmaları bazen IE6'ya (ve gelecek yıllar için) destek olmak zorunda olduğundan, bunu kazıyorum.

Çerçeveyi zorlamadan (tüm kuruluşlar uyumluluk / sağlamlık konusunda kendilerini güvence altına almak isteyeceklerdir ve bu tartışmayı çerçeve için gerekçe olarak kullanmıyorum), bu sorunun Drupal çözümleri ilginçtir. Drupal da doğrudan ilgilidir, çünkü çerçeve "Javascript olmadan çalışmalıdır (sadece isterseniz)" yani OP'nin sorunu gibi uzun bir süre politikası olmuştur.

Drupal , triggering_element'i bulmak için oldukça kapsamlı form.inc işlevlerini kullanır (evet, koddaki ad). Form_builder için API sayfasında listelenen kodun altına bakın (ayrıntıları incelemek istiyorsanız, kaynak önerilir - drupal-x.xx / include / form.inc ). Oluşturucu otomatik HTML öznitelik oluşturmayı kullanır ve bu sayede, hangi düğmeye basıldığını algılayabilir ve buna göre hareket edebilir (bunlar ayrı işlemleri çalıştırmak için de ayarlanabilir).

Form oluşturucunun ötesinde, Drupal verileri 'silme' eylemlerini, büyük olasılıkla orijinal gönderide belirtilen nedenlerden dolayı ayrı URL'lere / formlara böler. Bu aramada çeşit / adımını listeleme ihtiyacı ( inilti başka bir form !, ama kullanıcı dostu) bir ön olarak. Ancak bunun "her şeyi gönder" sorununu ortadan kaldırma avantajı vardır. Verileri içeren büyük form amaçlanan amaç, veri oluşturma / güncelleme (hatta bir 'birleştirme' eylemi) için kullanılır.

Başka bir deyişle, sorunu çözmek için bir yol, formu ikiye ayırmaktır, daha sonra sorun ortadan kalkar (ve HTML yöntemleri bir POST aracılığıyla da düzeltilebilir).

iframeYuvalanmış form için bir kullanın . Alanları paylaşmaları gerekiyorsa, o zaman ... gerçekten iç içe değil.

Benim çözüm düğmeleri yazma ve daha sonra ana form dışında formları göndermek JS işlevleri çağırmak için

<head>
<script>
function removeMe(A, B){
        document.write('<form name="removeForm" method="POST" action="Delete.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.removeForm.submit();
}
function insertMe(A, B){
        document.write('<form name="insertForm" method="POST" action="Insert.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.insertForm.submit();
}
</script>
</head>

<body>
<form method="POST" action="main_form_purpose_page.php">

<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">

<input type="submit" name="submit" value="Submit">
</form>
</body>

Gerçekten birden fazla form kullanmak istemiyorsanız (Jason'ın önerdiği gibi), düğmeleri ve onclick işleyicilerini kullanın.

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

Ve sonra javascript (ben kolaylık için burada jQuery kullanın) (bazı onclick işleyicileri eklemek için oldukça overkill olmasına rağmen)

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

Ayrıca biliyorum, bu sayfanın yarısını javascript olmadan çalıştıracak.

Yar tarafından kendi cevabına yaptığı bir yorumda yayınlanan bir soruya yanıt olarak, bir iframe'i yeniden boyutlandıracak bazı JavaScript'ler sunuyorum. Bir form düğmesi durumunda, iframe'in aynı etki alanında olacağını varsaymak güvenlidir. Kullandığım kod bu. Kendi siteniz için matematiği / sabitleri değiştirmeniz gerekecektir:

function resizeIFrame(frame)
{
    try {
        innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
        if('style' in frame) {
            frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
            frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
        } else {
            frame.width = Math.ceil(innerDoc.body.scrollWidth);
            frame.height = Math.ceil(innerDoc.body.scrollHeight);
        }
    } catch(err) {
        window.status = err.message;
    }
}

Sonra şöyle deyin:

<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>

Sadece jquery ile yapmanın güzel bir yolunu buldum.

<form name="mainform">    
    <div id="placeholder">
    <div>
</form>

<form id="nested_form" style="position:absolute">
</form>

<script>
   $(document).ready(function(){
      pos = $('#placeholder').position();
      $('#nested_form')
         .css('left', pos.left.toFixed(0)+'px')
         .css('top', pos.top.toFixed(0)+'px');
   });
</script>

Bir form gönderirseniz, tarayıcı ayrıca bir giriş gönderme adı ve değeri de gönderir. Yani yapabileceğiniz şey

<form   
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"  
method="post">  

    <input type="text" name="foo" /> <!-- several of those here -->  
    <div id="toolbar">
        <input type="submit" name="action:save" value="Save" />
        <input type="submit" name="action:delete" value="Delete" />
        <input type="submit" name="action:cancel" value="Cancel" />
    </div>
</form>

yani sunucu tarafında genişlik dizesi "action:" ile başlayan parametreyi ararsınız ve geri kalan kısım hangi eylemin gerçekleştirileceğini söyler

Bu nedenle Tarayıcıyı kaydet düğmesini tıkladığınızda size foo = asd & action gibi bir şey gönderir: save = Kaydet

Kişinin ne yapmak istediğine bağlı olarak bir onay kutusu ekleyerek sorunu çözdüm. Daha sonra tüm formu göndermek için 1 düğmesini kullandım.

Alternatif olarak form actiob'u anında atayabilirsiniz ... en iyi çözüm olmayabilir, ancak sunucu tarafı mantığını rahatlatır ...

<form name="frm" method="post">  
    <input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />  
    <input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />  
</form>