I page a page with several forms with buttons, like this:
<form name="openconfirm">
<input type="hidden" name="itemid" value="123">
<button type="submit" class="btn btn-sm btn-success ">Item 123</button>
</form>
<form name="openconfirm">
<input type="hidden" name="itemid" value="124">
<button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>
<form name="openconfirm">
<input type="hidden" name="itemid" value="125">
<button type="submit" class="btn btn-sm btn-success ">Item 125</button>
</form>
Each button should open a bootstrap modal with more info about the selected item (so the modal content should be loaded from a remote page which has been passed the itemid param using POST or GET ?)
I believe it should be something like this:
<script>
$(function(){
$('form[name="openconfirm"]').on('submit', function(){
itemid = itemid input from form; <- Not actual code
openModal(#myModal, "file.php?itemid=" + itemid); <- Not actual code
})
})
</script>
I hope you can understand what I need and provide me with some solution. I would be thankful if you could provide me actual code since I'm new to javascript.
I'm open to better alternatives from the one I've provided.
Many thanks
Try with this HTML markup
<button type="button" data-toggle="modal" data-target="#myModal" id="123" class="btn someclass">Item 123</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="124" class="btn someclass">Item 124</button>
<button type="button" data-toggle="modal" data-target="#myModal" id="125" class="btn someclass">Item 125</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">LOADED CONTENT</div>
</div>
</div>
and this jQuery
$(function () {
$('.someclass').on('click', function () {
var itemid = $(this).attr('id');
$(".modal-content").load("/file.php?itemid=" + itemid);
});
});
http://jsfiddle.net/3dSPw/1/
Currently, this doesn't load any new content because URL /file.php?itemid=123 it's not existent, but try it on your existing project.
Related
How can I pass the value of my "ACTIVE" status attribute to my textbox? My goal is to update the status of my user by pressing ACTIVE button. Knowing that the user status is pending. I can easily pass the userID, but I'm having a problem in regards of passing the status.
I have provided screenshot below.
Views:
<button data-id="<?php echo $rows->transID?>" ustatus="Active" class="showmodal" class="fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> active
</button> // I can pass the ID to my textbox easily, but the status is not working.
<div id="fundModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</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="#">
<div class="form-group">
<label for="">UserID</label>
<input type="text" id="usertransferid">
</div>
<div class="form-group">
<label for="">status</label>
<input type="text" name="status" id="user_status" value="">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('.showmodal').on('click', function(e){
e.preventDefault();
$('#usertransferid').val(this.dataset.id);
$('#fundModal').modal('show')
})
$('#fundModal').on('hidden.bs.modal', function () {
$('#usertransferid').val('')
$('#ustatus').val('')
})
</script>
<script type="text/javascript">
$(document).on('click','.user_status',function(){
var status = $(this).attr('ustatus');
//get attribute value in variable
$('#user_status').val(status); //I tried passing the user status but it's not working
});
</script>
Controller:
public function user_status_changed()
{
//get hidden values in variables
$id = $this->input->post('id');
$status = $this->input->post('status');
$data = array('status' => $status );
$this->db->update('users', $data); //Update status here
//Create success message
$this->session->set_flashdata('msg',"User status has been changed successfully.");
$this->session->set_flashdata('msg_class','alert-success');
return redirect('welcome/users');
}
You don't get the status updated, because you getting undefined with $(this).attr('ustatus');
That's because $(this) points to the class user_status, which doesn't have an attribute ustatus
What you want is the value of the attribute ustatus of your button, which has a class showmodal, so you need to change your code to:
$(document).on('click','.user_status',function(){
var status = $('.showmodal').attr('ustatus'); // check the change here
$('#user_status').val(status);
});
P.S: in your button definition, you are using class="..." twice, which is faulty. Just do:
<button data-id="<?php echo $rows->transID?>" ustatus="Active" class="showmodal fundTable btn btn-success btn-sm text-bold user_status">
<?php echo $rows->transID?> active
</button>
I am using mbd material design angular7 template. I have a set of tasks that has an edit button each. When i click on the Edit button a modal opens up. I want this modal to have the existing values of the field. I can be done through formControlName. But it is not happening.I click on the edit button and on that click function , i assign the values before opening the edit Modal. However, they don't fill the text boxes in the modal. In console it appears before i click the modal button. Please help
app.component.ts
openEditModal(taskIdValue:number){
console.log("Task Id Value = ", taskIdValue)
for(var i = 0 ; i<this.result.length ; i++){
if(this.result[i].taskId == taskIdValue ){
console.log("this.result[i] = ", this.result[i])
localStorage.setItem('editTaskId',this.result[i].taskId);
localStorage.setItem('editTaskName',this.result[i]. taskName);
}
}
this.editTaskId = localStorage.getItem('editTaskId')
this.editTaskName = localStorage.getItem('editTaskName')
$('#editModal').click();
this.displayEdit = true;
}
editTask(){
console.log("this.result.taskId", )
}
app.component.html
<td>
<button class = "btn btn-primary waves-light"
(click)="openEditModal(data.taskId)">Edit</button>
<button type="button" id = "editModal" style =
"visibility:hidden" class="btn btn-primary waves-light" data-
toggle="modal" data-target="#EditExample"
(click)="centralLarge.show()" mdbWavesEffect>
Edit
</button>
<div mdbModal #centralLarge="mdb-modal" class="modal fade"
id="EditExample" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
[config]="{backdrop: true, ignoreBackdropClick: false}">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Edit
Data</h4>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close" (click)="centralLarge.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" *ngIf = "displayEdit">
<div>
<div>
<form (ngSubmit)="editTask(editTaskForm.value)"
[formGroup]="editTaskForm">
<div class="form-group">
<label>Task Id : </label>
<input type="text" maxlength="100"
class="form-control" placeholder="Enter Task Id "
formControlName="editTaskId"
[formControl]="editTaskForm.controls['editTaskId']"
required>
</div>
<div class="form-group">
<label>Task Name : </label>
<input type="text" maxlength="1000"
class="form-control" placeholder="Enter Task Name "
formControlName='editTaskName'
[formControl]="editTaskForm.controls['editTaskName']"
required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-
secondary btn-sm waves-light" data-dismiss="modal"
(click)="centralLarge.hide()"
mdbWavesEffect>Close</button>
<button type="submit"
[disabled]="!editTaskForm.valid" class="btn btn-primary btn-sm
waves-
light"
(click)="centralLarge.hide()"
mdbWavesEffect>Save </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
You'd better use [(ngModel)] with your object maybe, your typescript code is not clear enough with the way you build editTaskForm, so I suggest to organize the code clearly, and step by step, you will get it working.
Greetz!
you can set the previous value by using this.formGroupname.patchValue({}), For example
this.form.patchValue({ fullname1: this.fullname1, });
I need help with the javascript. I'm trying to display a dynamic name inside the modal using multiple forms. Here is what I have, but it says "Are you sure you want to delete bob?" but I want it to display tom if I click on the delete tom button.
Forms:
<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="bob" />
<input type="hidden" name="delete_id" id="delete_id" value="45" />
<button type="button" name="btn" value="Delete" id="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" /><i class="fa fa-trash-o bigger-120"></i></button>
</form>
<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="tom" />
<input type="hidden" name="delete_id" id="delete_id" value="48" />
<button type="button" name="btn" value="Delete" id="submitBtn" data- toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" /><i class="fa fa-trash-o bigger-120"></i></button>
</form>
Modal:
<div class="modal fade" id="confirm-delete" 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 delete <span id="deletename_id">?
</div>
<div class="modal-footer">
<button type="button" id="cancel" class="btn btn-default success" data-dismiss="modal">Cancel</button>
Delete
</div>
</div>
</div>
</div>
Javascript:
<script>
$('#submitBtn').click(function() {
$('#deletename_id').text($('#username').val());
});
$('#delete').click(function(){
$('#formfield').submit();
});
</script>
First of all, you need to use submitBtn class, because you have two elements with same id.
Please try this:
$('.submitBtn').click(function() {
$('#deletename_id').text($(this).parents('form').find('input').eq(0).val());
});
Another method is to use this method:
$('#deletename_id').text($(this).parents('form').find('#username').val());
In both methods, you need to find the form which contains the button clicked and , then, you need to find the input.
$('.submitBtn').click(function() {
$('#deletename_id').text($(this).parents('form').find('input').eq(0).val());
});
$('#delete').click(function(){
$('#formfield').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="bob" />
<input type="hidden" name="delete_id" id="delete_id" value="45" />
<button type="button" name="btn" class="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border"><i class="fa fa-trash-o bigger-120"></i>Delete</button>
</form>
<form role="form" id="formfield" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="username" id="username" value="tom" />
<input type="hidden" name="delete_id" id="delete_id" value="48" />
<button type="button" name="btn" class="submitBtn" data-toggle="modal" data-target="#confirm-delete" class="btn btn-xs btn-danger tooltip-error no-border"><i class="fa fa-trash-o bigger-120"></i>Delete</button>
</form>
<div class="modal fade" id="confirm-delete" 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 delete <span id="deletename_id"></span>?
</div>
<div class="modal-footer">
<button type="button" id="cancel" class="btn btn-default success" data-dismiss="modal">Cancel</button>
Delete
</div>
</div>
</div>
</div>
If you want to make javascript unique then you need to think a bit dynamic like giving id in such a way that you can get different field data from different form with just changing a character while getting data.
What i want to mean is that as you can see in my code that I have appended '_1' and '_2' after your id's 'username' and 'delete_id'. Also I have used an advanced way of generating bootstrap modal. So that you don't need to write hole code by your self. You can get clear idea of this method from this link.
Now, note that upon clicking the button I have called a method in which i have passed an id. If that id varies then I can get name on that id.
For testing purpose copy past any form and change the digit after '_' in every id to your favourite digit and also put that in brackets after 'deleteForm' function call as a parameter.
function deleteForm(formid) {
var name = $('#username_' + formid).val();
console.log(name);
BootstrapDialog.show({
title: 'Confirm Submit',
message: 'Are you sure you want to delete '+name+' ?',
buttons: [{
label: 'Cancel',
action: function(dialog) {
dialog.close();
}
}, {
label: 'Delete',
cssClass : 'btn btn-danger',
action: function(dialog) {
// Do whatever you want to do here
console.log('Do whatever you want to do here');
dialog.close();
}
}]
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<form role="form" id="formfield_1" action="" method="post">
<input type="hidden" name="username" id="username_1" value="bob" />
<input type="hidden" name="delete_id" id="delete_id_1" value="45" />
<button type="button" name="btn" value="Delete" id="submitBtn_1" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px;height:30px;" onclick="deleteForm(1)" /><i class="fa fa-trash-o bigger-120"></i>
</button>
</form>
<form role="form" id="formfield_2" action="" method="post">
<input type="hidden" name="username" id="username_2" value="tom" />
<input type="hidden" name="delete_id" id="delete_id_2" value="48" />
<button type="button" name="btn" value="Delete" id="submitBtn_2" class="btn btn-xs btn-danger tooltip-error no-border" style="padding:5px; width:30px; height:30px;" onclick="deleteForm(2)" /><i class="fa fa-trash-o bigger-120"></i>
</button>
</form>
I'm trying to get the checkbox values into the div modals based on the corresponding button clicks. I'm unable to achieve it.
Desired result: The corresponding buttons should pass the checkbox values in the corresponding modal div and display them.
Thanks in advance.
$(document).ready(function(){
var favorite = [];
$.each($("input[name='sport']:checked"), function() {
favorite.push($(this).val());
});
$("button1").click(function() {
$("#myModal").modal('show').on('shown.bs.modal', function() {
$("#checkid").html("I play these games " +"<br>" + favorite.join("<br>"));
});
});
$("button2").click(function() {
$("#myModal2").modal('show').on('shown.bs.modal', function() {
$("#checkid").html("I dont Play these games " +"<br>" + favorite.join("<br>"));
});
});
});
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<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">
This are the Games that I usually play, and i'm really go at it:<br>
<p id="checkid"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<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">
This are the Games that I don't usually play, but would love to:<br>
<p id="checkid"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
Actually you have missed some # character in many place. try this:
$(document).ready(function(){
$("#button1").click(function() {
var p=$("#myModal1 #checkid");
$(p).html("I play these games ");
$.each($("input[name='sport']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
$("#button2").click(function() {
var p=$("#myModal2 #checkid");
$(p).html("I don't play these games ");
$.each($("input[name='sport']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
});
In HTML, change
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
to
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" >I play these games</button>
First of all you must rewrite your selector: $('#button1') instead of $('button1') and move the snippet
var favorite = [];
$.each($("input[name='sport']:checked"), function() {
favorite.push($(this).val());
});
and place it inside your click function, otherwise your favorite array will load only once, when the page finish loads.
I have a form inside a bootstrap modal that I want to submit via an Ajax request. I've followed along closely with this post. For some reason, I can't get the form to actually submit. Here's the HTML for my modal.
<div id="modal-close" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="modal-form-close" method="post">
<input type="hidden" name="event_timestamp" value="{{event.timestamp}}">
<input type="hidden" name="event_desc" value="{{event.desc}}">
<input type="hidden" name="status" value="closed">
<input type="text" name="resolution" value="">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
</div>
</div>
</div>
</div>
And here's my JavaScript:
<script>
$(function(){
$('#modal-form-close').on('submit', function(e){
e.preventDefault();
$.ajax({
url: '/events/edit/{{event.event_id}}/script',
data: $('#modal-form-close').serialize(),
type: 'POST',
success: function(data){
alert('successfully submitted')},
error: function(data){
alert('something went wrong')
}
});
});
});
</script>
With the javascript written this way, nothing ever happens when I press submit the form. However, if I change the function to .on('click'), things work as expected. What am I missing?
Found the answer here.
I needed to wire the "click" action back to the submit button.
$('button#submit').on('click', function(e){
And add an id=submit to the submit button
<button id="submit" class="btn btn-primary" data-dismiss="modal">Save changes</button>
It's amazing how far you can get copy-pasting code from stack overflow.
Try to add this type in your button
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="modal-close-submit">Save changes</button>
I do this:
give a form an ID <form id="submit_modal">
make a button type="button" and tells him what to do when click onClick="document.getElementById('submit_modal').submit();". So the submit button will looks like this :
<button type="button" class="btn btn-primary" onClick="document.getElementById('submit_modal').submit();">Submit</button>