html dom and javascript

Question

I'm trying to get the elements from textboxes nameBox and foodBox to be displayed in the paragraph id=message after the submit button is clicked, with the message:

“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”

But i can't figure out how to do that. I'm pretty sure i'm doing something (if not all) wrong but since i'm new at this i can't figure it out what.

<body>

    <br>
    <br>

 <div> 
 <p id="message"></p>  
 </div>   

    Enter your name: 
    <input type="text" id="nameBox" value=""><br>

    Enter your favorite food 
    <input type="text" id='foodBox' value=""><br>


<button id="submitButton">Submit</button>

<script>
   var parent=document.getElementById("message");
    var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>

</body>

khalid13 · Accepted Answer · 2013-10-11 16:08:40Z

1

That's because parent is not the parent of child. To make it so, edit your code to put the two input elements inside the <p> tag:

<p id="message">
    Enter your name: 
    <input type="text" id="nameBox" value=""><br>

    Enter your favorite food 
    <input type="text" id='foodBox' value=""><br>
</p>

answered Oct 11, 2013 at 16:08

khalid13

2,8572 gold badges31 silver badges48 bronze badges

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

Comments

Harsha · Accepted Answer · 2013-10-11 16:30:44Z

Here you go :

<html>
<head>

<script>


function showText(){

    var name=document.getElementById("nameBox").value;
    var food=document.getElementById("foodBox").value;

    document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;

}

</script>
</head>

<body>
<br>
<br>
<div id="msg"> 
</div>   

Enter your name: 
<input type="text" id="nameBox" value=""/><br>

Enter your favorite food 
<input type="text" id="foodBox" value=""/><br>


<input type="button" id="submitButton"  onclick="showText()" value="Submit" />

</body>
</html>

You can make your alignments as you wish, try to use firebug (https://getfirebug.com/) in case of finding UI related issues. It is pretty easy to figure out what is wrong in the UI

Markus · Accepted Answer · 2013-10-11 16:10:25Z

0

Check your HTML. Maybe it should look like this?

<div id="message"> 
    Enter your name: 
    <input type="text" id="nameBox" value=""><br>

    Enter your favorite food 
    <input type="text" id='foodBox' value=""><br>

    <button id="submitButton">Submit</button>
</div>

answered Oct 11, 2013 at 16:10

Markus

2021 silver badge6 bronze badges

Comments

Sachin Thapa · Accepted Answer · 2013-10-11 16:14:01Z

You can call function on clicking submit button and then change the message.

<input type="button" id="submit" value="Submit" onclick="somefunction()"/>

Here is the javascript:

function somefunction() {
  var fieldNameElement = document.getElementById('message');
  fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}

While changing the innerHTML you can add appropriate formatting tags as well.

Also you should add inputs in a table, and add border's and required formatting if required:

<table>
<tr>
<td>
   Enter your name: 
</td>
<td>
    <input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
    Enter your favorite food 
</td>
<td>
    <input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>

You can also think about using a Javascript library which provides lot of methods to make your life easy, would suggest JQUERY

Cheers !!

Collectives™ on Stack Overflow

html dom and javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related