HTML/JQuery custom form

Question

at the moment I display data on a page that looks like the following

AB123   |  LHRLAX  |  J9  I7  C9  D9  A6   |  -0655 0910
--------------------------------------------------------
CF1153  |  LHRLAX  |  I7  J7  Z9  T9  V7   |  -0910 1305
--------------------------------------------------------
WF133   |  LHRLAX  |  Y7  T7  J9  T9  C9   |  -1500 2206

The way I output the data at the moment is like so (I use Twig and a for loop, so the below is only a representation of what I do)

<table class="terminalAvailability">
    <tr>
        <td class="flightNumber">{{ info.flightNumber }}</td>
        <td class="details">{{ info.from ~ info.to }}</td>
        <td class="seatClass">{{ seat ~ availability  }}</td>
        <td class="otherInfo">{{ info.other }}</td>
    </tr>
</table>

Now I don't want to change the look of this data, I almost don't want it looking like a form (I want it to look exactly the same). However, I need the seat ~ availability (J9, I7 etc) to be selectable. When one is selected, it should change colour. The user should be able to select as many seats/availability as they want. Other parts of the form should not be selectable, only the seat ~ availability.

What would be the best way to achieve something like this? I was initially going to use something like a checkbox, but this would change my look and feel which I dont want to do.

Any advice appreciated.

Thanks

Do you have any experience with any JavaScript libraries? In order to dynamically change the appearance of an element on an already loaded page, you're going to need JavaScript. A popular JavaScript library that I recommend is JQuery. — davetw12
– davetw12, Commented Mar 13, 2015 at 18:14
Would need to see the actual page source to determine how each of the seat ~ availability nodes are being displayed. — DevlshOne
– DevlshOne, Commented Mar 13, 2015 at 18:14

aahhaa · Accepted Answer · 2015-03-13 18:21:13Z

1

this just show you an idea, the code is incomplete please change it to your need.

<input type="hidden" value="" name="seatclass">

<table>
  ...
  ...
  <td data-seat="1"> seatclass 1</td><td data-seat="2"> seatclass 2</td><td data-seat="3"> seatclass 3</td>
  ...
</table>

JQUERY 

$('td').click(
    function() {
        $(this).css() // style change 
        $('input').val($(this).data('seat')); // put value to hidden form 
        // then submit hidden form. 
    }
)

answered Mar 13, 2015 at 18:21

aahhaa

2,2713 gold badges20 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

HTML/JQuery custom form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related