jQuery - change value of one input field based on button click, then change value of another field based on next element or value

Question

Here's the fiddle: http://jsfiddle.net/PfEVd/

I have the following HTML:

<ul id="timeslots">
    <li><button>10:00 AM</button></li>
    <li><button>10:30 AM</button></li>
    <li><button>11:00 AM</button></li>
    <li><button>11:30 AM</button></li>
    <li><button>12:00 AM</button></li>
    <li><button>12:30 AM</button></li>
    <li><button>1:00 PM</button></li>
    <li><button>1:30 PM</button></li>
    <li><button>2:00 PM</button></li>
    <li><button>2:30 PM</button></li>
    <li><button>3:00 PM</button></li>
</ul>

<form>
    <input type="text" name="appointment_date[start_time]" value="1:00 am" class="time start-time" />
    &mdash;
    <input type="text" name="appointment_date[end_time]" value="1:30 am" class="time end-time" />
</form>

And the following jquery:

$("#timeslots li button").click(function () {
      var text = $(this).text();
      $("input:text[name='appointment_date[start_time]']").val(text);
});

What I need to figure out is how to simultaneously change the value of "appointment_date[end_time]" to the start time of the next time slot. In other words, if you click the button "10:00 AM" then start_time changes to 10:00 AM and end_time simultaneously changes to 10:30 AM. How would I do this?

Thanks in advance!

Daniel Imms · Accepted Answer · 2013-04-06 06:19:15Z

1

So you want the parent's next sibling's child's text.

jsFiddle

$("#timeslots li button").click(function () {
    var text = $(this).text();
    $("input:text[name='appointment_date[start_time]']").val(text);

    // Get parent's next sibling's child's text
    var toText = $(this).parent().next().children('button').text()
    $("input:text[name='appointment_date[end_time]']").val(toText);
});

This doesn't work on the last button though as there isn't a next button. You may be better off making a function to get the time of the current button and add 30 minutes to it. Excuse the messy code, you get the idea though :)

jsFiddle

$("#timeslots li button").click(function () {
    var text = $(this).text();
    $("input:text[name='appointment_date[start_time]']").val(text);

    var toText = addThirtyMinutes(text);
    $("input:text[name='appointment_date[end_time]']").val(toText);
});

function addThirtyMinutes(time) {
    var timeSplit = time.split(' ');
    var hourAndMin = timeSplit[0].split(':');
    hourAndMin[0] = Math.floor(parseInt(hourAndMin[0], 10) + ((parseInt(hourAndMin[1], 10) + 30) / 60));
    if (hourAndMin[0] == 13) {
        hourAndMin[0] = 1;
        timeSplit[1] = 'PM';
    }
    hourAndMin[1] = (parseInt(hourAndMin[1], 10) + 30) % 60;

    return hourAndMin[0] + ':' + (hourAndMin[1] < 10 ? '0' : '') + hourAndMin[1] + ' ' + timeSplit[1];
}

edited Apr 6, 2013 at 6:19

answered Apr 6, 2013 at 6:11

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vibe9 Over a year ago

Two for two Daniel ;-) Thanks, this works really well for my app!

Travis J · Accepted Answer · 2013-04-06 06:21:24Z

1

jsFiddle Demo

Here is how I would approach this. Grab the text of the next button on click. If it is the last one, hard code in the 30 minute window.

var all = $("#timeslots li button").length;
var $buttons = $("#timeslots li button");
$buttons.click(function () {
 var text = $(this).text();
 $(".start-time").val(text);
 var next = $buttons.index(this) + 1;
 if( next == all ){
  $(".end-time").val("3:30 PM");   
 }else{
  $(".end-time").val($buttons.eq(next).text());   
 }
});

answered Apr 6, 2013 at 6:21

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Collectives™ on Stack Overflow

jQuery - change value of one input field based on button click, then change value of another field based on next element or value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related