I have form to submit signon inside a modal. It is not allowing me to enter email and password. When I click on the form element it is closing.What am I doing wrong here.It is supposed to enter the email and password to submit
Form Modal
<div id="click_signin" class="modal New-Bouncing-popup" role="dialog">
<div class="modal-dialog bounce animated modal-ku">
<!-- Modal content-->
<div class="modal-content1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body row">
<div class="col-sm-6 left-side">
<h1>Surplus<br>Forex.</h1>
<p>Build your profitable forex career.</p>
<br>
<p>Login with social media</p>
<a class="fb" href="#" target="_blank">Login With Facebook</a>
<a class="tw" href="#" target="_blank">Login With Twitter</a>
</div><!--col-sm-6-->
<div class="col-sm-6 right-side">
<h1>Login</h1>
<p>Fill the below given fields to Login</p>
<br/>
<!--Form with header-->
<div class="form">
<div class="form-group">
<label for="form2">Your email</label>
<input type="text" id="form2" class="form-control">
</div>
<div class="form-group">
<label for="form4">Your password</label>
<input type="password" id="form4" class="form-control">
</div>
<div class="text-xs-center frm_grp">
Login
</div>
</div>
<!--/Form with header-->
</div><!--col-sm-6-->
</div>
</div>
</div>
</div>
Related
I have two button for modal and created two modal included in my blade file which I'm trying to use but it doesn't seem to work, I tried deleting the other button but doesn't seem to work, which I assumed to be the case
What could have been the reason for the modals not to show up?
this is my button modals
<td class="table-danger"><button id="aaaBtn" class="soldbtn btn-warning" data-toggle="modal" data-target="#soldModal{{$data->id}}">SOLD</button></td>
<td class="table-warning"><button id="bbbBtn" class="updatebtn btn-success" data-toggle="modal" data-target="#updateModal{{$data->id}}" >UPDATE</button></td>
<!-- Modal -->
<div class="modal fade" id="updateModal{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel{{$data->id}}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<img src="assets/images/rice.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="col-lg-12">
<div class="contact-form">
<form id="contact" action="{{url('/reservation')}}" method="post" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-lg-12 col-sm-12" align="center">
<h3>{{$data->title}}</h3>
<img height="200" width="200" src="productimage/{{$data->image}}">
<h5 class='m-2'>~ KILOS ~</h5>
</div>
</div>
<div class="row col-12">
#foreach($modal_data as $modal_data)
<div class="row sm-6 ml-4 mb-1" class="no-gutters" style="height:25px; width: auto;">
<p class='text-dark mr-2'><input type="checkbox" name="prod_kilos[]" value="{{$modal_data->kg}}" id="checkitem" class="check-cls"/> {{$modal_data->kg}}kg </p>
<p class='text-dark'>Qty:</p><input style="width:80px; height:25px;" type="number" name="prod_qty[{{$modal_data->kg}}]" min="1" value="1" max="{{$modal_data->warehouse_qty}}" class="form-control ml-2">
<input type="hidden" name="product_name[{{$modal_data->kg}}]" value="{{$modal_data->title}}">
<input type="hidden" name="product_fee[{{$modal_data->kg}}]" value="{{$modal_data->price}}">
<input type="hidden" name="prod_id[{{$modal_data->kg}}]" value="{{$modal_data->id}}">
</div>
#endforeach
</div>
<div class=" col-lg-12 mt-5">
<button name="submit" type="submit" id="form-submit" class="submit-btn" >ADD TO CART</button>
</div>
</form>
</div>
</div>
<script>
</div>
</div>
</div>
<!-- End Modal -->
What is the problem?
I think the reason why it is not working is because you set wrong data-target to the button:
<button data-target="#updateModal">UPDATE</button>
But when creating modal you use:
<!-- Modal -->
<div id="updateModalModal{{$data->id}}">
</div>
<!-- End Modal -->
Your data-target attributes does not correspond with each other.
How to solve?
The data-target attribute should point to an existing element in page, changing it to:
<button data-target="#updateModal{{$data->id}}">UPDATE</button>
<!-- Modal -->
<div id="updateModal{{$data->id}}">
</div>
<!-- End Modal -->
should solve the problem.
Hope it helps. Read more about it here.
I have a view made with bootstrap modal, but this form not send data to my controller. When print data from console I have only null values. My view is following:
modal-form
My code in the frontend is:
<!-- new modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<form th:action="#{/creconocida/addNew}" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="exampleModalLabel">Nueva
Comunidad Reconocida</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Código
único</span>
</div>
<input type="text" class="form-control" id="codigo"
name="codigoN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon2">Nombre</span>
</div>
<input type="text" class="form-control" id="nombre"
name="nombreN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">Número
familias</span>
</div>
<input type="number" class="form-control" id="numero"
name="numeroN" aria-describedby="basic-addon3">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Nacionalidad</label>
</div>
<select class="custom-select" id="nacionalidad"
name="nacionalidadN">
<option selected>Seleccione...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-primary mr-auto">Guardar</button>
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</form>
</div>
Add new method in controller
#PostMapping("/addNew")
public String addNew(ComunidadReconocida creconocida) {
System.out.println("Guardando comunidad "+creconocida.getNam_m());//get only null values
asentamientoService.addNew(creconocida);
return "redirect:/creconocida/listar";
}
I can create a new entity but I can't send the values entered in the form. How could I do to capture the values and pass them to the controller
Your problem is you are not indicates to Spring that you want a '#RequestParam'.
public String addNew(#RequestParam ComunidadReconocida creconocida)
After beating my head against this problem for 3 days, I think I finally narrowed it down to an issue with the bootstrap modal button. I have modal button popup that displays a partial view, and a select list within that. When I create it to a separate page, it displays with no issues:
dropdownlistworking
However, when I put the exact same code into my modal button view, the dropdown stops displaying my items except for the default:
dropdownlistnotworking
Here is the code on the modal button:
Main view:
<div>
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#addDoc">Add Doc</button>
<div id="addDoc" class="modal fade"">
<div class="modal-dialog" role="document">
<div class="modal-content">
#Html.Partial("_AddDoc", new Slingshot.Models.OrgDocsModel { OrgId = #Model.First().OrgId})
</div>
<div>
</div>
</div>
Partial:
<div class="modal-header">
<h4 class="modal-title" id="addDocLabel">Add Document</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" asp-action="_AddDoc">
<input type="hidden" asp-for="OrgId" />
<div class="form-group">
<label asp-for="DocName" class="control-label"></label>
<input asp-for="DocName" class="form-control" />
</div>
<div class="form-group">
<label asp-for="DocTypeName" class="control-label"></label>
<select asp-for="DocTypeName" asp-items="#Model.DocTypesList" class="form-control" >
</select>
</div>
<div class="form-group">
<input asp-for="UploadFile" class="custom-file-input" id = "OrgDoc">Choose File</input>
<label class="custom-file-label" for="OrgDoc" class="form-control"</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<button type="Submit" value="Submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
I'am new to laravel. I've a sort of Restaurant Management System's dashboard.
I am showing menu on a blade. By selecting Category from dropdown its showing list of Dishes. Each Dish Which contains Dish Ingredients and Dish AddOn as well. Now I've Edit Button on each dish's Ingredient which will show the Modal against specific Dish's Ingredient. The problem is when I click the edit button, Modal Popup and it shows the Last Dish's Ingredients rather than the Dish's Ingredient which is intended to Edit.
#foreach($items as $item)
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="menu-block">
<div class="menu-content">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="dish-img"><img height="120px" width="120px" src="{{asset($item['image'])}}" alt="" class="img-circle"></div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="dish-content">
<h5 class="dish-title">
<b>{{$item['name']}}</b>
<i class="ft-edit"></i>
<i class="ft-trash-2"></i>
</h5>
<h6><b>Ingredients:</b></h6>
#foreach($add_ingredients as $add_ingredient)
#foreach($dish_ing as $dish_in)
#if($item['id']==$dish_in->dish_id&&$dish_in->ingredient_id==$add_ingredient['id'])
<span class="dish-meta" >/{{$add_ingredient['name']}}</span>
#endif
#endforeach
#endforeach
<i class="ft-edit"></i>Edit
<button type="button" class="btn" data-toggle="modal" data-target="#ingredient"><i class="ft-plus-square" ></i>Add</button>
<h6><b>Addons:</b></h6>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<span class="dish-meta" >/{{$add_item['name']}} </span>
#endif
#endforeach
<i class="ft-edit"></i>Edit
Modal Section:
<div class="modal fade editaddon{{$item['id']}}" id="">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form class="form form-horizontal" method="get" action="">
#csrf
<div class="form-body">
<h4 class="form-section"><i class="ft-user"></i>Dish Addon form</h4>
<div class="form-group row">
<label class="col-md-3 label-control" for="projectinput6">Category Name</label>
<div class="col-md-9">
<select id="projectinput6" name="id2" class="form-control">
<option value="none" selected="" disabled="">Select Relevant Category</option>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<option value="{{$add_item['id']}}">{{$add_item['name']}}</option>
#endif
#endforeach
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
All I want is to Show the Specific Dish's Ingredient in the Modal When Editing.
Any help will highly appreciated
I have modified the snippet and added the modal box in the main foreach loop. Also i have removed the dot from the data target.
#foreach($items as $item)
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="menu-block">
<div class="menu-content">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="dish-img"><img height="120px" width="120px" src="{{asset($item['image'])}}" alt="" class="img-circle"></div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="dish-content">
<h5 class="dish-title">
<b>{{$item['name']}}</b>
<i class="ft-edit"></i>
<i class="ft-trash-2"></i>
</h5>
<h6><b>Ingredients:</b></h6>
#foreach($add_ingredients as $add_ingredient)
#foreach($dish_ing as $dish_in)
#if($item['id']==$dish_in->dish_id&&$dish_in->ingredient_id==$add_ingredient['id'])
<span class="dish-meta">/{{$add_ingredient['name']}}</span>
#endif
#endforeach
#endforeach
<i class="ft-edit"></i>Edit
<button type="button" class="btn" data-toggle="modal" data-target="#ingredient"><i class="ft-plus-square"></i>Add</button>
<h6><b>Addons:</b></h6>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<span class="dish-meta">/{{$add_item['name']}} </span>
#endif
#endforeach
<i class="ft-edit"></i>Edit
<div class="modal fade editaddon-{{$item['id']}}" >
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form class="form form-horizontal" method="get" action="">
#csrf
<div class="form-body">
<h4 class="form-section"><i class="ft-user"></i>Dish Addon form</h4>
<div class="form-group row">
<label class="col-md-3 label-control" for="projectinput6">Category Name</label>
<div class="col-md-9">
<select id="projectinput6" name="id2" class="form-control">
<option value="none" selected="" disabled="">Select Relevant Category</option>
#foreach($add_items as $add_item)
#if($add_item['dish_id']==$item['id'])
<option value="{{$add_item['id']}}">{{$add_item['name']}}</option>
#endif
#endforeach
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforach
I have a problem with FormValidation to validate a form in multi-tab (Bootstrap theme).When I click on submit button in #tab-1, formValidation work correctly. but when I change to #tab-2 or #tab-3, field validation in #tab-1 don't work and submit form without validation.
<form id="newstext" method="post" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-message="This value is not valid"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><i class="green ace-icon fa fa-home bigger-120"></i>tab-1</li>
<li><i class="red ace-icon fa fa-folder bigger-120"></i>tab-2</li>
<li><i class="blue ace-icon fa fa-exchange bigger-120"></i>tab-3</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">title *</label>
<input id="title" name="title" type="text" placeholder="" class="form-control"
data-fv-notempty="true"
data-fv-notempty-message="The title is required" />
</div>
<div class="form-group">
<label class="control-label">abstract </label>
<input id="abst" name="abst" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">name</label>
<input id="namee" name="namee" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">show</label>
<input name="show_callme" value="1" id="show_callme" type="checkbox">Ok
<input name="show_callme" value="1" id="shows" type="checkbox">Bold
</div>
</div>
</div>
</div>
<br>
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
Please see my code in Codepen
This example might be helpful: formvalidation.io/examples/bootstrap-tab
JQuery FormValidation Has solved the problem Validation
That by replacing the jquery, validation between tabs work
You can add "ignore" in validate function, this worked fine with me
$("#form").validate({
...
rules: {...},
messages: {...},
ignore: "",
...
});