javascript form generator without refreshing page...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

javascript form generator without refreshing page...

Post by mudkicker »

hey people,

i want to have a form generator for example.

i have a basic form and one of the inputs is:

"How many books are in this set?"

someone enters here on and then press generate.
then it will open without refreshing page, 10 text fields and he will enter book names etc.. then he submits the form and all data will be saved in database. is there any way to do this?

i wait for your ideas or codes etc...
thanks :cry:
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Fairly easy to do in theory but can get complicated in the long term....

For instance, what happens if someone changes the number of books halfway through.

Does this mean that all excess book fields get deleted or only those which are empty ?.

You may want to look at
viewtopic.php?t=13891

Personally I use a function

Code: Select all

function changeElemContent(elementId,content) {
  if(document.implementation &&
    document.implementation.hasFeature &&
    document.implementation.hasFeature('Range','2.0')) {

    // Can use ranges (Netscape 6+)
    node = document.getElementById(elementId);
    var newRange = document.createRange();
    newRange.selectNodeContents(node);
    newRange.deleteContents();
    var newHTML = newRange.createContextualFragment(content);
    node.appendChild(newHTML);

  } else {
    if(document.getElementById) {
      // Process using inner HTML (Explorer 5&6)
      document.getElementById(elementId).innerHTML=content;
    } else {
      // Other generic tries to match other browsers. Do not always work (e.g Netscape 4)
      if (document.all) {
        document.allїelementId].innerHTML=content;
      } else {
        if(document.layers) {
          with(document.layersїelementId].document) {
            open();
            write(content);
            close();
          }
        }
      }
    }
  }
}
but that might add more complexity than you need. (I'll let you figure out what it does :wink: )
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

TOM

Post by phpScott »

You will have to use the DOM subset TOM(table object model) of Javascript to do what you want
http://www.w3schools.com/js/tryit.asp?f ... _insertrow
has a nice example of how to do it.

I think this would be your best be because you don't want to reload the page.

phpScott
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

thanks i will look @them and tell what i can't get. thank you very much.
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

http://www.w3schools.com/js/tryit.asp?f ... _insertrow

this is what i want..
if i want to put text fields it adds.
the problem is, if i fill these text fields and submit the form of them. it doesn't take the values of them.. :(

strange is:

Code: Select all

<script type="text/javascript">
function insRow()
&#123;
var x=document.getElementById('tablo').insertRow(1)
var y=x.insertCell(0)
y.innerHTML="<input type="text" name="test&#1111;]">"
&#125;
</script>
this is the code i personalized. iwant add more than 1 text fields fill them and post in an array $post.

this is the way which doesn't work.

if i write the line like this:

Code: Select all

y.innerHTML="<input type="text" name="test">"
then it works but this is not for multiple text fields right?
any ideas?? :(
User avatar
PrObLeM
Forum Contributor
Posts: 418
Joined: Sun Mar 07, 2004 2:30 pm
Location: Mesa, AZ
Contact:

Post by PrObLeM »

not not sure because i havent done alot of javascirpt but why not use a for loop basically...

Code: Select all

for(i=0; i<=somenumber; i++)
&#123;
y.innerHTML += "<input type="text" name="test">" ;    //So it adds the input box too the current html
&#125;
User avatar
mudkicker
Forum Contributor
Posts: 479
Joined: Wed Jul 09, 2003 6:11 pm
Location: Istanbul, TR
Contact:

Post by mudkicker »

man...

:( stupid me..

it worked but i did wrote the code print_r wrong way.. >:)

well it works how i wrote too.. there's no problem in it...
just my blind eyes ;)
Post Reply