Extract string part in Javascript / Jquery

Question

I'm using cocoon gem to add dynamic nested forms for the working hours.

The Cocoon returns an open_time and close_time input.

id = merchant_working_hours_attributes_ID_open_time
id = merchant_working_hours_attributes_ID_close_time

At the css the close_time input is defined as display:none and my idea is just display if the open_time input is marked not nil.

But for that I need extract the ID from the open_time input and add a css style to the close_time input according that ID.

How can achieve that with javascript / Jquery? Any other form to achieve that?

Answer 1

Your question says that you've a string and you wanna extract the ID of respective element to perform style.

Use split()

var string = merchant_working_hours_attributes_ID_open_time;

var parts = string.split("_"); //You will have the ID at 4th parts[4]

Based on the extracted ID, you can use show() and hide() .

Example

if($('#opentimeID').val() != '')
{
  $('#opentimeID').show();
}

Use substring()

string.substring(start,end)

Answer 2

This should be relatively simple. My assumption is that, by default, the "close time" field isn't showing. But, when you start to put a value into the "open time" field, the "close time" field then shows up.

If that's the case, this should work for you.

JavaScript

const openTime = document.getElementById('merchant_working_hours_attributes_ID_open_time')
const closeTime = document.getElementById('merchant_working_hours_attributes_ID_close_time')
if (openTime.value.length > 0) {
  closeTime.style.display = 'block'
}