Im trying to get data from inputs of modal and to submit into database. Form has also input fields that aren't inside modal. I wrote modal inside form but it keep going outsite it (Im watching in inspect element), so I can't get those data.
Is there any chance I make this working?
Pseudocode:
<form>
<label>Name</label>
<input type="text" name="Name" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Check students</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="checkbox" name="students[]" value="student1">
<input type="checkbox" name="students[]" value="student2">
<input type="checkbox" name="students[]" value="student3">
<input type="checkbox" name="students[]" value="student4">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- END MODAL -->
<button type="submit" class="btn btn-primary" id="main-btn">Create</button>
</form>
You should keep the tag open and close before the modal.
<form id="myForm1">
<label>Name</label>
<input type="text" name="Name" />
</form>
Then, add the attibute form to every input inside your modal.
<input form="myForm1" type="checkbox" name="students[]" value="student1">
Don't forget the submit button
[...]
<!-- END MODAL -->
<button type="submit" form="myForm1" class="btn btn-primary" id="main-btn">Create</button>
Any button inside form will automatically be considered as "submit" button
If the button is a submit button (it's inside/associated with a
and doesn't have type="button"), specifies how to encode the form data
that is submitted.
So i just added to the button that opens the modal the type="button" and it stopped from submitting the form.
Regarding the above answer - in my case the modal was outside the <form> already ... so i knew this wasn't it for me.
Related
I have two kinds of users in database (teacher / student)
How can i show some functions of my website ( button / review section )for teacher only and vice versa ?
i want to know the concept and any thing to help me
i got an error telling me that Undefined variable user while i am using the same query in another page
<div class="container">
<!-- Trigger the modal with a button -->
<button <?php if($user[0]['type']=="student")?> type="button" id="mah"
class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"
>Add Course</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Course</h4>
</div>
<div class="modal-body">
<form action="/action_page.php">
Name:<br>
<input type="text" name="firstname" value="">
<br>
Course Name<br>
<input type="text" name="Add_course" value="">
<br>
Course Link<br>
<input type="text" name="Course_link" value="...">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
i would suggest have a different section for teacher and the other for student . Using logic based on the names "teacher/student" the have different teacher adds marks , register student. while student view his enrollment .
Since the code is incomplete do a var_dump() on your array $user your can see if the value exist
I have a button that calls a modal form where the user can enter a name. I want the submit button in my modal to take that inputted string and append it as a parameter in a specific route. I can't find an example that shows how to get the modal input value into the route call.
Button code in view:
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
onClick="$('#myModal').modal()"
style="margin-top: 2px;">
New Name
</button>
Modal form code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper" style="width:50%">
<div class="modal-dialog vertical-align-center">
<div class="horizontal-alignment-helper">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Create New Plan</h4>
</div>
<div class="modal-body">Enter a name for your new plan and we'll do the rest...
<p></p>
<div class="form-group form-group-lg">
<label for="firstname" class="control-label"> Plan Name:</label>
<div>
<input class="form-control" type="text" id="lg">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create Plan</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Route I want the submit button to invoke:
Route::get('create-plan/{plan_name}', ['uses' => 'GeneratePlanController#createplan'])->middleware('auth');
How can I get the user input from the form control <input class="form-control" type="text" id="lg"> into the route call as the {plan_name} parameter?
I'm working in Laravel 5.5 and PHP 7 on XAMPP. My modal form works fine, as does the route/controller when manually called. Just need to wire the two together.
Thanks in advance.
You could possibly use javascript onclick event for this:
<button type="button" class="btn btn-primary" onclick="window.location.href = '/create-plan/'+document.getElementById('lg').value;">Create Plan</button>
I am trying to save data inserted from a modal. I have tried the script in localhost its works perfect. After upload to Production, The "note" field not save into DB table. But my hidden type='hidden' name='leaveID' manage to save in DB table. Not sure why? Please help...
Below is my view file..
<button type="button" class="btn-cs btn-sm-cs" data-toggle="modal" data-target="#myModal" data-html="true" href="#" id="modal"><span class="fa fa-pencil"></span> Note</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<form action="<?php echo base_url('leave/note'); ?>" id="formid" method="POST" >
<textarea class="form-control" id="note" name="note" ><?=set_value('note')?></textarea>
<input type='hidden' name='leaveID' value="<?= set_value("leaveID", $leave->leaveID) ?>" />
</div>
<div class="modal-footer">
<button type="submit" name="submit" class="btn btn-info " >Add Note</button></div>
</div>
</form>
<script>
$("[data-toggle=modal]").popover({
html: true,
content: function() {
return $('#modal-header').html();
}
});
</script>
</div>
</div><?php } ?>
Manage to solve the issue. Just has some permission issue.
Tomorrow I am presenting my code in sprint. Everything was working fine until a few hours ago. I have a modal which pops up when a user clicks on Edit. It was giving the values according to id.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div>
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
I am very upset and confused and don't know what to do.
Any help would highly be appreciated
Edit:
After reading the comments; i have understood that only one id would be updated every time. How could i change the id dynamically and update data of that specific id and each time it should get only clicked id.
Controller Function to update:
public function updateCommunity($id, CommunityRequest $request) {
$updateCommunity = Community::findOrFail($id);
$updateCommunity->update($request->all());
return back();
}
View Buttons:
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal">Edit</button>
| Delete</td>
</tr>
#endforeach
Update
I understand you have all the communities listed in a list somewhere outside this modal, each entry has an edit and delete button. Upon clicking edit button user should be presented a modal with a single form to edit community he clicked that button for. All this using a single modal element.
The fact that you don't want to use more than one modal means you want to generate less DOM in order to provide faster loading times, if that's the case then edit your view buttons.
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal" data-community="{{ json_encode($communities) }}">Edit</button>
| Delete</td>
</tr>
#endforeach
Notice new data-community attribute in edit button.
Now change your modal to provide a template for community edit form instead of providing a form for each community.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit: <span></span></h4>
</div>
<div class="modal-body">
<form class="form-group" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
Now what you need to do it listen to edit community button click event (the one from view buttons), get data-community object from it, open a modal and fill with to fit edited community.
search for $('modal-title span') and .html() community name into it
search for $('#editCommunityForm') and change it's action to \update\{community_id}
search for $('button[form="editCommunityForm"]) and on click send form using ajax
There are many other ways to do this, better ways, it's just a simple example on how you can make it work.
Original answer
How come your submit button is outside of foreach but in an image it is displayed after each form? Also you are closing <div> tag in a loop that you opened before that loop.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div> // You are closing a tag opened before foreach loop
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
After you fix this you can simply edit form id by adding $editCommunity->id to it, like so:
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
Then you can edit button's form parameter to match your form:
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button>
You should end up with this:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button><br /><br />
#endforeach
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
I'm trying to submit my contact form, send the data in an email with PHP, stay on index.html and open a bootstrap modal with a "Thank you" message.
All the other examples I've seen that might do this have used AJAX.
BUT I'd like to do it through PHP alone as my AJAX knowledge is non existent. Does anyone know if its even possible? and if so, how?
I've only included the last part that makes sure I return to index.html or displays the errors from the form submission
PHP from contact.php.
if(!$mail->Send()){
echo "Message could not be sent.";
echo "Mailer Error: " . $mail->ErrorInfo;
exit;
}
print '<meta http-equiv="refresh" content="0; url=index.html" />';
echo "<script>$('#myModal').modal('show')</script>";
HTML
<form id='contactus' action='contact.php' enctype="multipart/form-data" method='post'>
<fieldset>
<legend>Contact us</legend>
<div class='container'>
<label for='email' >Name*:</label><br/>
<input type="text" id="name" name="name" required /><br>
<label for='email' >Phone*:</label><br/>
<input type="text" id="phone" name="phone" required /><br>
<label for='email' >Email*:</label><br/>
<input type='text' name='email' id='email' required/><br/>
<label for='message' >Message:</label><br/>
<textarea rows="10" cols="50" name='message' id='message'></textarea>
<!-- MAX_FILE_SIZE must precede the file input field -->
<br>
<!-- Name of input element determines name in $_FILES array -->
Send this file: <input id="file" name="image" type="file" />
<input type='submit' name='Submit' value='Submit' />
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Thanks!</h4>
</div>
<div class="modal-body">
<p>Thank you for your message!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
here:
So if I get it right, on click of a button, you want to open up a modal that lists the values entered by the users followed by submitting it.
For this, you first change your input type="submit" to input type="button" and add data-toggle="modal" data-target="#confirm-submit" so that the modal gets triggered when you click on it:
<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
Next, the modal dialog:
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
</div>
<div class="modal-body">
Are you sure you want to submit the following details?
<!-- We display the details entered by the user here -->
<table class="table">
<tr>
<th>Last Name</th>
<td id="lname"></td>
</tr>
<tr>
<th>First Name</th>
<td id="fname"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
Lastly, a little bit of jQuery:
$('#submitBtn').click(function() {
/* when the button in the form, display the entered values in the modal */
$('#lname').html($('#lastname').val());
$('#fname').html($('#firstname').val());
});
$('#submit').click(function(){
/* when the submit button in the modal is clicked, submit the form */
alert('submitting');
$('#formfield').submit();
});
You haven't specified what the function validateForm() does, but based on this you should restrict your form from being submitted. Or you can run that function on the form's button #submitBtn click and then load the modal after the validations have been checked.
DEMO