Dynamically changing HTML form using javascript

Question

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 come 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="companyname" />";
        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 companyname field.

Any help is greatly appreciated, thanks.

If you combine 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
– James Montagne, Commented Apr 25, 2012 at 17:50

David Gorsline · Accepted Answer · 2012-04-25 17:55:13Z

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='companyname' />";
            elt.innerHTML = newHTML;
        }
    }
}


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

answered Apr 25, 2012 at 17:55

David Gorsline

5,01812 gold badges33 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Alpha · Accepted Answer · 2012-04-25 17:56:14Z

1

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

DEMO.

answered Apr 25, 2012 at 17:56

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Comments

akonsu · Accepted Answer · 2012-04-25 17:48:35Z

0

try escaping the inner double quotes in your innerHTML text.

answered Apr 25, 2012 at 17:48

akonsu

29.7k39 gold badges126 silver badges205 bronze badges

Comments

powtac · Accepted Answer · 2012-04-25 17:48:46Z

0

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="companyname" />";
        document.getElementById('li1').innerHTML = newHTML;
    } // <-- this was missing!
}

answered Apr 25, 2012 at 17:48

powtac

41.1k28 gold badges120 silver badges173 bronze badges

1 Comment

user1353742 Over a year ago

Oh sorry, in my code it exists but i didn't copy the else part so i missed it out, opps

jcho360 · Accepted Answer · 2012-04-25 17:54:24Z

0

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)

answered Apr 25, 2012 at 17:54

jcho360

3,7491 gold badge18 silver badges25 bronze badges

1 Comment

David Gorsline Over a year ago

jQuery is certainly the modern, advanced way to go, but it's clear that the questioner is still learning the basics of JavaScript and HTML.

ajax333221 · Accepted Answer · 2012-04-26 00:10:54Z

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=\"companyname\" />";
        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

Collectives™ on Stack Overflow

Dynamically changing HTML form using javascript

6 Answers 6

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related