please help me out

Question

baz007 0 Newbie Poster

12 Years Ago

Hello everyone,
i have got a question regarding radio button when i send the form with the submit button i want it to display the First name Last Name and also a text in the if statement. I think the submit function only works for the first last and email address, i need help submitting the form so it displays all the date. Here is the coding
HTML FILE
<html>
<head>
<title>First Demo</title>
<link href="" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<script type="" src =""></script>
<form id="DemoVersion" action="">
Name:
<input type="text" name="firsName"/></br>
Last Name:
<input type="text" name="secondName"/></br>
Please enter your email address:
<input type="text" name="email"/></br>
Would you like pizza or chips?</br>
<input type="radio" name="food" value="Petrol"/> Pizza<br>
<input type="radio" name="food" value="Diesel"/> Chips

</body>

</html>
JAVA SCRIPT FILE
function login(){
var myForm=document.getElementById("DemoVersion");
var fName=myForm.firstName.value;
var sName=myForm.secondName.value;
var eAddy=myForm.email.value;
document.write("Hello "+uName+" "+lName+"."+"Your mail account is " +eAdd+".")
}
function process(){
var myForm=document.getElementById("DemoVersion");
if(myForm.engine[0].checked==true){
document.write("Pizza is your choice");
}else{
document.write("Nothing has been selected");
}
}

var btn = document.getElementById("loginBtn");
btn.addEventListener("click", login, false, true)

THANK YOU ANYONE THAT HELPS ME IN ADVANCE.

javascript

2 Contributors
3 Replies
170 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by emclondon

emclondon 38 Junior Poster in Training

12 Years Ago

here's your solution.

<!DOCTYPE HTML>
<HTML lang="en">
<head>
<title>First Demo</title>
<META name="description" content="HTML5 JS Tutorial" />
<META name="keywords" content="HTML5,CSS,JavaScript" />
<META name="Author" lang="en" content="Prasanna K Yalala" />
<style type="text/css">
            html,body {
                border: 0;
                height: 100%;
                font-family: arial, helvetica, sans-serif;  
            }
            body{
                background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#CCCCCC));
                background-color: rgba(0, 0, 0, 0.6);
                color: #000;
                height: 100%;
                margin: 0;
            }

            #my_div {
                margin-top: 15%;
                margin-left: 18%;
                width: 425px;
            }

            #my_layout {
                background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
                width: 500px;
                position:absolute;
                top: 50%;
                left: 50%;
                width:38em;
                height:20em;
                margin-top: -10em; /*set to a negative number 1/2 of your height*/  
                margin-left: -20em; /*set to a negative number 1/2 of your width*/
                border: 1px solid #ccc;
                -webkit-box-shadow: 2px 2px 2px #999;
            }

            #my_layout input{
                 border: 1px solid #ccc;
            }

            #my_layout button{
                border: none;
                color: #888;
                padding: 5px;
                width: 125px;
                height: 30px;
                font-weight: bold;
                border-radius: 5px;
                -webkit-box-shadow: 1px 1px 1px #888;
                background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
            }
            #my_layout button:hover{
                color: #A2ADD2;

            }

</style>
<script type="text/javascript">

/**
* Prasanna K Yalala
* 
* References
* .tutorialspoint.com,  Stackoverflow.com,
* html5rocks.com,  Tizag.com, w3schools.com, 
*
* Copyleft 2012, Nothing is Reserved.
*/

/**
* This function fetches the data from the form and displays
* onto the page. The result of the data being displayed depends
* on the check box being checked.
*/
function process(){
            var fName = document.getElementById("firstName").value;
            var sName = document.getElementById("lastName").value;
            var eAdd = document.getElementById("email").value;
            var food1 = document.DemoVersion.food[0].value;
            var food2 = document.DemoVersion.food[1].value;

            if(document.DemoVersion.food[0].checked == true){
                document.write("Hello "+fName+" "+sName+"!,<br/><br />"+"Your e-mail address is: " +eAdd+".<br /><br />You have choosen: "+food1+"<br /><br />Click <a href='javascript:location.reload();'>Here</a> to restart.");

                return false;
            }else if(document.DemoVersion.food[1].checked == true){
                document.write("Hello "+fName+" "+sName+"!,<br/><br />"+"Your e-mail address is: " +eAdd+".<br /><br />You have choosen: "+food2+"<br /><br />Click <a href='javascript:location.reload();'>Here</a> to restart.");
                return false;
            }else {
                return false;
            }
}
</script>
</head>
<body>
<div id="my_layout">
<div id="my_div">
    <form name="DemoVersion" method="POST" action="#" onsubmit="return process();">
        <table>
            <tr>
                <td style="width: 200px">
                    First Name
                </td>
                <td>
                    <input type="text" id="firstName" required="required" />
                </td>
            </tr>
            <tr>
                <td>
                    Last Name
                </td>
                <td>
                    <input type="text" id="lastName" required="required"/>
                </td>
            </tr>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <input type="email" id="email" required="required"/>
                </td>
            </tr>
            <tr>
                <td>
                    What would you like?
                </td>
                <td>
                    <input type="radio" id="Pizza" name="food" value="Pizza" required="required" />
                    <label for="Pizza">Pizza</label>
                    <input type="radio" id="Chips" name="food" value="Chips" required="required" />
                    <label for="Chips">Chips</label>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <button type="submit" value="Submit">Submit</button>
                </td>
            </tr>
        </table>
    </form></div></div>
</body>
</HTML>

hope this helps

Edited 12 Years Ago by emclondon

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

baz007 0 Newbie Poster · Answer 1 · 2012-04-06T20:16:36+00:00

Thank you very much. That helped me ALOT, i appreciate the help.
Just one more thing is it possible to link a button to more than one function or does the only button (submit) accommodate one function? Can i use the addeventlistener and link it to a button to carry out more than one function? Sorry for being a complete noob just trying to learn. Cheers

emclondon 38 Junior Poster in Training · Answer 2 · 2012-04-07T00:01:35+00:00

write your function and call it in onsubmit. it will work just fine.

example:

<!-- standard html and head elements -->
<script type="text/javascript">
    // other functions (if any) here

    function foo(){
        if(a){
            return true;
        }
        else if(b){
            return false;
        }
        else{
            return false;
        }
    }

    // other functions (if any) here
</script>
<!-- standard head elements -->
<!-- standard body elements -->
<form name="myForm" action="#" method="POST" onsubmit="return function1(); function 2(); foo(); function 3();">
<!-- form elements -->
</form>
<!-- rest of body elements -->

I think this should solve your problems.