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!

Blablalux · Accepted Answer · 2016-12-15 11:33:35Z

1

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

});

answered Dec 15, 2016 at 11:33

Blablalux

5051 gold badge5 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rafamerino Over a year ago

Thank you! Works perfectly in jsfiddle, but I can't get working on local test. You've done enough, but some extra tip? i.imgur.com/QAduuCy.png

Blablalux Over a year ago

You have to include the jQuery library, e.g. : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Geenzo · Accepted Answer · 2016-12-15 11:40:26Z

1

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.

answered Dec 15, 2016 at 11:40

Geenzo

861 silver badge5 bronze badges

2 Comments

rafamerino Over a year ago

Thank you! But this example creates a new line every time you hit "Open", and script will be used several times by user.

Geenzo Over a year ago

@rafamerino ah yea, change the second last line to $('.displayurl').text(newWindow); to resolve this .append() method will keep adding to the 'displayurl' class

rafamerino · Accepted Answer · 2016-12-15 13:04:03Z

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/

edited Dec 15, 2016 at 13:04

rafamerino

371 silver badge6 bronze badges

answered Dec 15, 2016 at 11:26

Ravenix

1,0304 gold badges16 silver badges42 bronze badges

4 Comments

rafamerino Over a year ago

I can't make it works with all the elements jsfiddle.net/4q6yumrv

Ravenix Over a year ago

That's because you need jquery, that's missing. On the left side, if you add this url to the external refference it works: ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

rafamerino Over a year ago

Thank you, but neither works with the external resource :( jsfiddle.net/6e4zm6tk/1

Ravenix Over a year ago

If you add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> at the end of the html, it'll work.

Ogunnaike Damilare · Accepted Answer · 2016-12-16 13:19:16Z

0

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

edited Dec 16, 2016 at 13:19

answered Dec 15, 2016 at 11:29

Ogunnaike Damilare

314 bronze badges

1 Comment

Ogunnaike Damilare Over a year ago

jQuery library is required!!

Collectives™ on Stack Overflow

Generate and print url in webpage with data from input form

4 Answers 4

2 Comments

2 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related