вложенная HTML-форма недоступна - проблема с несколькими формами - PullRequest
Новая
       11

вложенная HTML-форма недоступна - проблема с несколькими формами

0 голосов
/ 29 января 2010

Вот сценарий, у меня есть 3 HTML-формы на странице, и они выглядят как

form1 () form2 (form3 ())

фиктивная программа для проверки 3 форм __ 

<script language="javascript" type="text/javascript">
function submitthisform(no){
    document.forms[no].submit;
}
</script>

<form action="http://cnn.com" name="1">
 <input type=submit value="cnn" onclick="submitthisform('1')" name='submit1'>
</form>

<form  action="http://google.com" name="2">

    <form  action="http://yahoo.com" name="3">
    <input type=submit value="yahoo" onclick="submitthisform('3')" name="submit3">
    </form>

<input type=submit value="google"  onclick="submitthisform('2')" name="submit2">
</form>

теперь, когда я делаю submit3, вызывается функция onclick, где я пытаюсь отправить form3, потому что в противном случае она всегда отправляет форму 2

в onclick, отправляю имя формы. Но форма 3 кажется недоступной. Причина в том, что если я пересекаю все формы на странице, он не возвращает форму 3, а только формы 1 и 2 

var forms = document.getElementsByTagName("form");
for (var i=0; i<forms.length; i++){
        alert('form'+i+' = '+forms[i].name);// displays name of form1&2 
}

он также дает ошибку JavaScript при клике submit2.

попробуйте этот небольшой код, и вы поймете идею. скажите мне, могу ли я отправить форму 3 !!!!

Ответы [ 2 ]

3 голосов
/ 29 января 2010

Согласно XHTML-спецификациям

форма не должна содержать других форма элементов.

Поэтому, пожалуйста, не делайте этого, так как вы не можете гарантировать совместимость между браузерами ( в настоящее или в будущем )

0 голосов
/ 12 апреля 2018

Мое решение: деактивировать родительскую форму, переместив всех детей в новый div. Фактически я изменяю тип элемента формы на div.

Вот мой фрагмент кода tyken из метода Vue.js: 

let target = document.createElement('div');
let source = document.getElementById(this.parentFormId); // change this!
source.parentNode.insertBefore(target,source);
source.childNodes.forEach(node => {
    node.parentNode.removeChild(node);
    target.appendChild(node);});
source.parentNode.removeChild(source);
target.id = this.parentFormId;

Вложенная разметка формы вставляется динамически через вычисляемое свойство, чтобы избежать конфликтов. При необходимости, если внешняя форма должна быть восстановлена, атрибуты формы также можно скопировать. Для моей цели это не обязательно.

Может быть, взломать, но это хорошо работает!

...