CODEWITHSUNDEEP
javascripthtml
user1353742
user1353742

Reputation: 351

Dynamically changing HTML form using javascript

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.

Upvotes: 1

Views: 13352

Answers (6)

ajax333221
ajax333221

Reputation: 11754

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:

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

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.

Upvotes: 1

David Gorsline
David Gorsline

Reputation: 5003

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>

Upvotes: 1

jcho360
jcho360

Reputation: 3759

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)

Upvotes: 0

powtac
powtac

Reputation: 41040

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!
}

Upvotes: 0

akonsu
akonsu

Reputation: 29536

try escaping the inner double quotes in your innerHTML text.

Upvotes: 0

Related Questions