Javascript: Writing HTML dynamically via innerHTML

Question

Im not sure why I cannot dynamically write to the paragraph element. I've even tried with just a string to no avail. What am I doing wrong here? Im guessing the default behavior is to POST because that's all that happens, even though I'm not telling it to do it.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
<script type="text/javascript">
<!--

function submit() { 

    var fName = "";
    var lName = ""; 
    var eLevel = "";

    fName = document.person.elements["fName"].value; 
    lName = document.person.elements["lName"].value; 
    eLevel = document.person.elements["eLevel"].value; 

    var result = fName + " " + lName + "<br>" + eLevel;
    document.getElementById("result").innerHTML = result; 
};
//-->
</script>

</head>
<body>
    <form action="" id="person">
        Please fill in all fields.<br /><br />

        <fieldset><legend>Name:</legend>
        First:  &nbsp;<input type="text" id="fName" name="fName" /><br /><br          />
        Last:&nbsp;&nbsp;
        <input type="text" id="lName" name="lName" /> 
       </fieldset>
        <br />

    <fieldset>
        <legend>Education:</legend>
        Highest Level:&nbsp;
        <input list="eLevels" name="eLevel" />
        <datalist id="eLevels">
            <option value="High School">
            <option value="Associate Degree">
            <option value="Bachelors Degree">
            <option value="Graduate Degree">
        </datalist> 
     </fieldset>
        <br /><button value="click" onclick="submit()">click</button>

     </form>
     <p id="result"></p>
     </body>

</html>

Answer 1

You need to preventDefault on the form submit, this way your code can execute.

function submit(event) { 
    event.preventDefault();

    var fName = "";
    var lName = ""; 
    var eLevel = "";

    fName = document.person.elements["fName"].value; 
    lName = document.person.elements["lName"].value; 
    eLevel = document.person.elements["eLevel"].value; 

    var result = fName + " " + lName + "<br>" + eLevel;
    document.getElementById("result").innerHTML = result; 
};

For the event parameter you will need to pass it in the onClick() event

<button value="click" onclick="submit(event)">click</button>

Javascript: Writing HTML dynamically via innerHTML

Question

1 answers

solution1
1 ACCPTED 2015-07-11 23:06:03

Javascript: Writing HTML dynamically via innerHTML

Question

1 answers

solution1 1 ACCPTED 2015-07-11 23:06:03

solution1
1 ACCPTED 2015-07-11 23:06:03