Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

Create textbox and dropdown on run time

Javascript coding ..

Moderators: macek, egami, gesf

Create textbox and dropdown on run time

Postby Gamers » Sat Jan 19, 2013 4:00 am

Hi All,

I am new to java scripts, I had assigned the project which has been completed 90% , only some part is remaining.

I want to know how can i create a dropdown and text box on run time, mean when the user click on add new row, textbox and dropdown box create dynamically on the page.

What i am thinking is that I can create a function in which text box and dropdown code is mention. and when user click add new row then we can call the function.

But dont know how to do..

Please help me Guys

Thanks In Advance
Gamers
New php-forum User
New php-forum User
 
Posts: 48
Joined: Mon Jun 11, 2012 9:13 am

Re: Create textbox and dropdown on run time

Postby cappy2354 » Fri Aug 09, 2013 9:33 am

All you need to do is create a little css for a div to be hidden and style it. Then link to jQuery1.7.2.js or higher. Then make your div that will show up when a button is clicked on and create a little jQuery function show and hide the div.
Code: Select all
<!-- css -->
#newDropdown {
  display:none;
width:400px;
height:auto;
padding-bottom:5px;
border:1px solid #000;
}

<!-- html -->
<div id="newDropdown">
    <table>
        <tr>
           <td>
              <select id="someID">\
                 <option value="0" SELECTED>--SELECT ONE--</option>
                 <option value="1">YES</option>
                 <option value="2">NO</option>
                 <option value="3">MAYBE SO</option>
              </select>
           </td>
           <td>
              <input type="text" id="input" name="input" />
           </td>
        </tr>
        <tr>
           <td>
             <input type="submit" id="submit" name="submit" value="SUBMIT" />
           </td>
        </tr>
     </table>
<div id="open">
   <input type="submit" id="open" name="open" value="OPEN DIV" />
</div>

<!-- jQuery -->
// open the hidden div
$(document.ready(function() {
   $('#open').click(function() {
      $('#newDropdown').show();
      $('#open').hide(); 
   });
});

// close hidden div
$(document).ready(function() [
  $('#submit').click(function() {
       $('#newDropdown').hide();
       $('#open').show();
   });
});

[url]
Or you can view the fiddle http://jsfiddle.net/cappy2354/Gn3hY/1/
[/url]
cappy2354
New php-forum User
New php-forum User
 
Posts: 5
Joined: Fri Jul 19, 2013 11:07 am


Return to JavaScript

Who is online

Users browsing this forum: No registered users and 2 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.