how to open multiple textboxes on a click using ajax

Question

<table>
  <tbody id="eb_body">
    <tr>
      <td>Booking Bills:</td>
      <td><input type="text" id="e_brochure0" name="e_brochure0" placeholder="From           Bill No........" required/></td>

    </tr>
    <tr>
      <td>
        <a onClick="add_brochures()" style="text-decoration:none !important;"><span style="cursor:pointer; font-size:10px; ">+Add more bill nos.</span></a>
      </td>
    </tr>

    <tr>
      <td>
        <input type="submit" value="save" name="save" />
      </td>
    </tr>
  </tbody>
</table>

there is an anchor tag on that click i am calling a function as below..

<script type="text/javascript">
var b=1;
function add_brochures()
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {

            document.getElementById("zone").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","five.php",true);
    xmlhttp.send();
    b=b+1;

}
</script>

with this i am directing the page to five.php where i am displaying a select box....

code for five.php is this...

<?php
include 'dbcon.php';
$sql="select * from tb_zone";
$query=mysql_query($sql);
?> 
<tr>
<td>

<select>
<?php
while($row=mysql_fetch_array($query))
    {
        ?>
        <option>
        <?php echo $row["zone_name"]; ?>
        </option>
        <?php } ?>
</select>

</td>
</tr>

when i click on anchor tag it is opening one selectbox but bot more....what i want is that when i click on anchor tag then a selectbox appears...if i click on it 5 times then i should open selectbox 5 times....right now it is opening just 1 selectbox....please help

Since you're setting innerHTML, not concatenating it, it replaces the old contents. Use += instead of = if you want to append. — Barmar
– Barmar, Commented Jan 23, 2014 at 5:53
actaully i have to include php script on selectbox that is why i am using ajax — user3181292
– user3181292, Commented Jan 23, 2014 at 5:54

Barmar · Accepted Answer · 2014-01-23 05:55:12Z

1

Change:

document.getElementById("zone").innerHTML=xmlhttp.responseText;

to:

document.getElementById("zone").innerHTML += xmlhttp.responseText;

+= will concatenate the response to the existing HTML, which will add a new row to the table.

answered Jan 23, 2014 at 5:55

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Barmar Over a year ago

what problem are you having?

user3181292 Over a year ago

sir actually it is displaying multiple selectboxes on anchor tag ...for eg i clicked on anchor and the selectbox gets displayed ...i choose some value...and when i click again on anchor tag to choose one more value then the value that i choose above gets blank...then again i have to choose...means when i clcik on anchor tag to open new selectbox the previous values gets vanished...?? what can be done for that/?

Barmar Over a year ago

That's because you're rewriting the inner HTML of the table, so all the state is lost. It would be better if you created new elements, and added them with appendChild. I know how to do that with jQuery, I'm not sure how to do it with plain Javascript.

user3181292 Over a year ago

i want to insert all these values in database...so will it be possible with jquery??

Barmar Over a year ago

Yes. jQuery is just a library that makes it easier to write Javascript.

|

Collectives™ on Stack Overflow

how to open multiple textboxes on a click using ajax

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related