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 ×).
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 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]);
I have a form insite a modal. When the size of the window is small then everything is fine. If I maximise the window then the elements of the form are floating outside of the modal. I have checked all my css styling etc, but nothing seems to conflict. I have also set this up on JSFiddle, and it seems to happen and there aswell, with just JQuery and Bootstrap. Its seems to be something on my code but I cant figure out what. Could you please take a look on it and help me out?
http://jsfiddle.net/dsryycbq/
<div id="editPassword" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editPasswordlbl" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog modal-sm vertical-align-center">
<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="editPasswordlbl">Change Password</h4>
</div>
<div class="modal-body">
<form action="{{url_for('admin')}}" role="form" id="editPasswordForm" method="post">
<input type="hidden" name="formType" value="changePassword">
<div class="form-group">
<label class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Repeat Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<!-- Do NOT use name="submit" or id="submit" for the Submit button -->
<button type="submit" class="btn btn-default">Confirm</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You need to add the class .form-horizontal to the form element. This makes the .form-group's act as rows. Next to some margin, this adds a clearfix which stops the columns from "floating".
I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.
Here's what I have for relevant code so far:
HTML
<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
...
<p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
<label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
<button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
...
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<!-- Content here -->
</div>
<div class="modal-footer">
<button type="button" onclick="submitModal()" class="btn">Click Me</button>
</div>
</div>
</div>
</div>
...
</form>
JavaScript
function submitCheck(chkbox,error) {
if (document.getElementById(chkbox).checked == false) {
document.getElementById(error).style.display = "block";
} else {
window.location.href = "#myModal";
}
}
Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.
Any advice is welcome. Seriously, this is driving me nuts! >.<
I'll guess that you have JQuery...
Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
HTML
Open modal
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
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.