JS; prevent onClick function from happening until page reloads

Question

So I have a wordpress site I'm building that allows a user to fill out a form, and if successfully submitted, it will create a post.

When the user hits submit on the form I have some js that prompts them to send out a tweet with dynamically prepopulated content. The problem is that I want the the tweet to be prepopulated with the content of one of the fields they just filled out and submitted. But, because this happens immediately the tweet ends up prepopulating with the content from the last time the form was filled out.

So, I'm thinking if that onClick function can not fire until the page reloads with the new content added and published, that should work, but I'm not sure how to do that.

Here's the markup for the form submit input:

<input onclick="tweetIt()" class="exclude btn-main stack" name="user-submitted-post" id="user-submitted-post" type="submit" value="<?php _e('Submit', 'usp'); ?>">

Here's how it is displayed once the form has successfully been submitted:

<p id="dream"><?php echo substr(the_title('', '', FALSE), 0, 140); ?></p> // the title is populated with one of the fields from the form

and here's the js:

function tweetIt () {
  var phrase = document.getElementById('dream').innerText;
  var tweetUrl = 'https://twitter.com/share?text=' +
    encodeURIComponent(phrase) +
    '.' +
    '&url=' +
    'http://xxx';

  window.open(tweetUrl);
}

Hoping I've been able to articulate in a way that makes sense. Any help is, as always, greatly appreciated!

In your tweetIt function, set the phrase variable to be equal to the value of the form field the user just finished typing in. — James, Jun 02 '16 at 19:45
Thanks, James. That was the first thing I tried, but the tweet just comes out blank in that scenario. — Eric Brockman, Jun 02 '16 at 19:49
So if I take the `id="dream"` away from the `p` element and add it to the input field like so: ` class="sup-input">` then nothing shows up in the tweet prompt when the user hits submit. — Eric Brockman, Jun 02 '16 at 21:10

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

You can check if the current request is a post and then call tweet.

<?php 
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
?>
(function(){
  var phrase = "<?php echo substr(the_title('', '', FALSE), 0, 140); ?>";
  var tweetUrl = 'https://twitter.com/share?text=' +
    encodeURIComponent(phrase) +
    '.' +
    '&url=' +
    'http://xxx';    
  window.open(tweetUrl);
})()
<?}?>

edited May 23 '17 at 11:58

Community

1
1

answered Jun 02 '16 at 19:57

Thanks Austin, can you recommend where I should add this code? – Eric Brockman Jun 02 '16 at 21:17

JS; prevent onClick function from happening until page reloads

1 Answers1