CODEWITHSUNDEEP
javascriptjqueryhtml
user2871675
user2871675

Reputation: 5

html dom and javascript

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>

Upvotes: 0

Views: 87

Answers (4)

Harsha
Harsha

Reputation: 503

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

Upvotes: 0

Sachin Thapa
Sachin Thapa

Reputation: 3719

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 !!

Upvotes: 0

Markus
Markus

Reputation: 202

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>

Upvotes: 0

khalid13
khalid13

Reputation: 2837

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>

Upvotes: 1

Related Questions