This is the my code,i want to create new text field when user click add link button

Question

0.00/5 (No votes)

See more:

HTML

<html>
  <head>
    <title>
       Topic HTML
    </title>
    <link rel="stylesheet" href="Stylesheets/concepts.css"/>


    <script type="text/javascript" src="JavaScripts/jquery-1.4.2.min.js"></script>

<style type="text/css">
    div{
        padding:1px;

    }
    aaa{
    margin-top:200px;
    }
    bbb{
    margin-top:200px;}

</style>

<script type="text/javascript">

$(document).ready(function(){

    var counter = 1;

    /*var bbb=document.getElementById('reset').value
 */
    $("#addButton").click(function () {

    if(counter>5){
            alert("Only 5 textboxes allow");
            /*$('#submit').show();
            $('#reset').show();*/
            var aaa=document.getElementById('TexBoxDiv2').value;
//  alert(aaa);
            return false;
    }

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after('id').html('<table><tr><td><label style="float:left;margin-left:-140px;" >Links : </label>' +
          '<input type="text" name="links[]'   + counter +
          '" id="links' + counter + '" value="" size="30" style="float:left;" ></td></tr></table>');

    //alert(document.getElementById('links'));
    /*$('#submit').show();
    $('#reset').show();*/
    newTextBoxDiv.appendTo("#TextBoxesGroup");
     counter++;
     });



    /* $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });*/
  });
</script>



  </head>
  <body>
    <center>

    <form action="Get_Topic.php" method="post">
    <h5><font face="Arial, Helvetica, sans-serif" color="#FF0000">* fields mandatory</font></h5>
    <div id='TextBoxesGroup'>
     <div id="TextBoxDiv">
      <table>
        <tr>
          <td>Concept Level<font color="red">*</font></td>
          <td>
          <select id="level_id" name="level_id">
          <option name=""></option>
          <?php
          $topic=mysql_query("select * from technology_levels group by level_name");
          while($topic_row=mysql_fetch_array($topic)){
          echo "<option value=".$topic_row['level_id'].">".$topic_row['level_name']."</option>";
          }
          ?>

        </select>
        </td>
        </tr>
        <tr>
          <td>Concept Title<font color="red">*</font></td>
          <td><input type="text" id="concept_title" name="concept_title" size="30"></td>
          </td>
        </tr>
        <tr>
          <td>Cocnept Description <font color="red">*</font></td>
          <td><textarea id="concept_description" name="concept_description" rows="10" cols="30" ></textarea></td>
          </td>
        </tr>
        <tr>
          <td>Links <font color="red">*</font></td>
          <td><input type="text" name="link[]" id="link1" size="30"></td>
           <td><input type='button' value='Add Links' id='addButton'></td>
        </tr>
        <div id="TexBoxDiv2">
        <tr>
          <td><input type="button" value="Reset" id="reset" ></td>
          <td><input type="button" value="Submit" id="submit" ></td>
        </tr>
      </table>
      </div>
       </div>
   </div>
    </form>
    </center>
</body>
</html>

Actually mycode is creating the new link,but it creates aftersubmit button,it is nnot correct,i want to dusplay the before submit button,how can i do that.

Posted 27-Dec-11 0:15am

DeepthiTanguturi

Updated 27-Dec-11 0:45am

Mehdi Gholam

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

nishantcomp2512 · Accepted Answer · 2011-12-27T01:05:00

HTML

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
var counter = 1;
 
$("#addButton").click(function () {
if(counter>5){
alert("Only 5 textboxes allow");
return false;
}
else
{
var table = document.getElementById("formtable");
var rowCount = table.rows.length-1;
var row = table.insertRow(rowCount);
row.innerHTML="<td>Links <font color="\"red\"">*</font></td><td><input type=\"text\" name=\"link[]\" size=\"30\"></td><td></td>";
counter++;
}
});
});

</script>
  <title>
Topic HTML
</title>
<link rel="stylesheet" href="Stylesheets/concepts.css" />
 
<style type="text/css">
div{
padding:1px;
 
}
aaa{
margin-top:200px;
}
bbb{
margin-top:200px;}
 
</style>
</head>
<body>
<center>
 
<form action="Get_Topic.php" method="post">
<h5><font face="Arial, Helvetica, sans-serif" color="#FF0000">* fields mandatory</font></h5>
<div id="TextBoxesGroup">
<div id="TextBoxDiv">
<table id="formtable">
<tr>
<td>Concept Level<font color="red">*</font></td>
<td>
<select id="level_id" name="level_id">
<option name=""></option>
$topic=mysql_query("select * from technology_levels group by level_name");
while($topic_row=mysql_fetch_array($topic)){
echo "<option value=".$topic_row['level_id'].">".$topic_row['level_name']."</option>";
}
?>
 
</select>
</td>
</tr>
<tr>
<td>Concept Title<font color="red">*</font></td>
<td><input type="text" id="concept_title" name="concept_title" size="30"></td>

</tr>
<tr>
<td>Cocnept Description <font color="red">*</font></td>
<td><textarea id="concept_description" name="concept_description" rows="10" cols="30" ></textarea></td>

</tr>
<tr>
<td>Links <font color="red">*</font></td>
<td><input type="text" name="link[]" id="link1" size="30"></td>
<td><input type='button' value='Add Links' id='addButton'></td>
</tr>
<div id="TexBoxDiv2">
<tr>
<td><input type="button" value="Reset" id="reset" ></td>
<td><input type="button" value="Submit" id="submit" ></td>
</tr>
</div></table>
</div>
</div>

</form>
</center>
</body>
</html>

check code here code.here code adds a new row to your table....