Copy form input field to paragraph

Swaggots · Nov 9, 2013

Hey guys, here's an explanation of what i'm looking for.

When a user enters my website, a popup form appears and asks them to submit their name in a form field called "name".
After they click submit, I would like a paragraph to switch from "Hello, Guest" to "Hello, <name>".
Is that even possible?

Thanks,
Swaggots

Nehalem · Nov 9, 2013

It's Javascript/jQuery I guess.

Sysode · Nov 9, 2013

This can be achieved by javascripts prompt();

I'll give you an example, sorry it's not the neatest of code - just writing this raw here.

Place this before your </body> tag in your HTML document - or in a separate file if you have that setup already:

Code:

<script>
function name()
{
var naming;
var person=prompt("Please enter your name");

if (person!=null)
  {
  naming="Hello " + person + "! How are you today?";
  document.getElementById("nameinput").innerHTML=naming;
  }
}
</script>

This basically pop-ups on page load, prompting the user to input their name - if not it'll will remain unchanged. It will change the paragraph to "Hello {name}! How are you today?"

Now, to make this pop-up appear on page load, we need to call your function onload. Replace the <body> tag to this:

Code:

<body onload="name()">

Now to make sure the prompt applies to the correct id (whether this is a div, p tag or something else), you can use this as an example:

Code:

<p id="nameinput">Hello Guest, how are you?</p>

If you need some extra help, just ask. Appreciate this may not be the clearest of examples, lol. Hope it helps a little at least.

Swaggots · Nov 9, 2013

Sysode said:
This can be achieved by javascripts prompt();

I'll give you an example, sorry it's not the neatest of code - just writing this raw here.

Place this before your </body> tag in your HTML document - or in a separate file if you have that setup already:

Code:

<script> function name() { var naming; var person=prompt("Please enter your name"); if (person!=null) { naming="Hello " + person + "! How are you today?"; document.getElementById("nameinput").innerHTML=naming; } } </script>

This basically pop-ups on page load, prompting the user to input their name - if not it'll will remain unchanged. It will change the paragraph to "Hello {name}! How are you today?"

Now, to make this pop-up appear on page load, we need to call your function onload. Replace the <body> tag to this:

Code:

<body onload="name()">

Now to make sure the prompt applies to the correct id (whether this is a div, p tag or something else), you can use this as an example:

Code:

<p id="nameinput">Hello Guest, how are you?</p>

If you need some extra help, just ask. Appreciate this may not be the clearest of examples, lol. Hope it helps a little at least.

Thanks man, it worked great.

Sway · Nov 9, 2013

Sysode said:
This can be achieved by javascripts prompt();

I'll give you an example, sorry it's not the neatest of code - just writing this raw here.

Place this before your </body> tag in your HTML document - or in a separate file if you have that setup already:

Code:

<script> function name() { var naming; var person=prompt("Please enter your name"); if (person!=null) { naming="Hello " + person + "! How are you today?"; document.getElementById("nameinput").innerHTML=naming; } } </script>

This basically pop-ups on page load, prompting the user to input their name - if not it'll will remain unchanged. It will change the paragraph to "Hello {name}! How are you today?"

Now, to make this pop-up appear on page load, we need to call your function onload. Replace the <body> tag to this:

Code:

<body onload="name()">

Now to make sure the prompt applies to the correct id (whether this is a div, p tag or something else), you can use this as an example:

Code:

<p id="nameinput">Hello Guest, how are you?</p>

If you need some extra help, just ask. Appreciate this may not be the clearest of examples, lol. Hope it helps a little at least.

This is probably off-topic but I'm learning JS and couldn't you just both initialize and define the variable all at the same time?

Code:

var naming="Hello " + person + "! How are you today?";

Copy form input field to paragraph

Swaggots

Member

Nehalem

ツ

Sysode

Front-End Developer

Swaggots

Member

Sway

Ruby and Python are married.

Users who are viewing this thread

Latest posts

Connect with us

Newest members