Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Using Javascript to create forms dynamically

    I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below...

    Code:
    myform = document.createElement("form");
    	myform.method = "post";
    	myform.action = "editdetails.php";
    	myform.id = "editemail";
    	myform.name = "editemail";
    	
    	var a=document.getElementById('editdetailstable').insertRow(2);
    	var b=document.getElementById('editdetailstable').insertRow(3);
    	
    	var x=a.insertCell(0);
            x.innerHTML="New Email:  ";
    	x.align = "right";
    
    	var y=a.insertCell(1);
            y.innerHTML="<input type='text' name='email' id='email' />";
    	
            var z=b.insertCell(0);
    	z.innerHTML="<input type='button' value='Change' />"
    	z.colSpan = "2";
    	z.align = "center";

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    I'm assuming that you'd assign an ID to the form, and then, in CSS, put display:none as a rule for that form. And then create a Javascript function to toggle the display:none on and off. That is how I think it would be done. I'm sure a more experienced JavaScripter has a better way of doing it, though.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I didn't actually think of doing that, will give it a go, thanks

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Let us know how it goes, I'm just as interested in seeing what happens.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I tried but couldn't get it working properly so instead just created the opening of the form tag above where the row is being inserted and then closed it just before the next form. Seems to work ok.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Hashim1 is entirely correct.

    Initially hide your form:

    <div id = "form1" style="display:none">
    // contents of the form
    </div>

    and use script to show it with

    document.getElementById("form1").style.display="block";
    or hide it again with
    document.getElementById("form1").style.display="none";

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #7
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    Hashim1 is entirely correct.
    I am?

    Well, that's not something that happens often, especially when it comes to Javascript.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.



  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •