从提交表单中显示div内的页面

-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>

来源

2016-01-29 cheeseandknees

调用'加载之前你离开提交处理（）'。 'return'语句应该是功能块中的最后一个东西。你也有一个奇怪的混合JS和jQuery。我会建议使用一个或另一个。 –

并提交表单重新加载页面，你需要防止这种行为 –

你可以使用AJAX调用，而不是提交按钮 – Lakshya

我已经改变了三件事情，并得到了代码工作： 1.将div更改为iFrame 2.为表单添加“action”属性并将其设置为“＃”，以便程序在单击表单时不会退出网页。 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>

来源

2016-01-29 18:28:17 DougieHauser

非常感谢你！ – cheeseandknees

回答

相关问题