How to output a link in an input field via a prompt?

I am struggling with this and can't get it to work. I am using jQuery to click on a link that will open me a prompt. In this prompt, I want the user to add a URL to link it to some other websites. That works fine, but I can't get the value of the prompt to be shown properly in the input field.

The error I am getting after adding my text in the prompt is the fact that it outputs it like [Object object].

I do know how to do this in plain JS, but not in jQuery and I need jQuery.

This is my code:

    $(".html-button").on("click", function () {
    var urls = prompt("Add a link", "http://");
    var setText = $("#post-text").val().append('<a href="'+ urls + '"</a>'); 
// Adding prompt text into my input field
    $("#post-text").val(setText);
                            });

I thought I could do this by using append instead of innerHTML, which I would use in plain JS... Can someone help please?

PS: preferably I would not want to output the anchor already in my input field, but only after submitting the post, but this is a nice to have.

Edit: Fiddle link

Solution

You seem to have mixed up some variables here. You are assigning the value of the prompt response to var urls, but then expecting it to be in an undefined var person (guessing you've used the example for this from the W3 Schools Tutorial (https://www.w3schools.com/jsref/met_win_prompt.asp)).

Assuming that your input element has an id of post-text - then you would do this:

$("#post-text").val(urls);

I am working on the assumption here that you're writing the URL into an input field, as you suggest. If you want those a tags in the input field as well then it would be:

 $("#post-text").val('<a href="' + urls + '"</a>');

If your intention is to output it as a link somewhere including the HTML 'a' tags so it can be clicked, then you'd need to append it to an appropriate element (not a input field) in the right place in the DOM/on the page.

Lastly, if you want to write the value into the field after the form as been submitted (for whatever reason) you could either store it in a variable and write it on submit, or perhaps in a hidden field. I am unsure why you would want to do this though.

Hope this helps.