Question

0

How to add input elements into a form when clicking a button and how to process it in laravel?

rated 0 times [ 5] [ 5] / answers: 1 / hits: 5246 / 9 Years ago, sun, january 3, 2016, 12:00:00

I am currently trying to make a simple event management platform (eg: ticketmaster, eventbrite) with laravel 5.

So now i am trying to create the create event page, where people can input their event data on this page, and i want to show Add Ticket Button which will add an input forms automatically in the page without refreshing the page, so that the data typed in the previous fields wont be lost.

I don't know how to describe it in texts, so i'll try to explain it through the codes.

<form method=POST action=http://localhost:8888/event accept-charset=UTF-8 role=form enctype=multipart/form-data>



<!--

    This is the part where i put the event information input fields,

    and because it's very long and irrelevant to this question,

    i decided to not put it here.

-->



<div class='row'>

    <div class='col-md-12'>

        <div class=box box-primary>

            <div class=box-header with-border>

                <h3 class=box-title>Tickets</h3>

                <div class=box-tools pull-right>

                    <button class=btn btn-box-tool data-widget=collapse data-toggle=tooltip title=Collapse><i class=fa fa-minus></i></button>

                    <button class=btn btn-box-tool data-widget=remove data-toggle=tooltip title=Remove><i class=fa fa-times></i></button>

                </div>

            </div>



            <!--

                Below is the codes block i want to be automatically added when people click the Add Ticket Button.

            -->

            <div class=box-body>

                <div class=row>

                    <div class=col-xs-4>

                        <input name=ticket_name type=text class=form-control placeholder=Ticket Name>

                    </div>

                    <div class=col-xs-2>

                        <input name=ticket_qty type=text class=form-control placeholder=Quantity>

                    </div>

                    <div class=col-xs-3>

                        <div class=input-group>

                            <span class=input-group-addon>$</span>

                            <input name=ticket_price type=text class=form-control>

                            <span class=input-group-addon>.00</span>

                        </div>

                    </div>

                    <div class=col-xs-3>

                        <a class=btn btn-danger href=/organizer/>

                            <i class=ion-android-delete></i>

                        </a>

                    </div>

                </div>

            </div>

            <!--

                Above is the codes block i want to be automatically added when people click the Add Ticket Button.

            -->



            <div class=box-footer>

                <a class=btn btn-warning>

                    Add Free Ticket

                </a>

                <a class=btn btn-info>

                    Add Paid Ticket

                </a>

            </div>

        </div>

    </div>

</div>



<div align=center>

    <input class=btn btn-primary type=submit value=Create Event>

</div>



</form>

So this is some preview of what that codes looks like when people havent clicked the add ticket button:

View when button havent clicked yet

Then when people click the add ticket button, it will be like this:

View when button is clicked

I want to set the max rows into 5 rows, so when people have clicked the add ticket button more than 5 times, it will not add any new rows. And also when people click the delete button, it will remove the code blocks as well.

To create something like what i mentioned above, should i use ajax? or general javascript is enough? Which one is the best approach in my case?

And also how do i catch the data in the laravel controllers?

Thankyou very much, have a great day. :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kayden

Add To Favorites

Follow

Total Points: 546

Total Questions: 102

Total Answers: 95

Location: Virgin Islands (U.S.)

Member since Fri, Mar 4, 2022

2 Years ago

answered 9 Years ago stacied · Accepted Answer

You can create each row (let's call them components) programatically via javascript, inject them into some element inside a <form> and send the data via ajax. Let's say you have a javascript function to create the components. For sake of simplicity, each component is a set of <input type=text>.

function createTicketComponent(type) {

  type = type || null;



  var elements    = [],

      rootElement = document.createElement('tr'),

      price       = type === 'FREE' ? 0 : '';



  elements.push('<td><input type=text name=tickets[][name] /></td>');

  elements.push('<td><input type=text name=tickets[][qty] /></td>');

  elements.push(price === 0 ? type : '<td><input type=text name=tickets[][price]/></td>');

	

  rootElement.innerHTML = elements.join('');

  

  return rootElement;

}





function createFreeTicketComponent() {

  return createTicketComponent('FREE');

}





function onClickCreateTicketButton(event) {

  var button    = event.target,

      container = document.querySelector('#tickets'),

      component;



  if(button.classList.contains('free')) {

    component = createFreeTicketComponent();

  } else {

    component = createTicketComponent();

  }



  container.appendChild(component);

}





var buttonsGroup = document.getElementById('create-ticket-buttons');

buttonsGroup.addEventListener('click', onClickCreateTicketButton);

<form>

  <table id='tickets'>



  </table>

</form>



<div id=create-ticket-buttons>

    <button class='create-ticket free'>FREE TICKET</button>

    <button class='create-ticket'>PAID TICKET</button>

    <button class='create-ticket'>DONATION</button>

</div>

On the PHP side, just get the tickets as an array.

$tickets = $request->input('tickets');

# OR

$tickets = $_POST['tickets'];

Well, this is just an idea... and the code is nearly a pseudocode.

Anyways... I hope it helps.

UPDATED

First of all, you should add an id attribute in the .box-body element.

<div id='tickets' class='box-body'>

    <!-- all the .row elements will be here -->

</div>

Then, in the createTicketComponent function:

function createTicketComponent(type) {

  type = type || null;



  var rootElement = document.createElement('div');

      rootElement.setAttribute('class', 'row');





  var contents = '<div class=col-xs-4>

        <input name=ticket_name type=text class=form-control placeholder=Ticket Name>

      </div> ... ETC ETC ETC';





  rootElement.innerHTML = contents;



  return rootElement;

}

And finally, change the HTML where the buttons are placed:

<div id=create-ticket-buttons class=box-footer>

    <a class=btn btn-warning create-ticket free> Add Free Ticket</a>

    <a class=btn btn-info create-ticket>Add Paid Ticket</a>

</div>

Yes, you should use an array in the name attribute for each input field, so that in the PHP side you can get each one of them.

<input type=text name=tickets[][name]/>

<input type=text name=tickets[][qty]/>

<input type=text name=tickets[][price]/>