javascript - How to reset the error number when deleted from list -


i'm creating set of textboxes , drop downs using jquery. add function working out issues.

my problem delete function function works nicely long user deletes 1 after other if user delete else number sequence messed up. breaks 1,2,3,4 ... etc , sets number deleted last.

as example if user deletes number 4 out of 7 errors functions sets last number 4 when user clicks add button next number generated 5 not correct last number. want rest rest of numbers when removed middle.

i'm storing last number in hidden filed called stvalue getting reset when deleting.

my problem here can't head around think of way reset when deleting else , reset entire error number row numbers when removed middle. can guys me below code.

jsfiddle understand better

jquery:

//add , remove function error text boxes $(document).ready(function () {     $(document).on('click','.addrow',function () {         var div = $("<div />"),             btnid = $(this).data("bid").match(/\d+/);//breaks number id using .match          div.html(copy()); //creates new div container         $('.error-column').append(div); //insert html new div          $('#addrow_'+btnid).prop("disabled", true);//disables add button once clicked.     });      //remove text filed list , resets error number     $(document).on('click', '.delrow', function () {         var //btnid = $(this).data("bid").match(/\d+/),//breaks number id using .match             maxnolist = $('input[class="addrow"]').length,             errnolist = maxnolist - 1;           alert(errnolist);           //btnid = btnid - 1; //calculates id number of previous button          $('#addrow_'+errnolist).prop('disabled',false);// enables previous add button          $('#stvalue').val(errnolist); //set value of stvalue when removing text filed                                   //so error numbers generated accordingly when add clicked again.          $(this).parent().remove(); //remove text row list.     }); });  //html function called button click event add button function copy() {     var stnum = document.getelementbyid("stvalue"),         gennum = (document.getelementbyid("stvalue").value - 1)+2;      stnum.value = gennum;      // language=html     return '<input class="errorcount" size="1" value="'+gennum+'" style="margin-left: 2%" readonly/>\n' +         '<select class="errorname" style="margin-left: 6%">\n' +         '<option selected disabled>----- select error -----</option>\n' +         '</select>\n' +         '<input type="button" class="addrow" id="addrow_'+gennum+'" data-bid="addrow_'+gennum+'" value="add" />\n' +         '<input type="button" class="delrow" id="delrow_'+gennum+'" data-bid="delrow_'+gennum+'" value="delete"/><br />' }

html:

<div id="jtype-container">   <div id="error-add-container">  <div id="error-column-headings">   error number<span style="margin-left: 8%">error name</span>  </div> <div class="error-column"> <input class="errorcount" size="1" value="1" style="margin-left: 2%"/>   <input type="hidden" value="1" id="stvalue"/>     <select class="errorname" style="margin-left: 6%">       <option selected disabled>----- select error -----</option>     </select>    <input type="button" data-bid="addrow_1" id="addrow_1" class="addrow" value="add"/>   </div>  </div> </div>

**update:**completely changed code it's more simpler adding solved answer here might 1 in future.

//add , remove function error text boxes  $(document).ready(function() {    $(document).on('click', '.addrow', function() {      var div = $("<div />"),        btnid = $(this).data("bid").match(/\d+/); //breaks number id using .match        div.html(copy()); //creates new div container      $('.error-column').append(div); //insert html new div        $('#addrow_' + btnid).prop("disabled", true); //disables add button once clicked.    });      //remove text filed list , resets error number    $(document).on('click', '.delrow', function() {      var btnid = $("#stvalue").val(); //read value of stvalue        btnid = btnid - 1; //deduct 1 value last id        //enables 1st add button if value equals 1      if (btnid === 1) {        $('#addrow_' + btnid).prop('disabled', false);      }        $(this).parent().remove(); //remove text row list.      reseterrorno(); //calls reset function    });  });    //reset entire error count number index  function reseterrorno() {    $(".errorcount").each(function(index, _this) {      $(this).val(index + 1);      $("#stvalue").val(index + 1);    });  }    //html function called button click event add button  function copy() {    var stnum = document.getelementbyid("stvalue"),      gennum = (document.getelementbyid("stvalue").value - 1) + 2;      stnum.value = gennum;      // language=html    return '<input class="errorcount" size="1" value="' + gennum + '" style="margin-left: 2%" readonly/>\n' +      '<select class="errorname" style="margin-left: 6%">\n' +      '<option selected disabled>----- select error -----</option>\n' +      '</select>\n' +      '<input type="button" class="addrow" id="addrow_' + gennum + '" data-bid="addrow_' + gennum + '" value="add" />\n' +      '<input type="button" class="delrow" id="delrow_' + gennum + '" data-bid="delrow_' + gennum + '" value="delete"/><br />'  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="jtype-container">    <div id="error-add-container">      <div id="error-column-headings">        error number<span style="margin-left: 8%">error name</span>      </div>      <div class="error-column">        <input class="errorcount" size="1" value="1" style="margin-left: 2%" />        <input type="hidden" value="1" id="stvalue" />        <select class="errorname" style="margin-left: 6%">                               <option selected disabled>----- select error -----</option>                           </select>        <input type="button" data-bid="addrow_1" id="addrow_1" class="addrow" value="add" />      </div>    </div>  </div>

try whenever, delete row, update input new number.

$(".errorcount").each(function(index, _this) {     $(this).val(index + 1); });

full code

//add , remove function error text boxes  $(document).ready(function() {    $(document).on('click', '.addrow', function() {      var div = $("<div />"),        btnid = $(this).data("bid").match(/\d+/); //breaks number id using .match        div.html(copy()); //creates new div container      $('.error-column').append(div); //insert html new div        $('#addrow_' + btnid).prop("disabled", true); //disables add button once clicked.    });      //remove text filed list , resets error number    $(document).on('click', '.delrow', function() {      var //btnid = $(this).data("bid").match(/\d+/),//breaks number id using .match        maxnolist = $('input[class="addrow"]').length,        errnolist = maxnolist - 1;            //btnid = btnid - 1; //calculates id number of previous button        $('#addrow_' + errnolist).prop('disabled', false); // enables previous add button        $('#stvalue').val(errnolist); //set value of stvalue when removing text filed      //so error numbers generated accordingly when add clicked again.        $(this).parent().remove(); //remove text row list.      rearrange();    });  });    function rearrange() {      $(".errorcount").each(function(index, _this) {      $(this).val(index + 1);    });    }    //html function called button click event add button  function copy() {    var stnum = document.getelementbyid("stvalue"),      gennum = (document.getelementbyid("stvalue").value - 1) + 2;      stnum.value = gennum;      // language=html    return '<input class="errorcount" size="1" value="' + gennum + '" style="margin-left: 2%" readonly/>\n' +      '<select class="errorname" style="margin-left: 6%">\n' +      '<option selected disabled>----- select error -----</option>\n' +      '</select>\n' +      '<input type="button" class="addrow" id="addrow_' + gennum + '" data-bid="addrow_' + gennum + '" value="add" />\n' +      '<input type="button" class="delrow" id="delrow_' + gennum + '" data-bid="delrow_' + gennum + '" value="delete"/><br />'  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div id="jtype-container">    <div id="error-add-container">      <div id="error-column-headings">        error number<span style="margin-left: 8%">error name</span>      </div>      <div class="error-column">        <input class="errorcount" size="1" value="1" style="margin-left: 2%" />        <input type="hidden" value="1" id="stvalue" />        <select class="errorname" style="margin-left: 6%">          <option selected disabled>----- select error -----</option>        </select>        <input type="button" data-bid="addrow_1" id="addrow_1" class="addrow" value="add" />      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more