How to get a value from Javascript variable and use it on page (post)?

Question

I'm using a third party service that allows you to enter custom html to collect information using a form. There is a the form page, where the user enters information, and the post form page. I asked the service if there is any way that I could spit out information collected from the form page and post it onto the post form page. For example, if the user entered first name John and last name Smith, I want the post form page to say:

Thanks for submitting the form, John Smith.

The service said that it's possible because on the post form page there is a javascript var called fields.

I looked at the javascript they were talked about and found this:

<script>
var fields = {"age":"on","city":"San Diego","email":"[email protected]","firstname":"John","lastname":"Smith","officialrules":"on","state":"CA"}; 

.....

Does anyone know how I can post this information so that it would spit:

<p>Thanks for Thanks for submitting the form, [firstname] [lastname].</p>

Resulting in:

Thanks for submitting the form, John Smith.

I'm not sure I understand how you do retrieve this 'post form page'. Could you give us a link to these providers, so we can see the best way to grab the informations you need? — kuroi neko
– kuroi neko, Commented Jan 9, 2014 at 23:42
You are going to need to study up. Giving code to a non-programmer is like giving a gun to someone without any safety training. — Steve Wellens
– Steve Wellens, Commented Jan 9, 2014 at 23:51
I believe that the variable "fields" is set with the values for him with the correct values in them from the post. my answer should work in <that case. @Ori if I'm incorrect and the fields variable is not populated for you then you will need to learn how to put the POST variables into your servers response(the form response page) in a hidden field or something else you can access. Let us know :) — user1567453
– user1567453, Commented Jan 10, 2014 at 3:24

Filip Górny · Accepted Answer · 2014-01-09 23:39:00Z

2

Find your element, firstly adding id to id:

<p id="info"></p>

In javascript:

var p = document.getElementById('info');

Add string:

p.innerHTML = 'Thanks for Thanks for submitting the form, ' + fields.firstname + ' ' + fields.lastname + '.';

answered Jan 9, 2014 at 23:39

Filip Górny

1,76916 silver badges25 bronze badges

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

Comments

Neil Cresswell · Accepted Answer · 2014-01-09 23:45:15Z

0

Something like the following will hopefully suffice to answer your question. However, you should of course also take the extra step of cleaning any data input on the form from a security perspective before trying to render it on the page.

<p id="greeting"></p>

<script type="text/javascript">
    var fields = {"age":"on","city":"San Diego","email":"[email protected]","firstname":"John","lastname":"Smith","officialrules":"on","state":"CA"};
    document.getElementById('greeting').innerHTML =
        'Thanks for submitting the form, ' +
        fields['firstname'] + ' ' + fields['lastname'] + '.';
</script>

answered Jan 9, 2014 at 23:45

Neil Cresswell

1,1658 silver badges20 bronze badges

Comments

user1567453 · Accepted Answer · 2014-01-10 00:59:01Z

First you will need to give your <p> element and "id" so that you can access it in javascript code. Here is some doco on accessing html elements like <p> in java script. The element declaration would generally look like:

<p id="myId"></p>

Next you will have to access the javascript variable and use it in the string you want to store which would look something like this:

<script>
    var fields = {"age":"on","city":"San Diego","email":"[email protected]","firstname":"John","lastname":"Smith","officialrules":"on","state":"CA"};
    var myStr = "Thanks for submitting the form " + fields.firstname + " " + fields.lastname;
    document.getElementById("myId").innerHTML = myStr; 
</script>

Here is some doco for inserting text into the html element that you want it to go into.

This is a link to how to access json variables in javascript to do what you're attemping to do.

Here is a jsfiddle of it working

Derek 朕會功夫 · Accepted Answer · 2014-01-09 23:48:38Z

-1

If you are not familiar with JavaScript and not planning to go deeper, then probably you should use jQuery to simply your work.

<p>Thanks for submitting the form,</p>

$("p").append(" " + fields.firstname + " " + fields.lastname + ".");

Demonstration: http://jsfiddle.net/DerekL/TZAhS/

This one line of code is all you need. ;) Don't even bother with those complicated "document.getElementById"... pfff just do $("#yourID") in jQuery for the same effect!

This is the most least code you need. Of course you should be giving your p an identifier (id) so that it knows which one you are talking about.

edited Jan 9, 2014 at 23:48

answered Jan 9, 2014 at 23:42

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

10 Comments

kuroi neko Over a year ago

I must be missing something obvious, but I don't really see how you could have access to this mysterious 'post form page'. If it's a 3rd party server doing the form processing, how is your code supposed to retrieve this JS object?

Derek 朕會功夫 Over a year ago

@kuroineko - The process of getting the data object will have to be figured out by himself because he didn't provide any info on it. He only asked how to pull data from it and append it into the DOM and that's what my answer is about.

Derek 朕會功夫 Over a year ago

@kuroineko - Maybe the data is posted via AJAX and receive the data through JSON(P)? I don't know.

kuroi neko Over a year ago

Well the OP asked how to "post this information", and provided a rather strange sample of a file embedding the POST result inside what looks like HTML. I was just curious about that. A sure way to find out would be to have a link to these providers home page.

user1567453 Over a year ago

jquery is a javascript library and is never the answer for people who don't know javascript. Always learn javascript first then learn jquery or you will have a lot of problems in the future.

|

Collectives™ on Stack Overflow

How to get a value from Javascript variable and use it on page (post)?

4 Answers 4

Comments

Comments

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related