Dynamically changing HTML form using javascript - Stack Overflow

admin管理员组

文章数量:1387440

Basically I need to change the elements in a form based on a choice (radio button perhaps). So that 2 forms are potentially available on a page.

So far I've e up with this but it doesn't seem to work...

//javascript

function FormChange(toChange){
    if (toChange){
        var oldHTML = document.getElementById('li1').innerHTML;
        var newHTML = "Company Name: " + "<input type="text" name="panyname" />";
        document.getElementById('li1').innerHTML = newHTML;
}

//HTML

<form action="insert.php" method="post">
<li id="li1">Firstname: <input type="text" name="firstname" />
</form>

<input type = "button" value="Change that bad boy" onclick="FormChange(true)"/>

My Intention was to remove the firstname field and replace it with the panyname field.

Any help is greatly appreciated, thanks.

Basically I need to change the elements in a form based on a choice (radio button perhaps). So that 2 forms are potentially available on a page.

So far I've e up with this but it doesn't seem to work...

//javascript

function FormChange(toChange){
    if (toChange){
        var oldHTML = document.getElementById('li1').innerHTML;
        var newHTML = "Company Name: " + "<input type="text" name="panyname" />";
        document.getElementById('li1').innerHTML = newHTML;
}

//HTML

<form action="insert.php" method="post">
<li id="li1">Firstname: <input type="text" name="firstname" />
</form>

<input type = "button" value="Change that bad boy" onclick="FormChange(true)"/>

My Intention was to remove the firstname field and replace it with the panyname field.

Any help is greatly appreciated, thanks.

• javascript
• html

Share Improve this question Follow edited Apr 25, 2012 at 17:47 powtac 41.1k2828 gold badges118118 silver badges172172 bronze badges asked Apr 25, 2012 at 17:46 user1353742user1353742 35133 gold badges55 silver badges77 bronze badges 2

• You don't close the li tag... that could be an issue. – Bill Commented Apr 25, 2012 at 17:48
• 1 If you bine the two answers thus far you will probably get working code. It is important when you have an issue with javascript to check and see if there are any errors on the console. This definitely would have thrown a few. – James Montagne Commented Apr 25, 2012 at 17:50

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

Putting the two current answers together, and adding a little error handling:

function FormChange(toChange) {
    if (toChange) {
        var elt = document.getElementById('li1');
        if (elt) {
            var newHTML = "Company Name: " + "<input type='text' name='panyname' />";
            elt.innerHTML = newHTML;
        }
    }
}


<form action="insert.php" method="post">
<ul>
<li id="li1">Firstname: <input type="text" name="firstname" /></li>
</ul>

function FormChange(toChange){
    if (toChange){
        var oldHTML = document.getElementById('li1').innerHTML;
        var newHTML = "Company Name: " + "<input type='text' name='panyname' />";
        document.getElementById('li1').innerHTML = newHTML;
    }
}

DEMO.

try escaping the inner double quotes in your innerHTML text.

You forgot to close the {!

Fix:

function FormChange(toChange) {
    if (toChange) {
        var oldHTML = document.getElementById('li1').innerHTML;
        var newHTML = "Company Name: " + "<input type="text" name="panyname" />";
        document.getElementById('li1').innerHTML = newHTML;
    } // <-- this was missing!
}

why don't use jquery???, do something like this:

$("#li1").change(function(){
alert("it changed");//here do whatever you want to
});

I think it's easier and it's more read readable.(don't forget to import the Jquery library)

I did some tweaks to make changes ONLY when the text is "Firstname:" so repeated calls don't mess with the DOM unnecessarily (see the performance point 9 here)

JS:

function FormChange() {
    var obj = document.getElementById('li1');
    var oldHTML = obj.innerHTML.substring(0,10);

    if (oldHTML=="Firstname:") {
        var newHTML = "Company Name: <input type=\"text\" name=\"panyname\" />";
        obj.innerHTML = newHTML;
    }
}

HTML:

<form name="myForm" action="insert.php" method="post">
    <ul>
        <li id="li1">Firstname: <input name="firstname" type="text" /></li>
    </ul>
</form>
<input type="button" onclick="FormChange();" value="Change that bad boy" />

Demo

Further Notes:

• <li> should be contained in either: <ol>, <ul> or <menu>
• you need to escape quotes in variables properly

本文标签： Dynamically changing HTML form using javascriptStack Overflow