/    Sign up×
Community /Pin to ProfileBookmark

Submit button problem

Hi,

I just start to learn HTML javascript, facing some issue for the submit button.

Using HTML and scripts, create a form as shown in the figure below to allow user to enter their favorite food information.
[ATTACH]17549[/ATTACH]

when the user click the SUBMIT button, the following output needs to be displayed to the user.
[ATTACH]17551[/ATTACH]

[code=html]
<form>
<table>
<tr>
<td>Name:</td>
<td>
<input type=”text” name = “Fname” size=”30″
</td>
</tr><
<tr>
<td>Age:</td>
<td><input type = “text” name = “age” size = “30” maxlength=”2″
</td>
</tr>
<tr>
<td>Gender :
</td>
<td>
<select name = “type” size ‘1’>
<option value = ‘Male’> Male </option>
<option value = ‘Female’> Female </option>
</select>
</td>
</tr>
<tr>
<td>Favourite food :</td>
<td><input type = ‘radio’ name = ‘size’ value = ‘Burger’/>Burger
</td>
</tr>
<tr>
<td></td>
<td><input type = ‘radio’ name=”size” type=”radio” value=”Pizza”/>Pizza</td>
</tr>
<tr>
<td></td>
<td><input type = ‘radio’ name=”size” type=”radio” value=”Roti Canai” />Roti Canai</td>
</tr>
</form>
</body>
</table>

<p>Your comment about the food <br />
<textarea style=”margin: 0px; width: 286px; height: 119px;” cols=”number_of_characters” name=”element_Name” rows=”number_of_rows” wrap=”Type_of_wrap”></textarea></p>
<br><br>
<input type= “button” value=”SUBMIT” onclick=”writeName()”)>
<input type= “RESET” value=”RESET”>

<script type=”text/javascript”>
function writeName(){
var welcomeMsg = document.getElementById(‘welcome’);
var name = document.getElementById(‘name’).value;
var Age = document.getElementById(‘Age’).value;

welcomeMsg.innerHTML = “Welcome “+name.value+”.<br/>’;
//document.write (Name + ” is ” + Age + ” years old.”);
}
</script>

[/code]

Please help.

Thanks

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERJul 22.2017 — Welcome to the forums. ?

You have a number of errors you would be able to find if you checked your typing skills and the error console.

  • 1. You do not complete some of your input tags.

  • 2. You start a string with a " but end with a '.

  • 3. You reference by ID, but do not supply the elements with it, only a name="XXX"

  • 4. Some of your variables are inconsistent ('Fname' vs 'name', etc.)


  • You really should specify what the form tag is to do, ie action="xxx" and method="xxx"

    <i>
    </i>&lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt; HTML5 page &lt;/title&gt;
    &lt;/head&gt;
    &lt;style type="text/css"&gt;
    textarea { margin: 0px; width: 286px; height: 119px; }
    &lt;/style&gt;

    &lt;body&gt;

    &lt;form&gt;
    &lt;table&gt;
    &lt;tr&gt;
    &lt;td&gt;Name:&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="Fname" value="" size="30"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;Age:&lt;/td&gt;
    &lt;td&gt;&lt;input type = "text" id="Age" value="" size = "30" maxlength="2"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;Gender : &lt;/td&gt;
    &lt;td&gt;
    &lt;select name = "type" size '1'&gt;
    &lt;option value = 'Male'&gt; Male &lt;/option&gt;
    &lt;option value = 'Female'&gt; Female &lt;/option&gt;
    &lt;/select&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;Favourite food :&lt;/td&gt;
    &lt;td&gt;&lt;input type='radio' name='size' value = 'Burger'/&gt;Burger&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type='radio' name="size" value="Pizza"/&gt;Pizza&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type='radio' name="size" value="Roti Canai" /&gt;Roti Canai&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/form&gt;
    &lt;/body&gt;
    &lt;/table&gt;

    &lt;p&gt;
    Your comment about the food &lt;br /&gt;
    &lt;textarea cols="number_of_characters" name="element_Name" rows="number_of_rows" wrap="Type_of_wrap"&gt;&lt;/textarea&gt;
    &lt;/p&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;input type= "button" value="SUBMIT" onclick="writeName()"&gt;
    &lt;input type= "RESET" value="RESET"&gt;

    &lt;div id="welcome"&gt;&lt;/div&gt;

    &lt;script&gt;
    function writeName(){
    var welcomeMsg = document.getElementById('welcome');
    var fname = document.getElementById('Fname').value;
    var Age = document.getElementById('Age').value;

    welcomeMsg.innerHTML = "Welcome "+fname+".&lt;br/&gt;";
    welcomeMsg.innerHTML += fname + " is " + Age + " years old.";
    }
    &lt;/script&gt;

    &lt;/body&gt;
    &lt;/html&gt;


    Check each line above with your initial post.
    Copy linkTweet thisAlerts:
    @KhengauthorJul 22.2017 — Hi JMRKER,

    If I using <form action="/action_page_post.php" method="post"> it will consider using php language? because I only can use javascript language.

    [code=html]
    <form action="/action_page_post.php" method="post">
    <table>
    <tr>
    <td>Name&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:</td>
    <td>
    <input type="text" name = "name" size="30">
    </td>
    </tr>
    <tr>
    <td>Age &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; :</td>
    <td><input type = "text" name = "age" size = "30" maxlength="2">
    </td>
    </tr>
    <tr>
    <td>Gender &nbsp; &nbsp; &nbsp; &nbsp; :
    </td>
    <td>
    <select name = "type" size "1">
    <option value = "Male"> Male </option>
    <option value = "Female"> Female </option>
    </select>
    </td>
    </tr>
    <tr>
    <td>Favourite food :</td>
    <td><input type = "radio" name = "size" value = "Burger"/>Burger
    </td>
    </tr>
    <tr>
    <td></td>
    <td><input type = "radio" name="size" type="radio" value="Pizza"/>Pizza</td>
    </tr>
    <tr>
    <td></td>
    <td><input type = "radio" name="size" type="radio" value="KFC" />KFC</td>
    </tr>
    </table>
    </form>

    <p>Your comment about the food <br/>
    <textarea style="margin: 0px; width: 286px; height: 119px;" cols="number_of_characters" name="element_Name" rows="number_of_rows" wrap="Type_of_wrap"></textarea></p>
    <br><br>
    <input type= "button" value="SUBMIT" onclick="writeName()")>
    <input type= "RESET" value="RESET">


    <script type="text/javascript">
    function writeName(){
    var name = document.getElementById('name').value;
    var Age = document.getElementById('Age').value;

    welcomeMsg.innerHTML = "Welcome "+name.value+".<br/>';
    }
    </script>



    [/code]
    Copy linkTweet thisAlerts:
    @JMRKERJul 22.2017 — Hi JMRKER,

    If I using <form action="/action_page_post.php" method="post"> it will consider using php language? because I only can use javascript language.

    [/QUOTE]


    What are you talking about?

    The script provided will display the HTML and alert the user with a JS message.

    The PHP is only executed when the 'submit' is clicked.

    You should also include some checks to assure you have all the input required by the PHP program.
    Copy linkTweet thisAlerts:
    @rootJul 22.2017 — Also consider the use of HTML5 inputs and the inform validation that is now possible reduces the work of JavaScript

    As for the submit button, what submit button? this [B] <input name="Submit" type="submit" value="SUBMIT" >[/B] is a submit button.
    ×

    Success!

    Help @Kheng spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.3,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...