Use getElementById in Alert

Question

This is my code:

<form method="GET">
<input type="text" class="form" name="name" placeholder="Enter your name!" id="name">
<input type="submit" onclick="return clicked();" value="I'm ready!">
</form>
<script>
function clicked() {
 return confirm('Hiya,');
}
var email = document.getElementById('name').value;
</script>

I've had a search around, but I cannot find any single topic which matches my question. On the return confirmation where it currently just says Hiya, I would like it to then also include the name which the user entered into the text input.

Help would be appreciated.

Christos · Answer 1 · 2015-04-18T22:56:58.810

2

You could try something like this:

function clicked() {
    // Here we select the html element with id name and
    // we read it's value.
    var name = document.getElementById('name').value;

    // Then my simply concatenating the Hiya with the above value, name
    // we show to the confirm value the message we want.
    return confirm('Hiya,'+name);
}

function clicked() {
    var name = document.getElementById('name').value;
    return confirm('Hiya, '+name);
}

<form method="GET">
<input type="text" class="form" name="name" placeholder="Enter your name!" id="name">
<input type="submit" onclick="return clicked();" value="I'm ready!">
</form>

edited Apr 18 '15 at 22:56

answered Apr 18 '15 at 22:37

Christos

53,228
8
76
108

Nope, doesn't seem to work. – JugglingBob Apr 18 '15 at 22:38
@JugglingBob please try to run the code snippet and let me know. Thanks. – Christos Apr 18 '15 at 22:39
I've created a jsfiddle for this example. http://jsfiddle.net/wb4njsrk/ – Norman Breau Apr 18 '15 at 22:40
Code–only answers aren't helpful. You should explain the OP's issue and why your answer fixes it. – RobG Apr 18 '15 at 22:46
@RobG I agree with you 100%. However, in this specific case, I think that it's pretty clear what is going on. We just select an html element based on its id and the we read it's value. – Christos Apr 18 '15 at 22:51
If it was "pretty clear", the OP wouldn't have asked the question. Answers are also intended for anyone coming across the question, not just the OP. – RobG Apr 18 '15 at 22:53
@RobG I say so, because I noticed this `var email = document.getElementById('name').value;` Ok, I will add it now. Thanks – Christos Apr 18 '15 at 22:55

score 1 · Accepted Answer · answered Apr 18 '15 at 22:39

1

This should do what you want:

<form method="GET">
  <input type="text" class="form" name="name" placeholder="Enter your name!" id="name">
  <input type="submit" onclick="return clicked();" value="I'm ready!">
</form>
<script>
  function clicked() {
    var name = document.getElementById('name').value;


    return confirm('Hiya,' + name);
  }

  var email = document.getElementById('name').value;
</script>

answered Apr 18 '15 at 22:39

Alex

21,273
10
61
73

How would I then add text after + name? – JugglingBob Apr 18 '15 at 22:49
Add another +, for example return confirm('Hiya,' + name + ' how are you ?'); – Alex Apr 18 '15 at 22:51
Thanks! JavaScript seems a lot more simpler than PHP – JugglingBob Apr 18 '15 at 22:54
`` This does not work – Suraj Jain Jan 22 '17 at 07:28
@Suray Jain, you may want to ask a different question. The following should work: `` – Alex Jan 23 '17 at 12:01

score 0 · Answer 3 · answered Apr 18 '15 at 22:39

You can pass the value in the call:

<input name="name" ...>
<input type="button" onclick="return clicked(this.form.inputName.value);">

where inputName is the name of the input, and in the function:

function clicked(value) {
 return confirm('Hiya, ' + value);
}

However, since you named the input name, it attempts to get the form's name, not the name control so rename the control to, say, userName, then:

<input name="userName" ...>
<input type="button" onclick="return clicked(this.form.userName.value);">

Use getElementById in Alert

3 Answers3