1

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?

Jeff Prewitt
  • 13
  • 4

1 Answers1

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.

MJL
  • 151
  • 2
  • 7
  • 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) – Jeff Prewitt Oct 13 '17 at 12:35
  • You would build the url in your facebook10Post() function. So when the button is clicked the url will be built. – MJL Oct 14 '17 at 06:45
  • ok thanks for the help – Jeff Prewitt Oct 14 '17 at 23:26
  • 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? – Jeff Prewitt Oct 14 '17 at 23:30
  • 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. – MJL Oct 15 '17 at 04:53