Sending variable through _POST on boostrap modal - javascript

Im making a timeline app in php that allows to add, edit and delete events. I wanted to use a modal to ask for confirmation and to test this function from boostrap, but then my problem happened, as i cant make it send a variable through a form.
this calls the modal for each event:
<button type="button" class="eliminarEventoModal" data-id="<?php echo $evento['id'] ?>" data-bs-toggle="modal" data-bs-target="#eliminarEvento">
this gets the $evento['id'] from before into #idEvento, i got from other post on this page related to modals, and i know it works
<script>
$(document).ready(function() {
$(".eliminarEventoModal").click(function() {
$("#idEvento").text($(this).attr('data-id'));
$("#eliminarEvento").modal("show");
});
});
</script>
this is the modal code. it ask if you are sure to delete or not. if not, the modal close and nothing happens, if yes, then push a form to editEvento.php (a diferent file where i use the modal) where the event is deleted.
<!-- Modal -->
<div class="modal fade" id="eliminarEvento" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="eliminarEventoLabel">Delete event</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Confirm delete event.</p>
<?php $idEvento='<span id="idEvento"/>'; echo "a".$idEvento."a";?> //<--- line to test if getting the right id only
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancelar</button>
<form class="col-md-auto needs-validation" method="POST" action="/editarEvento.php" >
<input type="hidden" name="borrar" value="borrar">
<input type="hidden" name="id" value="<?php echo $idEvento;?>"> //<--- line where it dont work
<button type="submit" class="btn btn-danger">Eliminar</button>
</form>
</div>
</div>
</div>
</div>
The form works with the borrar variable, but not with the id, but why? i need the id to delete the event, so i cant delete any. i have tried some other posts from this page, but i didnt get to work. i have no experience with javascript, im thinking my problem may be related misunderstading some part related to it.
--Edit: modal from page source
<div class="modal fade" id="eliminarEvento" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="eliminarEventoLabel">Eliminar evento</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Confirmar eliminar evento.</p>
a<span id="idEvento"/>a </div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancelar</button>
<form class="col-md-auto needs-validation" method="POST" action="/Aeberion/editarEvento.php" >
<input type="hidden" name="borrar" value="borrar">
<input type="hidden" name="id" value="<span id="idEvento"/>">
<button type="submit" class="btn btn-danger">Eliminar</button>
</form>
</div>
</div>
</div>
</div>

This is invalid HTML:
<input type="hidden" name="id" value="<span id="idEvento"/>">
The <> brackets in the value attribute are breaking the overall parsing. If you really want the value to be an entire HTML element, you need to HTML-encode the output:
<input type="hidden" name="id" value="<?php echo htmlentities($idEvento);?>">
Though it's not clear why you want the value to be an HTML element, because the information it contains is essentially meaningless and already known to you. But if that's the value you want it needs to be encoded so the HTML parser doesn't think it's part of the <input> element.
What it really looks like though is that this is the value you want:
$evento['id']
Which you assign to a <span> here:
$("#idEvento").text($(this).attr('data-id'));
However:
A <span> is not posted to the server as part of a form
You want the value, not an empty copy of a <span> element.
You already know how to find an element by its id and set a property on it:
$("#idEvento").text($(this).attr('data-id'));
So give your target element an id so you can set its value:
<input type="hidden" name="id" id="eventoModalId">
and:
$("#eventoModalId").val($(this).attr('data-id'));

Related

Put data-id value into form action

I have a button to pass data in an array.
<a data-toggle="modal" data-id='["id12345", "abdce"]' class="open-EditNetworkDialog btn btn-primary" href="#editForm">Edit</a>
When i click the button, runs the below javascript code into a modal with a form. My intention is to pass certain value to the form's input textbox. and also pass a value in action="".
$(document).on("click", ".open-EditNetworkDialog", function () {
var varAccountDetail = $(this).data('id');
$(".modal-body #network").val( varAccountDetail[0] );
$(".modal-body #name").val( varAccountDetail[1] );
});
I am able to send the value "abcde" to the form's input.
How do i replace the form action with the value "id12345"?
eg. <form action="id12345">
<div class="modal fade" id="editForm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit</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">Name: <input class="form-control" type="text" name="Name" id="name" value=""></div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
Welcome to the community..!
You can change the actions of form by using this single line of code.
$('form').attr('action', 'id12345');
id12345 can be changed with your variable, like this:
$('form').attr('action', varAccountDetail[0]);
If you want to edit your form action
$('form').attr('action', varAccountDetail[0]);
Just use attr to change the action of form tag
JS Code -
$('form').attr('action', '<Value that you want to put in action>');
In your case, it should look something like below
$('form').attr('action', varAccountDetail[0]);

pass javascript variable to modal popup form

