How can I add text to end of a url with javascript? [duplicate]

Question

I am trying to create a button that will take the text in the paragraph above it and add it to the end of a url so that it can send the text to buffer. I am using javascript to populate a paragraph. Here is the code I am using:

<script>
function facebook10Post() {
    var x,address,city,state,zip,beds,baths,sqft,gla,listDate,listPrice,listUrl,team,word1,word2,word3,word4,feature1,feature2,feature3,feature4;
    x = document.getElementById("propertyInfo");
    address = x.elements["address"].value;
    city = x.elements["city"].value;
    state = x.elements["state"].value;
    zip = x.elements["zip"].value;
    beds = x.elements["beds"].value;
    baths = x.elements["baths"].value;
    sqft = x.elements["sqft"].value;
    gla = x.elements["gla"].value;
    listDate = x.elements["listDate"].value;
    listPrice = x.elements["listPrice"].value;
    listUrl = x.elements["listUrl"].value;
    team = x.elements["team"].value;
    word1 = x.elements["word1"].value;
    word2 = x.elements["word2"].value;
    word3 = x.elements["word3"].value;
    word4 = x.elements["word4"].value;
    feature1 = x.elements["feature1"].value;
    feature2 = x.elements["feature2"].value;
    feature3 = x.elements["feature3"].value;
    feature4 = x.elements["feature4"].value;
    link1 = document.getElementById("facebook10Post1").value;
    document.getElementById("facebook10Post1").innerHTML = "NEW LISTING!<br>" + "Check out  " + team + " " + word1 + " new listing at  " + address + "! This " + word2 + " home features " + beds + " beds, " + baths + " baths and " + sqft + " sq ft!<br>" + "For more details & pictures, visit " + listUrl;

<h3>General Property Information</h3>
Address: <input type="text" name="address"><br>
City: <input type="text" name="city"><br>
State: <input type="text" name="state"><br>
Zipcode: <input type="text" name="zip">

<h3>Rooms, Size, Etc.</h3>
Number of Bedrooms: <input type="Number" name="beds"><br>
Number of Bathrooms: <input type="Number" name="baths"><br>
Total Sq Ft: <input type="Number" name="sqft"><br>
GLA: <input type="Number" name="gla">

<h3>Listing Information</h3>
Listing Date: <input type="Date" name="listDate"><br>
Listing Price: <input type="Number" name="listPrice"><br>
Listing URL: <input type="url" name="listUrl"><br>
Team(our) or Solo(my)? <input type="text" name="team"><br>

<h3>Features</h3>
Feature #1: <input type="text" name="feature1"><br>
Feature #2: <input type="text" name="feature2"><br>
Feature #3: <input type="text" name="feature3"><br>
Feature #4: <input type="text" name="feature4"><br>

<h3>Descriptive Words</h3>
Descriptive Word #1: <input type="text" name="word1"><br>
Descriptive Word #2: <input type="text" name="word2"><br>
Descriptive Word #3: <input type="text" name="word3"><br>
Descriptive Word #4: <input type="text" name="word4"><br>

<input type="button" value="Create Posts" onclick="facebook10Post()">

<p id="facebook10Post1"></p>
<button>This is where the button should go</button>

I know that the URL I am sending it to needs to be "https://buffer.com/add?text=" but I need to somehow add the paragraph that populates into "facebook10Post1" onto the end of that url.

An example of what could appear in that "facebook10Post1" paragraph would be:

NEW LISTING! Check out my modern new listing at 1234 Main Street! This updated home features 5 beds, 4 baths and 2500 sq ft! For more details & pictures, visit http://www.myrealestatesite.com/main-street

Any ideas?

You want to add all the selected values like city = a & state = b in the url or the formed text? — Abhinav Jain
– Abhinav Jain, Commented Oct 13, 2017 at 3:36
@AbhinavJain Ideally, I would like to add the formatted text. But could just add the values if thats the only way to do it — Jeff Prewitt
– Jeff Prewitt, Commented Oct 13, 2017 at 18:39

MJL · Accepted Answer · 2017-10-13 03:53:53Z

0

Here is a helpful utility function to add query string parameters to urls.

/**
 * Adds a query string parameter in the provided url.
 * Update parameter if it already exists.
 * Does nothing if value is null or undefined.
 *
 * @param {string} url to modify.
 * @param {string} key of query parameter.
 * @param {string} value of query parameter.
 *
 * @returns {string} modified url.
 */
function addQueryStringParameter(url, key, value) {
    if (value === null || value === undefined) {
        return url;
    }

    value = encodeURIComponent(value);

    var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i'),
        separator = url.indexOf('?') !== -1 ? '&' : '?';
    if (url.match(re)) {
        return url.replace(re, '$1' + key + '=' + value + '$2');
    } else {
        return url + separator + key + '=' + value;
    }
};

Here's how you would use it.

Get the value of the paragraph

var paragraphValue = document.getElementById("facebook10Post1").innerHTML;

Build the url

var url = 'https://buffer.com/add';
url = addQueryStringParameter(url, 'text', paragraphValue);

This question has some good examples of more robust functions to add query string parameters: How can I add or update a query string parameter? Thanks to @Alexei Levenkov for posting this link.

edited Oct 13, 2017 at 3:53

answered Oct 13, 2017 at 3:42

MJL

1612 silver badges8 bronze badges

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

5 Comments

Jeff Prewitt Over a year ago

Do I get the paragraph value, and build the url in a different function? Or put those in my first function? Or what? (Sorry I am pretty new to this)

MJL Over a year ago

You would build the url in your facebook10Post() function. So when the button is clicked the url will be built.

Jeff Prewitt Over a year ago

ok thanks for the help

Jeff Prewitt Over a year ago

Also, is it possible to have the form on one page with the “Create Posts” button, but have the paragraphs open in a new page? For example: the form is on domain.com/post-tool and the paragraphs would open on domain.com/post-tool/facebook-posts. Currently the button for the form runs the facebook10Post() function. Can the button run that function and open the new page at the same time?

MJL Over a year ago

I think that's a new question. Have a search on StackOverflow, I'm sure there's an answer that can help you out. If my answer helped you with your other problem, I'd appreciate if you'd mark it as the accepted answer. Thanks.

Collectives™ on Stack Overflow

How can I add text to end of a url with javascript? [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related