2016-01-29 7 views
-1

Я пытаюсь создать страницу с простой формой ввода, использовать ее для создания требуемого URL и отображения итоговой страницы в div за один раз. Когда я послал пользователь непосредственно к создаваемому URL от щелкать представить, что работали отлично, но я не могу заставить его сделать что-либо с помощью следующего кода:Показать страницу внутри div от формы отправки

<head> 
    <script src="jquery-1.12.0.min.js"></script> 
</head> 

<form id="theForm"> 
    <input id='subj'/> 
    <input type='submit'/> 
</form> 

<script> 
    var theForm = document.getElementById('theForm'); 
    var theInput = document.getElementById('subj'); 
    var show; 

    theForm.onsubmit = function(e){ 
     show = "www.someurl.com/" + encodeURIComponent(theInput.value); 
     return show; 
     $('#display').load(show); 
    } 
</script> 

<div id="display"></div> 
+2

Вы выходом из обработчика представить перед вызовом 'нагрузки () '. Оператор 'return' должен быть последним в функциональном блоке. Также у вас есть странное сочетание JS и jQuery. Я бы предложил использовать тот или иной. –

+0

И, отправив форму перезагрузить страницу, вам необходимо предотвратить это поведение. –

+0

вы можете использовать вызов AJAX вместо кнопки отправки – Lakshya

ответ

0

Я изменил три вещи, и получили код для работы: 1. Изменен div на iFrame 2. Добавлен атрибут «действие» в форму и установите его в «#», чтобы программа не выходила из веб-страницы при нажатии на форму. 3. Убрана команда «encodeURIComponent» из кода, потому что он не работал с ним ..

Это мой пример:

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
<form id="theForm" action="#"> 
    <input id='subj'/> 
    <input type='submit'/> 
</form> 

<iframe id="display"></iframe> 

<script> 
    var theForm = document.getElementById('theForm'); 
    var theInput = document.getElementById('subj'); 
    var show; 

    theForm.onsubmit = function(e){ 
     var show = "http://someUrl.com/" + (theInput.value); 
     console.log(show); 
     document.getElementById("display").src= show; 
    } 
</script> 


</body> 
</html> 
+0

Большое вам спасибо! – cheeseandknees

Смежные вопросы