dsiy62758
dsiy62758
2014-10-14 06:58

在按钮上单击创建动态文本框并将数据保存到数据库

I am trying to create dynamic textboxes using php & jquery. I want to submit a paper for presentation, each presentation have more than one authors and each author have more than one affiliations. I tried to create dynamic text boxes for authors and their affiliations. I can create authors dynamically up to 10 but affiliations for only 1st author. Anybody please help me to correct this code. Thanks

<html>
<head>
<title>author</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<style type="text/css">
    div{
        padding:8px;
    }
</style>
 
</head>
 
<body>
 
<h1>Author</h1>
 
<script type="text/javascript">
 
$(document).ready(function(){
 
    var counter = 2;
 
    $("#addAuthor").click(function () {
 
    if(counter>10){
            alert("Only 10 authores allow");
            return false;
    }   //addAffiliation
 
    var newauthorDiv = $(document.createElement('div')) 
         .attr("id", 'authorDiv' + counter);
 
    newauthorDiv.after().html('<label> <b> Author '+ counter + ' </b> </label>' +
        '<br><label>Name : </label>' +
          '<input type="text" name="author1_name' + counter + '" id="author1_name' + counter + '" value="" >'+
          '<div id="AffiliationGroup"><label>Affiliation 1 : </label>' +
          '<input type="text" name="author' + counter + 'affiliation' +  counter +
          '" id="author' + counter + 'affiliation' +  counter +'" value="" >' + 
          '<input type="button" id="addAffiliation" value="+" >' +
          '<input type="button" id="removeAffiliation" value="-" >' + '</div>');
 
    newauthorDiv.appendTo("#AuthorGroup");
 
 
    counter++;
     });
 
     $("#removeAuthor").click(function () {
    if(counter==1){
          alert("No more author to remove");
          return false;
       }   
 
    counter--;
 
        $("#authorDiv" + counter).remove();
 
     });
 
     $("#getButtonValue").click(function () {
 
    var msg = '';
    for(i=1; i<counter; i++){
      msg += "
 Author " + i + " : " + $('#author' + i).val();
    }
          alert(msg);
     });
  });
  
  
  // Affiliation 
  
  $(document).ready(function(){
 
    var counter = 2;
 
    $("#addAffiliation").click(function () {
 
    if(counter>10){
            alert("Only 10 Affiliations allow");
            return false;
    }   
 
    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);
 
    newTextBoxDiv.after().html('<label> Affiliation '+ counter + ' : </label>' +
          '<input type="text" name="author1_affiliation' + counter + 
          '" id="author1_affiliation' + counter + '" value="" >');
 
    newTextBoxDiv.appendTo("#AffiliationGroup");
 
 
    counter++;
     });
 
     $("#removeAffiliation").click(function () {
    if(counter==1){
          alert("No more Affiliations to remove");
          return false;
       }   
 
    counter--;
 
        $("#TextBoxDiv" + counter).remove();
 
     });
 
     $("#getButtonValue").click(function () {
 
    var msg = '';
    for(i=1; i<counter; i++){
      msg += "
 Affiliation " + i + " : " + $('#author1_affiliation' + i).val();
    }
          alert(msg);
     });
  });
  
</script>
</head><body>
 
<div id='AuthorGroup'>

        <label><b>Author 1 </b></label> <br>
        <label>Name : </label><input type='author' id='author1_name1' >
       
        <div id='AffiliationGroup'>
         <label>Affiliation 1 : </label><input type='textbox' id='author1_affiliation1' > 
        <input type='button' value='+' id='addAffiliation'>
        <input type='button' value='-' id='removeAffiliation'>
        <!--<input type='button' value='Get TextBox Value' id='getButtonValue'>-->
        </div>    
</div>
<input type='button' value='Add Author' id='addAuthor'>
<input type='button' value='Remove Author' id='removeAuthor'>
<!--<input type='button' value='Get author Value' id='getButtonValue'>-->
 
</body>
</html>

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongmi9494 dongmi9494 7年前

    See http://jsfiddle.net/9y3n33jx/

    I haven't completed the whole thing but it should give you an idea.

    You need to put your original author inside a div.authorDiv. Use class names instead of id for your + - buttons.

        <input type='button' value='+' class='addAffiliation'>
        <input type='button' value='-' class='removeAffiliation'>
    

    Because those buttons will be dynamically added you need to bind to click event on body for the button class:

    $('body').on("click", ".addAffiliation", function () {
    

    (When the button is clicked you need to figure out the number of affiliates inside div by class, i.e. $(this).parent().(".affiliateClass").length)

    When the add button is clicked, you need to add the new div to the parent of the clicked button:

    newTextBoxDiv.appendTo($(this).closest(".authorDiv"));
    

    You'll have to do the same for the - button. This should get you going in the right ddirection.

    点赞 评论 复制链接分享