Form Input [ + ] dublēt elementu

[NMY]

laba diena! bakstos ar laravel 5.5. gribēju prasīt padomu, kā pareizi pievienot iespēju "klonēt <div><input/select>" fieldus? gribas, lai nospiežot [ + ] parādās identisks lauks un ar [ - ] lauks pazūd...

"npm run dev" strādā.

/js/app.js  1.23 MB       0  [emitted]  [big]  /js/app

/css/app.css   147 kB       0  [emitted]         /js/app

package.json: "jquery": "^3.2"

Ko man darīt? izskatās, ka man vajag pievienot custom.js failu ar savu jquery? kā to pareizi izdarīt? vai arī ir cits variants?

Var droši mani sūtīt uz iesācēju video-kursiem - laravel basics esmu redzējis. jquery saprotu. kā to pareizi pieslēgt - vēl mācos

@extends('layouts.app') 
@section('content')
    <h3>Jauns produkts</h3>
    <div class="well">
    {!! Form::open(['action' => 'ProductsController@store', 'method' => 'POST', 'class' => 'form-horizontal']) !!}
        <fieldset>
            <div class="form-group">
                {{ Form::label('name', 'Nosaukums:', ['class' => 'col-lg-2 control-label']) }}
                <div class="col-lg-4">
                    {{ Form::text('name', '', ['class' => 'form-control']) }}
                </div>
            </div>
            <div class="form-group">
                {{ Form::label('materials[]', 'Materiāls:', ['class' => 'col-lg-2 control-label']) }}
                <div class="col-lg-4">
                    {{ Form::select('materials[]', $materials, null, ['class' => 'form-control']) }}
                </div>
                <button name="plus" type="button" class="btn btn-sm btn-success">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
                <button name="minus" type="button" class="btn btn-sm btn-danger">
                    <span class="glyphicon glyphicon-minus"></span>
                </button>
            </div>
            <div class="form-group">
                {{ Form::label('processes[]', 'Process:', ['class' => 'col-lg-2 control-label']) }}
                <div class="col-lg-4">
                    {{ Form::select('processes[]', $processes, null, ['class' => 'form-control']) }}
                </div>
                <button name="plus" type="button" class="btn btn-sm btn-success">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
                <button name="minus" type="button" class="btn btn-sm btn-danger">
                    <span class="glyphicon glyphicon-minus"></span>
                </button>
            </div>
<!--            // Form submit-->
            {{ Form::submit('Saglabāt', ['class' => 'btn btn-primary']) }}
            <a href="/products" class="btn btn-default pull-right">Atcelt</a>
        </fieldset>
    {!! Form::close() !!}
    </div>
@endsection

 

[aaxc]

Pieauju, ka tev tā scripta include jaapievieno failā `\resources\views\layouts\app.blade.php`

[NMY]

Laikam sanāca

$("button[name=plus]").on("click", function(event){
    var $parent = $(this).parent();
    $parent.clone().insertAfter($parent);
});

 

[yozhis]

Iesaku pamēģināt vue.js. Būs ērtāk nākotnē, ja gribēsi, piemēram, input'us izdzēst.

https://jsfiddle.net/hrz52unh/

btw, Laravel 5.5 starter pakā ir uzlikts vue.js

[jurgenzz]

!vote react

Bet šādām super simple fīčām vilkt klāt fw nav nepieciešams :) pilnība pietiek ar jquery vai pat vienkārši js.

[NMY]

Parādījās jauns jautājums: https://laracasts.com/discuss/channels/tips/form-input-select-update-text-based-on-select

Edited January 17, 2018 by NMY

[jurgenzz]

https://codepen.io/jurgenz/pen/QaZBYL

[Alnis]

Pievienot un dzēst droplistus var šādi: https://jsbin.com/xozuloy/edit?html,js,output

[Kemito]

On 17/01/2018 at 10:38 AM, jurgenz said:

!vote react

Bet šādām super simple fīčām vilkt klāt fw nav nepieciešams :) pilnība pietiek ar jquery vai pat vienkārši js.

Un kas tad būtu jQuery Tavā izpratnē? :)

[jurgenzz]

3 hours ago, Kemito said:

Un kas tad būtu jQuery Tavā izpratnē? :)

Library :) 

Ok, react un vue arī ir "view libraries", bet tajā pašā laikā ir daudz tuvāk fw, jo tu beigās tāpat neizmanto plikus react/vue, savelc vēl klāt visādu citus libus un beigās lieto to visu kā fw :)

[yozhis]

On 1/17/2018 at 2:17 PM, NMY said:

Parādījās jauns jautājums: https://laracasts.com/discuss/channels/tips/form-input-select-update-text-based-on-select

https://jsfiddle.net/hrz52unh/2/

"Pietiek tikai ar jQuery" - btw, jQuery ir tik pat smags cik vue.js un ir ļoti nepiemērots šim uzdevumam.
p.s. Es neesmu Evan You, tikai parādu atriisnājumu savā stilā.

[jurgenzz]

Nepiemērots nodublēt elementu un pie tā izmaiņām paņemt mērvienību un kaut kur attēlot un vēl jo vairāk, kad jquery jau ir projektā? wtf

Vilkt iekšā view lib/fw ir nepiemēroti simple uzdevumiem.

Teorētiski piemērotākais ir @Alnis risinājums. Ir jāzin laiks un vieta, kad kaut ko lietot. Šaja gadījumā neredzu pilnīgi nekādu vajadzību lietot kādus react/vue/angular n friends priekš šādām elementārām darbībām. 

 

btw edit: Alņiem šodien vārda diena - sveicu

Edited January 19, 2018 by jurgenz

[NMY]

paldies par ieteikumiem ;)