JS variable into PHP - FomrIT | MODX Community Forums

388 Posts

ysanmiguel Reply #1, 9 years, 7 months ago

Hello.

How can I pass a java script variable into PHP?

What I need is send the JS variable result

var completeOrder = finalplanString;

Via email using FormIT.

Any help please?
[ed. note: Ysanmiguel last edited this post 9 years, 7 months ago.]

--
ysanmiguel.com

24,544 Posts

BobRay Reply #2, 9 years, 7 months ago

Since the JS is running on the client (that is, in the browser), PHP has no direct access to it. The best way to get it across is to use JS to put it into the value of a hidden form input on the FormIt page (assuming that the JS runs before the form is processed). Then PHP can get the value from the $_POST array as $_POST['fieldName'] (where 'fieldName' is the name of the hidden input field).

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

388 Posts

ysanmiguel Reply #3, 9 years, 7 months ago

Well, I'm sending now the details that I need inside a hidden input as you said:

Js:

function submitCheckout(){
    var finalplanString = "";
    var elements = JSON.parse(localStorage.local_items);
    for(var plan in elements){
    finalplanString += "<div class=\"wrap\">";
    finalplanString += "price: $" + elements[plan].price + "<br>"; 
    finalplanString += "date: " + elements[plan].date + "<br>"; 
    finalplanString += "</div>";
    }
    document.getElementById('hiddenInput').value = finalplanString;
    $('#checkoutForm').submit();
};

Form:

<form action="[[~[[*id]]]]" method="post" name="checkoutForm" id="checkoutForm">
<input type="hidden" name="hiddenInput" id="hiddenInput" />
bla...bla...bla...(more fields)
<button class="button" type="submit" value="Submit" onclick="submitCheckout()" >
</form>

It's working but the problem now is that everything inside [[+hiddenInput]] is losing all the html labels and is arriving as plane text.

The tpl is a normal tpl:

<h3>Web email</h3>
<p>
Details: [[+hiddenInput]] 
</p>
<p>
Name: [[+firstname]] <br>
Email: [[+email]] <br>
etc...

What I'm doing wrong?

Thank you very much. [ed. note: Ysanmiguel last edited this post 9 years, 7 months ago.]

--
ysanmiguel.com

24,544 Posts

BobRay Reply #4, 9 years, 7 months ago

You're putting the html in finalPlanString, but using finalString (not the same variable) to set the field.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

388 Posts

ysanmiguel Reply #5, 9 years, 7 months ago

Quote from: BobRay at Feb 28, 2017, 09:19 AM

You're putting the html in finalPlanString, but using finalString (not the same variable) to set the field.

Yes, sorry my fault. example code fixed.

Now, can you Bob or anyone else help me please?
Thank you! [ed. note: Ysanmiguel last edited this post 9 years, 7 months ago.]

--
ysanmiguel.com

24,544 Posts

BobRay Reply #6, 9 years, 7 months ago

So the hidden input value is appearing in the email, but without the HTML?

How about putting the HTML in the email Tpl chunk? That's where it really belongs from a design standpoint, to separate the data from the presentation.

I think maybe the MODX allow_tags_in_post is set to No and that's causing MODX to strip the HTML. Unfortunately, setting that Setting to Yes creates a serious security vulnerability.

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

388 Posts

ysanmiguel Reply #7, 9 years, 7 months ago

Well, I activate allow_tags_in_post for a test but still removing the html from the finalplanString variable.

Quote from: BobRay at Feb 28, 2017, 12:34 PM

How about putting the HTML in the email Tpl chunk? That's where it really belongs from a design standpoint, to separate the data from the presentation.

- There is a way to put the content from finalplanString variable, directly into the tpl?

This is my tpl, and the field with the js content is [[+hiddenInput]].

<h3>Web email</h3>
<p>
Details: [[+hiddenInput]] 
</p>
<p>
Name: [[+firstname]] <br>
Email: [[+email]] <br>
etc...

The result is something like this:

----------------------------

Web email

Details: price: $50date: Thursday, 16 March, 2017

Name: blablabla
Email: [email protected]

-----------------------------

If I have more than one product looks like this:

Details: price: $50date: Thursday, 16 March, 2017price: $50date: Thursday, 16 March, 2017price: $50date: Thursday, 16 March, 2017

absolutely mess.

- If I create an alert with the variable
alert("finalplanString");
the result is right:

<div class="wrap">price: $50<br>date: Thursday, 16 March, 2017<br></div>

so, what do you think?
thank you!

--
ysanmiguel.com

24,544 Posts

BobRay Reply #8, 9 years, 7 months ago

Maybe I'm misunderstanding you, but I think this is what you want in the Tpl chunk:

<h3>Web email</h3>
<p>
Details: [[+hiddenInput]] 
</p>
<p>
Name: [[+firstname]] <br>
Email: [[+email]] <br>
etc...

<div class="wrap">price: [[+price]]<br>date: [[+date]]<br></div>

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

388 Posts

ysanmiguel Reply #9, 9 years, 6 months ago

Quote from: BobRay at Mar 01, 2017, 02:42 PM

Maybe I'm misunderstanding you, but I think this is what you want in the Tpl chunk:
<h3>Web email</h3>
<p>
Details: [[+hiddenInput]] 
</p>
<p>
Name: [[+firstname]] 

Email: [[+email]] 

etc...

</p><div class="wrap">price: [[+price]]
date: [[+date]]
</div>

But can I use [[+price]] and [[+date]] placeholders if they are coming from the JS?:

finalplanString += "price: $" + elements[plan].price + "<br>"; 
finalplanString += "date: " + elements[plan].date + "<br>";

added into the <input id="hiddenInput" as one string:

document.getElementById('hiddenInput').value = finalplanString;

and <input id="hiddenInput" called in the tpl:

Details: [[+hiddenInput]]

--
ysanmiguel.com

701 Posts

bennyb Reply #10, 9 years, 6 months ago

Quote from: Ysanmiguel at Mar 02, 2017, 05:10 AM

But can I use [[+price]] and [[+date]] placeholders if they are coming from the JS?:

You'll need to have a hidden input for both price and date. Then set their values with JS. These will then be available as placeholders in the emailTpl.