2013-04-30 4 views
4

У меня есть 2 файла HTML, подобные этому.Отправить форму в родительском окне из всплывающего окна?

parent.html

<form method='get' action=''> 
    <input type='hidden' name='something'> 
    <input type='button' name='submit' value='Submit' onclick='newwindow=window.open("child.html","popup","height=150,width=200");'> 
</form> 

child.html

Enter Something Here<br /> 
<input type='text' name='somethingelse'> 
<input type='button' name='submit' value='OK'> 

Когда пользователь нажимает на Отправить кнопку в родительская, новое всплывающее окно появится и попросите его что-то ввести.

Может кто-нибудь пожалуйста, скажите мне, как я могу передать значение входа [somethingelse] от ребенка на вход [то] и отправить форму в родителя после того, как пользователь нажал OK?

ответ

10

Вы можете получить ссылку на форму в родительском окне с помощью window.opener.document, например:

var form = window.opener.document.getElementById("theFormID"); 

(. Вы дали бы форме идентификатор, хотя есть и другие способы сделать это)

Тогда вы можете получить доступ к полям в этой форме и, конечно же, установить их имущество .value, и вы можете отправить форму через ее функцию .submit().

Но справедливое предупреждение: пользователям не нравятся всплывающие окна. Если есть какой-либо способ, вы можете просто включить другое поле в форму, я бы рекомендовал это вместо этого.

Полный список примеров: Live Copy | Source | Source of popup

Главная страница:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <form id="theForm" action="" method="GET"> 
    <input type="text" id="theField" name="theField"> 
    <br><input type="submit" value="Send" onclick="window.open('/urawum/1','','height=400,width=400'); return false;"> 
    </form> 
</body> 
</html> 

Всплывающее:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <p>Please fill in more information:</p> 
    <input type="text" id="thePopupField"> 
    <br><input type="button" value="Send Form" onclick="doTheSubmit();"> 
    <script> 
    function doTheSubmit() { 
     var doc = window.opener.document, 
      theForm = doc.getElementById("theForm"), 
      theField = doc.getElementById("theField"); 
     theField.value = document.getElementById("thePopupField").value; 
     window.close(); 
     theForm.submit(); 
    } 
    </script> 
</body> 
</html> 

Если вы бежите, что вы обнаружите, что при нажатии кнопки Send на главной странице, это делает всплывающее окно. Если вы заполните значение во всплывающем окне и нажмите Send Form, всплывающее окно исчезнет, ​​и форма будет отправлена. Вы можете сообщить, что форма отправлена ​​со значением, потому что я использовал method="GET" и поэтому вы можете увидеть theField=yourValue в строке запроса в URL-адресе результирующей страницы. Например, если вы введете «мое значение» в всплывающее окно, вы увидите URL-адрес http://jsbin.com/abiviq/1?theField=my+value на главной странице после отправки формы. (Но ваша форма предположительно использует POST, а не GET, я только с помощью GET продемонстрировать.)

+0

Это отличный ответ! Большое спасибо за ваше объяснение. Я пробовал, и он работает именно так, как я хотел. – Teiv

+1

@ user433531: Хорошо, рад, что помог! –

+0

@ Lukasz Koziara: Спасибо, но если бы я хотел отступить так, я бы это сделал. Best, –

0
 $('#popupformid').submit(function() { 

       var myVar = $('#somethingelseid').val(); 
       $('input:text.something').val(myVar); 
       document.getElementById("formID").submit(); 
     }); 
+5

OP ничего не сказал о jQuery.Пожалуйста, не отправляйте ответы jQuery только на вопросы, не связанные с jQuery. –