How to run JS function on button click, using PHP form data?

Question

I have got a form on my WordPress homepage that takes one input.

<form method='post' action='<?php bloginfo('url'); ?>/test123/' >
    Name: <input type="text" name="name" required="required">
    <input type="submit">
</form>

When submitted it redirects and passes the input to the test123 page (the page has a custom php template). If I add Hello <?php echo $_POST["name"]; ?> then it works without issue.

However, I have a JavaScript function that should run after the submit button is clicked. The users input name needs to be used inside the function.

My first thought was to use onclick="test();" but I don't believe that will work for calling the function on a different page, and I still have the issue of passing the PHP data into the JS function.

I've tried using <script type="text/javascript> .... </script> in test123 page's php template file with no luck.

Edit:

<?php /* Template Name: test123 */ ?>

<?php get_header(); ?>

Your email is <?php echo $_POST["email"]; ?>

<script type="text/javascript>
    function testing() {
        console.log(<?php echo $_POST["email"]; ?>)
    }

    testing();
</script>

<?php get_footer(); ?>

Your question is a bit unclear because you say "after the submit button is clicked" and "I don't believe that will work for calling the function on a different page". Are you asking how to run the function after the submit button has been clicked but before the form submits or are you asking how to run the function *on the next page* when that page loads? — Quentin, Feb 28 '17 at 14:01
Sorry if it was unclear. I'm asking how I run the function on the next page when it loads. — Lau, Feb 28 '17 at 14:09
@Quentin Please check the edit for the entire PHP code. On submitting the form, the above code correctly produces a `Your email is example@example.com`, but doesn't console log anything (doesn't produce any errors either). — Lau, Feb 28 '17 at 15:26
Duplicate: http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript — Quentin, Feb 28 '17 at 15:28
`console.log(example@example.com);` should give you [SyntaxError: Invalid or unexpected token](http://jsbin.com/yiwibod/1/edit?js,console) — Quentin, Feb 28 '17 at 15:28
You're right, now it's giving me an error `Uncaught ReferenceError: X is not defined` (X being the user input) — Lau, Feb 28 '17 at 15:32
— Because it is a variable, not a string literal. Still a duplicate: http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript — Quentin, Feb 28 '17 at 15:32

score -1 · Answer 1 · answered Feb 28 '17 at 13:59

-1

If you using jQuery in Wordpress

$('form').submit(function(e){
 var name = $(this).find('input[name=name]').val();
 // do smth with name
 return true;
});

answered Feb 28 '17 at 13:59

Firanolfind

1,559
2
17
36

Lol, why dislike? – Firanolfind Feb 28 '17 at 14:03
I didn't like / dislike (I have less than 15 rep, so I can't apparently). So I could include that jQuery in a script tag in my WordPress page or in the PHP template file? – Lau Feb 28 '17 at 14:18
This will run the function on the current page before the form submits. The OP is asking how to run the function on the next page. – Quentin Feb 28 '17 at 14:51
jQuery by default already included in Wordpress themes. If you did not turn it off it might work. If `$` is not working, try to replace all `$` to `jQuery`, like `jQuery('form'). ...` – Firanolfind Mar 01 '17 at 17:56

How to run JS function on button click, using PHP form data?

1 Answers1