i want to submit two actions with one form and one submit button in laravel 8 - laravel-8

In my app i want the user click on participate button to participate to an event and i want he will receive an email in the same time when he click !
The 2 function work well in the app but i can't make them in the same time when the user click on participate button !!
I have two routes with two different controllers:
Route::post('/participations/{id}','App\Http\Controllers\EventController#participate')->name('participate');
Route::post('/event/mails','App\Http\Controllers\EmailController#participate')->name('mails');
This is my form :
<form action="{{route('mails')}}" action="{{route('participate', [$event->id])}}" method="POST">#csrf
<div class="modal-body">
<div class="form-goup">
<label>Your name *</label>
<input type="text" name="friend_name" class="form-control" required="">
</div>
<div class="form-goup">
<label>Your email *</label>
<input type="email" name="friend_email" class="form-control" required="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Participate</button>
</div>
</form>
I can't find a way to fix that ! any help ?
Thanks in advance !

Related

Asking for help creating a "contact us" form on my Bootstrap 3 webpage

I have a simple 1-page website using Bootstrap 3 (yes, I know BS3 is old, but that's ok for now). My site is hosted on Hostmonster. My domain is registered with Google Domains.
I've never built a contact form from scratch before, but I understand the general principles.
I copied the code from this Bootstrap example website.
Something is clearly missing, but I'm not sure what. I'm pretty sure it needs "form" tags, along with "action" and "post" elements.
Basically, nothing happens when I click the send button.
For additional information, I do have a Drupal website set up under this same domain. It has a Drupal contact form, which does work, so I don't believe this is a problem on the server side. But Drupal doesn't let me see the actual html under the hood.
Can some kind soul please review this code and help me get the form working? This is the code exactly as I copied it from the link above.
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail#something.com</p>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>

Dropdown menu with textbox in angular5

I am new to angular 5. I need a help to add dropdown menu, when I select the contents in dropdown the search box should be displayed.
This is text box code.I need to put this in dropdown so that when I'll select A i need to get search text box for A. When i select module same text box should be displayed for module.
<div class="col-sm-1">
<label for="A">A:</label>
</div>
<div class="col-sm-3">
<input type="text" name="A" [(ngModel)]="A" class="form-control" id="A">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchA()">search</button>
</div>
<div class="col-sm-1">
<label for="module">MODULE:</label>
</div>
<div class="col-sm-3">
<input type="text" name="module" [(ngModel)]="module" class="form-control" id="module">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchModule()">search</button>
</div>
</div>
Instead of two search text boxes, I want use dropdown to display single search textbox.
Here is a short example of accomplishing it. (i ignored bootstrap for brevity)
It was possible, by declaring my dropdown value as a variable called "searchOption" and then using it as a condition for every search button.
Select
<select [(ngModel)]="searchOption">
<option value="A">A</option>
<option value="module">module</option>
</select>
<button type="submit" class="btn btn-primary" (click)="searchA()" *ngIf="searchOption == 'A'">searchA</button>
<button type="submit" class="btn btn-primary" (click)="searchModule()" *ngIf="searchOption == 'module'">searchModule</button>

Getting name of button clicked in POST

In Vue, I've tried naming buttons, but after the submit, the data isn't posted.
<div id="app">
<form ref="myForm" method="POST" v-on:submit.prevent="onSubmit($event)" action="/push" class="needs-validation" id="myForm" novalidate="true">
<div class="form-group">
<label for="cannedListLabel">Canned List</label>
<input v-model="cannedlist" ref="cannedlist" type="text" class="form-control" name="fileListFile" id="filelist"
:disabled="!!individuallist" v-on:submit.prevent="onSubmit" />
</div>
<div class="form-group">
<label for="pathListLabel">Path List</label>
<textarea v-model="individuallist" ref="cannedlist" :disabled="!!cannedlist" class="form-control" rows=10 name="fileListRaw" id="files"></textarea>
</div>
<div class="form-group">
<button v-on:submit.prevent="onSubmit($event)" type="submit" name="button1" value="submit" id="submitButton" class="btn btn-primary" :disabled="isDisabledButton">Submit</button>
<button v-model="clickedButton" v-on:submit.prevent="onSubmit($event)" type="submit" name="button2" value="checkOnly" id="checkOnlyButton" class="btn btn-primary" :disabled="isDisabledButton">Check Only</button>
</div>
</form>
</div>
The onSubmit function submits the form using this.$refs.myForm.submit(); If I change the type of the button from "submit" to "button", the submit() function no longer works, which I don't completely understand. Why is that, by the way?
As suggested, I change the type to button, and used the #click handler and while it does not work, here's changed diff:
<div class="form-group">
<button #click="onSubmit($event)" type="button" name="btn" value="submitButtonPressed" id="submitButton" class="btn btn-primary mb-2" :disabled="isDisabledButton">Submit</button>
<button #click="onSubmit($event)" type="button" name="btn" value="checkOnlyButtonPressed" id="checkOnlyButton" class="btn btn-primary" :disabled="isDisabledButton">Check Only</button>
</div>

bootstrap remove active class from radio type btn-group

I am creating a bootstrap btn-group that I want to give the user the ability to select one or no options from. Everything on the data end is working great except for the fact that I can not remove the active class from the button when the user turns it off.
<div class="btn-group" id="localRasterBG" data-toggle = "buttons">
<label class="btn btn-default localBaseMaps" id="btnLand Cover" data-layerName="Land Cover" onclick="rasterButtonClick(event)" >
<input type="radio" name="options" id="btnLandCover" autocomplete="off"> Land Cover
</label>
<label class="btn btn-default localBaseMaps" data-layerName="Elevation" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnElevation" autocomplete="off"> Elevation
</label>
<label class="btn btn-default localBaseMaps active" id="btnPopulation" data-layerName="Population" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnLandScan" autocomplete="off"> Population
</label>
</div>
However, I am unable to remove the "active' class with javascript:
function rasterButtonClick(e){
e.target.removeClass("active");
}
Any idea what I could be doing wrong?
Thanks, Tyler
removeClass is a jQuery function, you need to change it to:
$(e.target).removeClass("active");

upload a file using bootstrap uploader

I am using bootstrap file upload. My html code is give below
<div class="form-group">
<label>Video Name:</label>
<input class="form-control" placeholder="Video Name" id="vname" name="vname">
</div>
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" id="fileupload1" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
But when i look in Server side code in Request form there is vname value but files[] is empty. Please help how to get file data in server and save it on hard disk. Thanks
have you set the enctype attribute on the form to multipart/form-data?
<form enctype="multipart/form-data">