I have a form with four <input type='submit'/> buttons and action='updateEstado.php'. Also, I have some jQuery code that launches when I click a button.
<!-- CHANGE STATUS MODAL MENU -->
<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>
</div>
<form action="updateEstado.php" method="post">
<div class="modal-body">
<div class=" text-center">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:YellowGreen; color:white;" value="ACTIVAT">
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Tomato; color:white;" value="PENDENT MIQUEL ALIMENTACIÓ">
</div>
</div>
<div class="row ">
<div class="col-md-12 text center">
<input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:SkyBlue; color:white;" value="PENDENT ADDCOM">
</div>
</div>
<div class="row">
<div class="col-md-12 text center">
<input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT">
</div>
</div>
<div class="row">
<h5 id='codigosSeleccionados'></h5>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$('#cambiarestado').click(function(){
event.preventDefault();
// Get the value of the input fields
var inputvalue = $(this).attr("value");
// Send Ajax request to updateEstado.php, with value set as 'input' in the POST data
$.post("updateEstado.php", {estado: "DESACTIVAT", codigo: "38"});
alert(inputvalue);
});
</script>
I have updated the jquery code with this new line: event.preventDefault();
Now when I launch the updateEstado.php the console show this message:
If I delete this line: $.post("updateEstado2.php", {estado: "DESACTIVAT", codigo: "38"});
The show message disappear. It's clear this is the problem. The solution¿? I do not...
The submit button submits the form if it isn't blocked. You can block it with preventDefault().
for example:
$('#cambiarestado').click(function(event){
event.preventDefault();
...rest of your code ...
If you really want to submit the form via JavaScript, instead of the standard HTML form submit, you have to do several things:
add an onsubmit function to the form
use event.preventDefault() to cancel the normal form submit
get the values from the form
do a manual form submit via jQuery
BUT I think you want to do something far more trivial:
Submit two values, regardless of which option the user clicks.
The easiest way to archieve this, is to use hidden inputs:
<input type="hidden" name="estado" value="DESACTIVAT">
<input type="hidden" name="codigo" value="38">
If button type is submit, when you click in the button form will be submited to updateEstado.php without the values of $.post. You can submit the form with JQuery and send the data:
<form id="form" >
<div class="row">
<div class="col-md-12 text center">
<input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT">
</div>
</div>
</form>
Function:
$('#form').on('submit', function(e){
$.post("updateEstado.php", {estado: "DESACTIVAT", codigo: "38"});
});
Or, if you want to get the values of button:
<form id="form" >
<div class="row">
<div class="col-md-12 text center">
<input type="button" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT">
</div>
</div>
</form>
Note type is button, and this way form is not submited.
$('button').click(function(){
var inputvalue = $(this).attr("value");
$.post("updateEstado.php", {estado: inputvalue, codigo: "38"});
});
Related
I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click
By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}
I want to load content to a result div that is located inside a modal-body after form is submitted and after modal is shown but i can't figure out the problem. when i want to load content to a result div outside modal it works, but when i use the result div inside a modal it doesn't.
this is my code so far:
html:
<div class="col-lg-12">
<div class="row">
<div id="form-content">
<form method="post" id="reg-form" autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div id="monetarylayout" class="form-group">
<input class="form-control number" type="text" value="0" name="subjectvalue" id="txt_subjectvalue">
</div>
<div class="form-group">
<button class="btn btn-primary">submit</button>
</div>
<input class="form-control number" type="text" value="0" name="coinquantity" id="txt_coinquantity" style="display:none"> <!--just to make the form post work-->
</form>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">
<p>Some text in the modal.</p>
<div id="result"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
jquery:
<script type="text/javascript">
$(document).ready(function() {
// submit form using $.ajax() method
$('#reg-form').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'testcontroller.php',
type: 'POST',
data: $(this).serialize() // it will serialize the form data
})
.done(function(data){
$('#myModal').modal(), function() {
// do something when the modal is shown
$('#result').fadeIn('slow').html(data);
}
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
i figured out myself. i should have added these attributes to my form button:
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">submit</button>
and edited this function as follows:
.done(function (data) {
$('#result').fadeIn('slow').html(data);
})
On button click open Model like this
<i class="icon-note"></i>
Modal
<div id="edit-venue" class="modal fade portlet" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<form class="form-horizontal" id="editVenue" method="post">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Edit Venue Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3"><b>Venue12</b></label>
<div class="control-label col-sm-9 text-left">
<input id="venue" name="venue" class="form-control venue_name" placeholder="Enter venue" type="text">
<span class="error"></span>
<span class="error"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3"><b>Room/Stage</b></label>
<div class="control-label col-sm-9 text-left">
<input id="roomStage" name="roomStage" class="form-control" placeholder="Enter room/stage" type="text">
<span class="error"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn red">Cancel</button>
<button type="button" data-dismiss="modal" class="btn green btn_save">Save</button>
</div>
</div>
</form>
</div>
</div>
When I click on button open modal, I'd like to on click button fill up the data in perticular textbox using javascript dynamically.
on button click i got response like this {"id":67,"value":"venue 1","Xvalue":"venue 1"}
i tried to : $('#venue_name').val(msg.value);
but instead of #venue_name I want to use the closest().
How can I do this?
If I understand your question right, you want to set the value in the input box of model from the message.
You need to use the shown.bs.modal event of the modal.
var msg = {"id":67,"value":"venue 1","Xvalue":"venue 1"};
$('#edit-venue').on('show.bs.modal', function (e) {
$("#venue").val(msg.value);
})
JSFIDDLE : https://jsfiddle.net/01zrxq7y/1/
Boostrap Doc : http://getbootstrap.com/javascript/#modals-events
Below is model box and i am using it for login. When i click on button(both) page just reload it self. I checked in firebug and found something like this.
localhost\index.php?submit=Login
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form method="post" id="login" name="login" action="login_exec.php" role="form">
<div class="modal-content login-modal">
<div class="modal-header login-modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<font color="#288DCB"><h3 class="modal-titles text-center" id="loginModalLabel">AUTHENTICATION</h3></font>
</div>
<div class="modal-body">
<div class="text-center">
<div role="tabpanel" class="login-tab">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active text-center" id="emphome">
<span id="login_fail" class="response_error" style="display: none;">Loggin failed, please try again.</span>
<div class="clearfix"></div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i>
</div>
<input type="text" class="form-control" id="login_username" placeholder="Email Address" required="required">
</div>
<span class="help-block has-error" id="email-error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-lock"></i>
</div>
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<span class="help-block has-error" id="password-error"></span>
</div>
<input type="submit" value="Login" id="submit" name="submit" class="btn btn-primary">
<button type="submit" value=" Send" class="btn btn-success" id="submit" />
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
I am not able to find the reason why it is working like this. I tried button and input type but same result.
Here is my javascript code.
<script type="text/javascript">
$(document).ready(function () {
$("#login").on("submit", function(e) {
e.preventDefault;
alert("failure");
$.ajax({
type: "POST",
url: "logic_exec.php", //process to mail
data: $('form.login').serialize(),
success: function(msg){
$("#thanks").html(msg) //hide button and show thank you
$("#form-content").modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
I am using alert("failure"); to check my script is working on button click but it is not working. I think this event is not firing.
To get a modal to submit without reloading the entire page, the modal "submit" button needs to call javascript type="button" onclick="submitmyinfo();" instead of a submit. The javascript function can then use ajax to submit the information, if successful, you can do whatever you need, like close the modal.
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.