CODEWITHSUNDEEP
javascripthtml
fomfur
fomfur

Reputation: 57

Change input value on tab

I'm coding a small web app to log team members work time. It all works well, except one thing. When you tab on a fieldset a new page opens with a form to change the time for that person. The first time you tab it works, but when you click on the next fieldset it changes all input fields with the name 'begin-time' ?

I think i'm missing something but I'm not sure what it is.

I have the following form;

<form id="time-form">
  <fieldset>
    <div class="row">
      <input type="text" value="Jonh Doe" id="fullname" name="fullname" readonly="">
      <div class="time">
        <input type="text" value="00:00" id="begin-time" name="begin-time" readonly="">                     
        <input type="text" value="00:00" id="end-time" name="end-time" readonly="">                     
      </div>
  </fieldset>
  <fieldset>
    <div class="row">
      <input type="text" value="Jane Doe" id="fullname" name="fullname" readonly="">
      <div class="time">
        <input type="text" value="00:00" id="begin-time" name="begin-time" readonly="">                     
        <input type="text" value="00:00" id="end-time" name="end-time" readonly="">                     
      </div>
  </fieldset>
</form>

with the new form 'on tab';

<form id="add-time">
  <input type="time" name="begin_time">
  <input type="time" name="end_time">
</form>

and the javascript;

$$('#time-form fieldset').tap(function() {  

var beginTime = $(this).find("[name='begin-time']");

$('#add-time input[name=begin_time]').change(function() {
    beginTime.val(this.value);
});

$$('.add-time').tap(function() {
    $('#addTimePage').addClass('pt-page-moveToRightEasing pt-page-ontop');
    $('#timePage').addClass('pt-page-moveFromLeft pt-page-current');

    setTimeout(function () { 
        $('#timePage').removeClass('pt-page-moveFromLeft');
        $('#addTimePage').removeClass('pt-page-moveToRightEasing pt-page-ontop pt-page-current');
    }, 400);
});
});

edit: I have setup a simple fiddle of the problem.

Upvotes: 0

Views: 1885

Answers (1)

cohenadair
cohenadair

Reputation: 2072

Okay, so I noticed a few problems:

  1. Your first .click() call was targeting ALL time-form fieldsets when it should have only been targeting input fields.
  2. Your .change() and second .click() are called inside the first .click() meaning the new methods will be called multiple times (because each use of .click() and .change() adds on to the actual event.
  3. Your submit button wasn't actually submitting anything. It was just hiding itself.

To fix this, I gave each fieldset a class name of .fieldset-time so they can easily be looped through. I added an onclick() event to each <fieldset> to easily manipulate the one (and its children) that was clicked.

Here's the new JavaScript code:

// invoked each time an input with the onclick() attribute is clicked
function editTime(obj) {
    $("#addTimePage").fadeIn();
    $(obj).attr("id", "active"); // set id to active so we know this is the one we want to change
}

$("#submit").click(function() {
    // get the new beginning and end times set by the user
    var newBeginTime = $("#add-time input[name=begin_time]").val(); 
    var newEndTime = $("#add-time input[name=end_time]").val(); 

    // loop through all elements with class .fieldset-time and find the active one
    $(".fieldset-time").each(function() {
        if ($(this).attr("id") == "active") {
            $(this).attr("id", "");
            $("input[name=begin-time]", this).val(newBeginTime);
            $("input[name=end-time]", this).val(newEndTime);
            return false; // break out of the .each() loop
        }
    });

    // finally, clear and hide the add time box
    $("#add-time input[name=begin_time], #add-time input[name=end_time]").val("");
    $("#addTimePage").fadeOut();
});

And the new JSFiddle: http://jsfiddle.net/J4Hjf/7/

I hope that's what you were looking for. :)

Upvotes: 1

Related Questions