在div中显示提交表单

时间:2016-01-29 15:57:50

标签: javascript jquery html

我正在尝试使用简单的输入表单创建一个页面,使用它来创建所需的URL并一次性在div中显示结果页面。当我通过单击提交工作直接将用户直接发送到创建的URL时,但我似乎无法使用以下代码执行任何操作:

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

1 个答案:

答案 0 :(得分:0)

我已经改变了三件事并让代码工作:  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>