javascript - setting and getting ages based on datepicker -


i asked similar question couldn't find right solution. have used code dynamically generate input fields includes date field followed age.

i trying jquery's datepicker class pick dates , each age field calculates based on these select dates.

the problem don't know how set value of age input field. tried , searched lots of posts , may simple fix since i'm not familiar jquery methods, got no luck it.

please see excerpt codes:

$(document).on('click', '.datepicker', function() {        $(this).datepicker('destroy').datepicker({          onselect: function(value, ui) {          var   dob = new date(value),           today = new date(),           age = new date(today - dob).getfullyear() - 1970;           $('.age').find('input').val(age);         },                   changemonth: true,          changeyear: true,          dateformat: "mm-dd-yy",yearrange: "1900:+10",showon:'focus'}).focus();  });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <p>title:   <input class="form-control" type="text" name="firstname[]" value="" size="30" />    date:   <input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />   age: <input type="text" class="form-control age" id="age" name="age[]" value="" size="10" />     <a href="#"   class="remove">remove</a></p>

i've tried text(), html(), val() many other ways around nothing works. issue above setting value id in 'dob' input. i'd rather want appear in value of 'age' input field. hope explained issue properly.

as mention in question adding multiple input (date) fields dynamically followed age. using simple class $(".age") or id $('#age') selector not work you.

if use $(".age").val(age) change value input class age , if use $("#age").val(age) update value first matching input id age.

so, need use closest() find() this:

$(ui.input).closest("p").find('.age').val(age);

or

use siblings() selector this

$(ui.input).siblings(".age").val(age);

i hope you.

$(document).on('click', '.datepicker', function() {    //don't add datepicker again if exist    if (!$(this).hasclass("hasdatepicker")) {      $(this).datepicker({        onselect: function(value, ui) {          var dob = new date(value),            today = new date(),            age = today.getfullyear() - dob.getfullyear();          $(ui.input).closest("p").find('.age').val(age);          //$(ui.input).siblings(".age").val(age);        },        changemonth: true,        changeyear: true,        dateformat: "yy-mm-dd",        yearrange: "1900:+10",        showon: 'focus'      }).focus();    }  });    $(document).on('click', "#add", function() {    $(".wrapper").append('<p class="user-row">title: ' +      '<input class="form-control" type="text" name="firstname[]" value="" size="30" />' +      'date: <input type="text" class="form-control datepicker" name="dates[]" value="" size="10" />' +      'age: <input type="text" class="form-control age" name="age[]" value="" size="10" />' +      '<a href="#" class="remove"> remove</a> </p>');  });    $(document).on('click', '.remove', function() {    $(this).closest("p").remove();  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>    <div class="wrapper">    <p class="user-row">title:      <input class="form-control" type="text" name="firstname[]" value="" size="30" /> date:      <input type="text" class="form-control datepicker" name="dates[]" value="" size="10" /> age: <input type="text" class="form-control age" name="age[]" value="" size="10" />      <a href="#" class="remove">remove</a>    </p>  </div>  <button id="add" type="button">add</button>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more