Im new in vue js and trying to explore it. I have button and that button has an event click, once the button clicked, it will add an input field in my specific div.
Vue file
<div class="item form-group">
<div class="col-md-6 col-sm-6 ">
<button type="button" class="btn btn-secondary" #click="addSchedule"><i class="fa fa-plus"></i>Add Schedule</button>
</div>
</div>
<div class="item form-group added-schedule">
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add qqqqqqq</button>
s
</div>
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add asdasd</button>
</div>
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add wwwwwww</button>
</div>
addSchedule(e){
e.preventDefault();
return false;
},
Scenario
User clicked the Add schdule,imagine the 3 buttons is my input fields
NOTE: The user can Add Schedule as many as the user like.
Question: How do I append the input fields in my class added-schedule once the button clicked?
Related
I have modal to submit comment entered by the user. But when the user enters submit button, the form-backing-object reaches the post end point but the field entered using the modal is empty.
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Comment for approval</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
<input th:type="hidden" th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"/>
</div>
</div>
</div>
</div>
The place where modal is called is
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
The flow is: after the form is complete, the user clicks "Approve" button, which triggers the modal, the user then enters the comment and presses "Approve" (from the modal) and the form is submitted.
Could someone PLEASE suggest what is wrong here as I am not receiving just the processApproveComment (which is set using the modal) when other properties from the parent form are available.
The post endpoint is :
#PostMapping("/release/process")
public String releaseProcess(Principal principal,
Model model,
#ModelAttribute("answeredQuestionnaire") AnsweredQuestionnaire answeredQuestionnaire){
// answeredQuestionnaire does not have processApproveComment, but all others are available.
}
Update:
<div class="modal-body">
<form action="" method="post">
<textarea rows="5"
placeholder="Comment..."
th:field="*{processApproveComment}"
th:value="${answeredQuestionnaire.processApproveComment}"
class="form-control"
name="processApproveComment">
</textarea>
<button type="submit" formaction="/release/process" data-toggle="modal" data-target="#exampleModalCenter"
class="btn btn-info" role="button">
Approve
</button>
</form>
</div>
Because button tag not in form tag
Move button tag to form tag
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>
Is it possible to show data with button modal datatable from database inside textarea? My case is, the button modal inside datatable area, and when I click the button it appears modal and data inside textarea. This is my code :
->addColumn('detail', function ($data) {
$html = '
<div class="d-flex justify-content-center">
<button class="btn btn-light-success mx-2 btn-sm detail" '. $data->id .' ">
<i class="fa fa-search"></i>
Detail
</button>
</div>
';
return $html;
})
And this is a view :
<form action="{{route('accelerate-setting.submit_comment')}}" method="POST" class="load-form" enctype="multipart/form-data">
#csrf
<input type="hidden" name="id" value="">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Detail Comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form form-control" name="detail_comment" rows="6" disabled></textarea>
</div>
<button type="submit" name="action" class="btn btn-primary font-weight-bold btn-block" value="submit">Submit</button>
</div>
Thanks, hope u understand what my case is. I'm really confusing!
I have a button to remove "Remove registration type" to remove a registration type. When this button is clicked it shows a modal for the user to confirm that he wants to remove the registration type.
But its not working properly, for example for the conference in question there are 2 registration types (general and plus) and when the user clicks in the "Remove regisstration type" button either for the registration type "general" or "plus" the modal appear and the link for "yes" button is always the same, with the same registration type id, like "https://proj.test/conference/destroy/1/rtypes".
But it should appear "https://proj.test/conference/destroy/1/rtypes" in the modal relative to the registration type "general" and "https://proj.test/conference/destroy/2/rtypes" in the modal relative to the registration type "plus".
Do you know where is the issue?
<div class="form-group col col-lg-6">
<label for="registration_types">Registration types</label>
<div class="hide-first">
#foreach($registrationType as $rtype)
<div class="form-check">
<input {{ (old('radiobutton') && old('radiobutton') == $rtype->id) ? 'checked' : '' }} class="form-check-input radio" type="radio" name="radiobutton" value="{{ $rtype->id }}" id="{{$rtype->id}}">
<label class="form-check-label" for="exampleRadios1">
<span>{{$rtype->name}} </span><span><a data-toggle="modal" class="btn btn-sm btn-outline-light-gray"
data-target="#removeRtype">
<i class="fa fa-times" aria-hidden="true"></i> Remove registration type</a></span>
</label>
</div>
<div class="modal fade bd-example-modal-lg" id="removeRtype" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<div class="container">
<div class="row d-flex justify-content-center">
<p>Do you want to remove the registration type?</p>
<button class="btn btn-outline-primary" id="cancel_remove" href="#" data-dismiss="modal">No</button>
<a class="btn btn-primary ml-2" id="confirm_remove" href="{{route('rtype.remove', ['rtypeID' => $rtype->id])}}">Yes</a>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
I want to create a new post in my Database using modal box, and all works fine but when I use the button edit to update the post using modal dialog doenst work, I just want to take the cod('id') via a button from my view and pass to the modal.
the button code:
<a class="tip" id="test" data-toggle="modal" data-target="#myAlert2" title="Modifier">
and this is my code modal dialog
<div id="myAlert2" class="modal hide" id="modal-edit">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modifier un espace de travail</h3>
</div>
<div class="modal-body">
<p>
<div class="form--field">
<label class="labgroupe">Sujet *</label>
<input type="text" name="sujet" id="sujet" value="" class="form--element" placeholder="Sujet..." >
</div>
<div class="form--field">
<label class="labgroupe">Objectif du groupe</label>
<input type="text" name="objectif" class="form--element" placeholder="Objectif..." >
</div>
<div class="form--field" >
<label class="labgroupe">Plan d'action:</label>
<textarea class="form--element textarea" name="textarea" placeholder="Description..."></textarea>
</div>
#endforeach
</p>
</div>
<div class="modal-footer">
<input type="submit" value="Validate" id="button2" class="btn btn-success">
<a data-dismiss="modal" class="btn" href="#">Cancel</a> </div>
</div>
Any help plz ?
you cannot use 2 id's on the same div
<div id="myAlert2" class="modal hide" id="modal-edit">
changed to
<div id="myAlert2" class="modal hide">
and use same id on data-target="#myAlert2"
Modal button:
On your script, add this:
$("#test").click(function () {
$('#id').val($(this).data('id'));
});
Then add an input in the modal called #id.
<input type="text" id="id">