Please help: How to add textfield dynamically in php page.

[dlabacs]

Hi to all Javascript/PHP/Web experts,

 

I'm new to this site and new also to web design/development industry. I'm still learning HTML/PHP/Mysql/JS.

 

I need help in my coding . I want to add a textfield on my HTML form when the time I used to select a value on my dropdown menu/combobox something like that.  I don't know how to this. Please help.

 

sample code:

 

 

<form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST">

        <table style="border:1px solid #eee;padding:10px 10px;width:600px;margin-bottom:10px;">

<tr>

            <td class="va-top"><strong>Post Type:</strong></td>

<td><?php echo $result['postType']; ?></td>

          </tr>

          <tr>

            <td class="va-top"><strong>Post Title:</strong></td>

            <td><?php echo $result['postTitle']; ?></td>

          </tr>

          <tr>

            <td><strong>Advertising Type:</strong></td>

            <td>

<select name="adType" onChange="addfield()">

<option value="select">-select-</option>

<option value="Sponsored List">Sponsored List</option>

<option value="Banner Ads">Banner Ads</option>

</select>

 

<!-- dynamic field here -->

</td>

          </tr>

  <tr>

<td></td><td> <input type="image" src="design/button-submit.gif" value="Submit" name="submit"  /></td>

  </tr>

</table>

</form>

 

 

On my code, if the user select

 

"Sponsored Listing" and/or "Others", add a textfield something like <input type="text" name="List_title" />

 

"Banner Ads" , add a textfield to upload an image.

 

 

I hope that my message is clear,easy to understand. Any help will be appreciated.

Thank you in advance

 

 

Btw,this is my school project. Not for commercial use. :-)

 

More Power phpfreaks

[Failing_Solutions]

Add this to your head

 

<script type="text/javascript">
function showHide (obj) {
if (obj.style.visibility == "hidden") {
obj.style.visibility = "visible";
} else {
obj.style.visibility = "hidden";
}
} 
</script>

Add your text box(s) hidden by default to your form

 

<input type="text" id="Sponsored" style="visibility: hidden;"/>

<input type="text" id="BannerAds" style="visibility: hidden;"/>

 

Change your onChange Function to this:

<select name="select" onChange="showHide(Sponsored);" />

<option value="select">-select-</option>

                  <option value="Sponsored List">Sponsored List</option>

                  <option value="Banner Ads">Banner Ads</option>

              </select>

 

Hope that is what you were after. If you need to do two or more use the option value tag to do it

<option value="Sponsored List" onSelect="showHide(Sponsored);">Sponsored List</option>

<option value="Banner Ads" onSelect="showHide(BannerAds);">Banner Ads</option>

 

 

Good luck

 

[dlabacs]

Thanks for the code bro, it really works but I want something like "create element" instead of showing hidden textbox(s).

 

Can you help me again this time?

 

code may something like:

 

<script type="javascript">
       function addfield() {
        // if <select> value is equal to "Banner Ads", create element <input type="file">
       }
</script>

[Failing_Solutions]

sorry I never coded anything this way. I always create all my elements either on the page or externally then use a php or javascript to show them when needed.

 

You can of course do it but I have no experience with it.

 

This site may help: http://www.javascriptkit.com/javatutors/dom2.shtml

[Adam]

Use the createElement() method of the document object. Sample code:

 

// Create the element
var input = document.createElement('input');
input.type = 'file';
input.name = 'myfile';

// Append to the document body
document.body.appendChild(input);

 

Of course you'll probably want to append it to a DIV container or something instead, so that you can position it correctly.

[dlabacs]

  .Woow!...

 

Great!. I works..

 

Thank you so much guys. I learn things from both of you.