On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.
$(document).on("click",".Change_Nodes",function(){
cmd_name = $(this).attr("id");
if(confirm("Sure to Update \""+cmd_name+"\" Command Executable Nodes?"))
{
$('#custom_script_modal').modal('show');
}
else
{ return false; }
}
); //update: removed extra curly brace
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>
</div>
<div class="modal-body">
<form method="POST" id="custom_script_modal">
<label class="control-label col-sm-4" for="cmd">List of Nodes</label>
<div class="col-sm-8 tab-pan fade in active">
<select size="3" name="popup_hostlist[]" id="popup_hostlist" class="dis_tab" multiple>
<?php
//-----------Database echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";
?>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info form-control">Update</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.
Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.
Check out the following JSFiddle and let me know if helps with your case:
(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

I am trying to make seperate edit and delete on my CRM model but could not figure out how to bind those buttons with my field

I am trying to make separate edit and delete on my CRM model but could not figure out how to bind those buttons with my field although I have created the API for this in angular I need a bit help.
Thanks in advance
below is a bootstrap code of the edit and delete buttons
<div id="delete_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Delete Department</h4>
</div>
<div class="modal-body card-box">
<p>Are you sure want to delete this?</p>
<div class="m-t-20 text-left">
Close
<button type="submit" class="btn btn-danger" >Delete</button>
</div>
</div>
</div>
</div>
</div>
<div id="edit_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" (click)="edit(list)">×</button>
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Edit Department</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Department Name <span class="text-danger">*</span></label>
<input class="form-control" value="IT Management" type="text">
</div>
<div class="m-t-20 text-center">
<button class="btn btn-primary btn-lg" (click)="edit(list)">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
1: declare a property in your component eg: department,which store the current operate department object on edit button clicked
2: bind the property of department to edit dialog template
3: remove role="dialog" from your dialog template(beacuse you need to do something before dialog open,you must open dialog by yourself)
4: in your edit dialog button click function, you set property 'department' value to store current operate department,and append this code $('#edit_department').modal('show')

How to restore data on edit form implemented by Bootstrap3 modal [duplicate]

This question already has answers here:
How to reset form body in bootstrap modal box?
(9 answers)
Closed 7 years ago.
I am working on a project which uses bootstrap3 to implement a modal containing edit form. I can display the modal and load original data into each input field by setting the value attribute. The problem is when I make some change and click Close button to cancel it. Then load this edit form again and see the content is what edited last time not the original one. I do not know how to restore it on clicking the Close button. Besides, where is the user input stored in modal?
Below is my code
<div class="span4">
<div class="panel panel-primary">
<div class="panel-heading">qawsedrftgDI</div>
<div class="panel-body">jhyuh</div>
</div>
<p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editItem2">Edit</button>
<input type="button" class="btn btn-default" value="Delete" onclick="javascript:deleteCategoryNoneItem(2);" />
</p>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="editItem2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Make Your Change</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" id="existingItem2">
<div class="form-group">
<label class="control-label col-md-2">Title</label>
<div class="col-md-8">
<input type="text" class="form-control" value="qawsedrftgDI" id="title2" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Content</label>
<div class="col-md-8">
<textarea rows="10" class="form-control" id="content2">jhyuh</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="changeExistingItem" onclick="javascript:modifyCategoryNoneItem(2);">Save changes</button>
</div>
</div>
</div>
</div>
</div>
See the documentation for Bootstrap modals. In the event section you can use "hidden.bs.modal" event to do some stuff after the modal is closed. So it can look like:
$('#myModal').on('hidden.bs.modal', function (e) {
$(this).find('input').val('');
});
From here you can specify "placeholder" attributes on input fields, or do some javascript in the event handler.

bootstrap modal crashing when setting value

In my website I'm trying to use bootstrap modal to ask for two values and get the middle of it. I have a button that when clicked, calculates the middle of the two values and sets a value I have declared in the modal-body code. It sets the value and then the modal disappears and the webpage reloads. Can you tell me what I'm doing wrong?
In the HTML, modal-body:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Get Middle.</h3>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="input-prepend">
<span class="add-on">$</span>
<input class="span2" id="lowSide" type="text">
</div>
to
<div class="input-prepend">
<span class="add-on">$</span>
<input class="span2" id="highSide" type="text">
</div>
<button type="submit" class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
</form>
<form class="form-inline"> <label>middle:</label> <input id="middle" type="text" /> </form>
</div>
</div>
The javascript function to set it:
function enteredRange(x,y)
{
var low=parseFloat(x);
var high=parseFloat(y);
var middle1=parseInt((low+high)/2);
middle.value=middle1;
}
I've also done
document.getElementById('middle').value=middle1;
in place of the middle.value=middle1 and gotten the same result.
Any idea on how I could set this up correctly?
You should get rid of the <form></form> elements, since you don't need them and they cause the page to redirect via form-post. I also removed some unnecessary closing divs. I don't know if rest of your code requires them. And finally cleaned your markup a bit.
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Get Middle.</h3>
</div>
<div class="modal-body">
<div class="form-inline">
<div class="input-prepend"> <span class="add-on">$</span>
<input class="span2" id="lowSide" type="text" />
</div>
to
<div class="input-prepend"> <span class="add-on">$</span>
<input class="span2" id="highSide" type="text" />
</div>
<button class="btn" onClick="enteredRange(lowSide.value,highSide.value)">Enter</button>
</div>
<br />
<div class="form-inline">
<label>middle:</label>
<input id="middle" type="text" />
</div>
</div>
</div>
<br />
<button id="btn">OPEN MODAL</button>
Here is the working code on jsFiddle.
Two things are happening here.
When clicking the submit button, the form is actually being submitted.
If no method is specified for a form it defaults to GET.
That's why you see the error.
You need to prevent the form submit. You could simply use onsubmit to do this:
<form class="form-inline" onsubmit="return false;">
I'm not advocating in-line JavaScript so here's a slighter nicer way; add an ID to the form and attach a click handler which prevents submit:
HTML:
<form class="form-inline" id="middle-calculator">
JS:
document.getElementById('middle-calculator').addEventListener('submit',function (e) {
e.preventDefault();
},false);
e here is for "event".
The working example (JSFiddle)
One other small thing... be careful when copying from the Bootstrap documentation. Always use HTML entities for special characters; the close modal icon should be × (or ×).

Categories