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]);
Related
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'));
I have a form where which has 2 submit buttons (Delete, Submit). If the user clicks on Delete button, I show a popover windows to confirm the action.
Look at Jsfiddle
HTML Form:
<form id="myForm" method="post">
<div class="form-row mb-3">
<button type="submit" name="bt" value="delete" class="btn btn-dark mr-3">Delete</button>
<button type="submit" name="bt" value="update" class="btn btn-primary">Submit</button>
</div>
</form>
<div class="modal fade" id="alertDelete" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header no-borderb">
<h5 class="modal-title" id="exampleModalLongTitle">Confirm Delete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer no-bordert">
<button id="cfmContinue" type="button" class="btn btn-primary">DELETE</button>
</div>
</div>
</div>
</div>
And the JS:
$('form').on("click", ":submit", function (e) {
var submitValue = $(this).val();
if (submitValue === 'delete') {
e.preventDefault();
$('#alertDelete').modal('show');
}
});
$('#cfmContinue').click("click", function (e) {
console.log("cfmContinue clicked");
$('#myForm')[0].submit();
});
However, in my servlet when I read the submit button I get null value
String submit = request.getParameter("bt");
System.out.println("submit = " + submit);
submit = null
I don't understand why I am getting NULL value.. I get normally all the other inputs of the form..
UPDATE
I found a workaround... I read the value of the submit button of the panel and I insert this value to a hidden input of my form and it worked..
<input name="btAction" type="text" class="form-control hidden">
$('#cfmContinue').click("click", function (e) {
var cfmContinue = $('#cfmContinue').val();
$("input[name=btAction]").val(cfmContinue);
$('#myForm')[0].submit();
});
However, I would like a lot to know why I my first approach isn't working... I think the problem is in the form and not in the server side...
For example there are three inputed sample and when I try to delete the second inputed sample it won't be deleted instead the third one will be the one is deleted. Another error is that if there will be one inputed sample left and I try to delete it then code will be error.
Modal Code
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title text-center" id="myModalLabel">Delete Confirmation</h1>
</div>
<form class ="delete" action="{{ action('ReservationController#destroy', ['id' => $reservation->id])}}" method="post">
{{ method_field('DELETE')}}
{{ csrf_field() }}
<div class="modal-body">
<p class="text-center">Are you sure you want to delete?
</p>
<input type="hidden" name="reservation_id" id="resid" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">No, Close</button>
<button type="submit" class="btn btn-danger">Yes, Delete</button>
</div>
</form>
</div>
</div>
Script Code
<script>
$('#delete').on('show.bs.modal',function(event){
var button = $(event.relatedTarget)
var resid = button.data('deleteid')
var modal = $(this)
modal.find('.modal-body #resid').val(resid)
})
</script>
Button code
<button type="submit" class="btn btn-danger" data-deleteid="{{$reservation->id}}" data-toggle="modal" data-target="#delete" >Delete</button>
Controller
$reservation = PropertyReservation::findOrFail($id);
$reservation->delete();
return redirect('/reservations')->with('success','Successfully Deleted');
Try this
<script>
$(document).on('show.bs.modal','#delete',function(event){
var resid = $(this).find('button[type="submit"]').attr('data-deleteid')
var modal = $(this);
modal.find('.modal-body #resid').val(resid);
})
</script>
I have the following DELETE button that I am passing $userid through the data-id
<a href='#myModal' class='trash' data-id='".$userid."' role='button'data-toggle='modal'>
Delete</a>
I have the following modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Delete
</div>
</div>
</div>
</div>
And the following JS which gets the value of the DELETE button
$('.trash').click(function(){
var id=$(this).data('id');
$('#modalDelete').attr('href','delete_user.php?id=' + id);
});
I am trying to set the value of the "href" in the modal so that it can be passed to a php page called delete_user.php which deletes the user from the database. Anyone see where I am going wrong? I cannot get the href to go to the delete_user.php
you have mistake here data-id='".$userid."' should be data-id='<?php echo $userid;>'
<a href='#myModal' class='trash' data-id='<?php echo $userid;>' role='button'data-toggle='modal'>
Delete</a>
and for better approach, get rid of click function, use modal event and let bootstrap handle the rest
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$('#modalDelete').attr('href', 'delete_user.php?id=' + id);
});
});
Fiddle
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 ×).