Generate and print url in webpage with data from input form

Question

I need to build an URL generated from two input fields by the user, writing the final url in the same document (instead of loading the url in a new.window).

I'm coming from this question . Instead of open a new window like in the jsfiddle, I'm trying to print the url generated below the form, with no url text before to click on "Generate". I've tried with serialize(), but doesn't work with the actual code used in the answer.

Here's a non-working example: 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();
});

In this javascript code, I need to change " var newWindow " with something like " document.getElement ", " insertText " or something useful.

Thanks in advance!

Answer 1

Easy solution, you can just text a span. You need something that you can hit with JQuery, so thats why i added the span. This can also be a div or something.

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

});

It's needed to add jQuery in the code. Here a working example: https://jsfiddle.net/Laj8ogbp/

Answer 2

Here is your updated fiddle : 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

Updated your fiddle here to see results 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>" );
});

To resolve your issue I made a empty <p> location within the HTML called 'displayurl' where i wanted the javascript to output the variable.

Then I went into the javascript and removed the window.open to allow the variable to concatenate the other variables into one, then i used the jQuery selector to select '.displayurl' the location that I created that was blank, and I appended (via .append() ) a new <p> tag with that will print the variable between the opening and closing tag.

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>

Javascript

$('#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);
});