0

Alright for some reason I need to have an input field, which fills when a checkbox is ticked. The input field takes the value of the checkbox as input. After that I need to put the value in another input field which is readonly and is styled to NOT look like input (don't ask), but if the value is longer than the field, the text is partially shown.

Now I have seen some code, which helps in similar situations like here, but it helps only when text is entered in the field. I need it to change according to the already entered value.

I have this: 

<input type="checkbox" id="single_room" value="Single room"/>
<input type="text" name="single_room_input" id="single_room_input" style="display: none;">

The value is then submitted and processed with php and displayed again in the other input field:

<span class="text">
{$single_room_input}
</span>
<input class="overview-data" name="single_room_input" value="{$single_room_input}" readonly>

and if I use 

$(function () {
$('.overview-data').on('input', function () 
{ $('.text').text($('.overview-data').val()); });
});

It does not resize the input field unless you actually input something in.

If someone can please tell me if it is possible and if yes - how to do what I need to do I would be rally grateful.

Todor Inchovski
  • 77
  • 10
  • "The value is then submitted and processed with php and displayed again in the other input field" is unclear. Please include a working code snippet, where you can re-create the issue here, so it is crystal clear what your problem is. – pegasuspect Aug 08 '19 at 14:01

1 Answers1

1

So if I understand it correctly you have a checkbox that contains a value. When you click that checkbox an input field is filled with the value of the checkbox and also another READONLY input field is filled with that same value?

You could just do the following then:

$(document).on("click", "#single-room", function() {
 var checkboxValue = $(this).val();
 $("#single-room-input").val(checkboxValue);
 $("#your second input field id").val(checkboxValue)
//then do .css to style the length
});
Tom Truyen
  • 318
  • 1
  • 3
  • 15
  • The input fields are two, because when the first one is filled, it is then submitted. After the submit it is filled in the readonly input field and is submitted again. – Todor Inchovski Aug 08 '19 at 21:19
  • 1
    Try $(document).on('submit', "form" , function() This way if you submit it then you fill in the input + you check length of input and declare the width of that input field – Tom Truyen Aug 09 '19 at 06:52
  • Okay, I am an idiot. I made the second input invisible and just put its value in a label. now it shows fine... I guess sometimes you just have to not be retarded... Thanks for the tips, @Tom everything works as I want it to. – Todor Inchovski Aug 09 '19 at 09:53
  • Glad you found your problem :) – Tom Truyen Aug 09 '19 at 14:50