使用输入表单中的数据生成并打印网页中的url

Question

我需要构建一个由用户从两个输入字段生成的URL，将最终URL写入同一文档中（而不是将URL加载到new.window中）。

我来自这个问题 。 而不是像jsfiddle中那样打开新窗口，我试图打印在表单下方生成的url，并且在单击“ Generate”之前没有url文本。 我已经尝试过使用serialize（），但不能与答案中使用的实际代码一起使用。

这是一个无效的示例： http : //jsfiddle.net/qo027nqd/

HTML

<input id="one"> <input id="two">
<button id="open">Generate</button>
<br /><br />
<b>URL generated prints here, this text is hidden until you click "Generate"</b>

JAVASCRIPT

$('#open').click(function() {
var fixedData1 = 'http://www.myurl.com/#q=',
    fixedData2 = '+',
    userEntry1 = $('#one').val(),
    userEntry2 = $('#two').val();

var newWindow = window.open(fixedData1 + userEntry1 + fixedData2 + userEntry2, '_blank');
newWindow.focus();
});

在此javascript代码中，我需要使用“ document.getElement ”，“ insertText ”之类的内容来更改“ var newWindow ”。

提前致谢！

Answer 1

简单的解决方案，您可以仅输入一个跨度。 您需要可以用JQuery打的东西，所以这就是为什么我添加了跨度。 这也可以是div或其他东西。

html ：

<input id="one"> <input id="two">
<button id="open">Open</button>
<br />
<span id="result"></span>

javascript ：

$('#open').click(function() {

        userEntry1 = $('#one').val(),
        userEntry2 = $('#two').val();
$('#result').text(userEntry1 + userEntry2);

});

需要在代码中添加jQuery。 这是一个工作示例： https : //jsfiddle.net/Laj8ogbp/

Answer 2

这是您更新的小提琴： http : //jsfiddle.net/b60bunyL/

HTML

<input id="one"> <input id="two">
<button id="open">Open</button>
<br />
<span id="result"></span>

JS

$('#open').click(function() {
    var fixedData1 = 'http://www.google.com/#q=',
        fixedData2 = '+',
        userEntry1 = $('#one').val(),
        userEntry2 = $('#two').val();

    var result = $('#result');
    result.text(fixedData1 + userEntry1 + fixedData2 + userEntry2);

});

Answer 3

在这里更新了小提琴以查看结果http://jsfiddle.net/qo027nqd/3/

HTML-

<input id="one"> <input id="two">
<button id="open">Open</button>
<br />
<p class = 'displayurl'>

</p>

JS-

$('#open').click(function() {
    var fixedData1 = 'http://www.google.com/#q=',
        fixedData2 = '+',
        userEntry1 = $('#one').val(),
        userEntry2 = $('#two').val();

    var newWindow = fixedData1 + userEntry1 + fixedData2 + userEntry2;

    $('.displayurl').append( "<p>"+ newWindow +"</p>" );
});

为了解决您的问题，我在HTML中的一个名为“ displayurl”的空位置中放置了<p>位置，在该位置我希望javascript输出变量。

然后我进入javascript并删除window.open以允许该变量将其他变量连接为一个，然后使用jQuery选择器选择“ .displayurl”我创建的空白位置，然后附加（通过.append() ）的新<p>标记，它将在开始和结束标记之间打印变量。

Answer 4

HTML

<input id="one"> <input id="two">
<button id="open">Open</button>
<br />
<span id="urlStr"></span>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jque‌​ry.min.js"></script>

Java脚本

$('#open').click(function() {
    var fixedData1 = 'http://www.google.com/#q=',
        fixedData2 = '+',
        userEntry1 = $('#one').val(),
        userEntry2 = $('#two').val();
    var urlStr = fixedData1 + userEntry1 + fixedData2 + userEntry2;
    $("#urlStr").html(urlStr);
});