I don't get why the modal is showing my html's body content when I submit an input instead of the result of php.
I tried debugging it,then i found out that the modal shows its own content when I add data-toggle and data-target to the input/form, but the problem is that the modal shows after I click on the input even before I can even type something,and even I managed to type something, the same problem still exists
Here's the form:
<form id="form_id" action="some_php.php" method="POST">
<input id="input_id" type="text" name="input_name">
</form>
Here's the script:
$(document).ready(function()
{
$("#form_id").submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
data: $("form_id").serialize(),
url: 'some_php.php',
success: function(data) {
$("#fetched-data").html(data);
$("#myModal").show('show');
}
});
return false;
});
});
Related
I am trying to get response trough ajax,my code (index.html) :
<button id="register">Register</button>
<p id="result">xxx</p>
<script>
$("#register").click(function(){
$.ajax({
url:'registration.php',
type: 'POST',
success:function(response){
$("#result").html(response)
}
})
})
</script>
and php (registration.php):
<?php
echo "yyy"
?>
I am working with xampp, I get response but it fades from page instantly. And again xxx is present inside p tag, does anyone know what is the reason why this happens.
Thanks
It appears that when you click the button to get your response, it also refreshes the page in your browser. You can try the following to prevent this:
<script>
$("#register").click(function(evt) {
evt.preventDefault()
$.ajax({
url:'registration.php',
type: 'POST',
success: function (response) {
$("#result").html(response)
}
})
})
</script>
This prevents your browser from doing what it normally does when you click a button.Any button inside <form>tags will automatically send a GET request within the current window, causing the page to refresh. The other alternative to preventDefault() is to use the attribute type="button" on your button and this will stop the button from being a type="submit" button.
You can read more detailed information about the function I've used here:
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
https://api.jquery.com/event.preventdefault/
Just prevent page before submitting.
<input type='submit' id='register'>
<div id='result'></div>
$("#register").click(function(e){
e.preventDefault();
$.ajax({
url:'registration.php',
type: 'GET',
success:function(response){
document.getElementById("result").innerHTML = response;
}
})
});
i searched a lot about this problem, but I didn't find a solution, yet.
At first a short description about my setup to make my problem clearer.
Settings.php Page with a Menu, where you can select different settings categories
By clicking on one menu point the corresponding loads by ajax and is displayed.
$('#content').load("http://"+ document.domain + "/domainhere/settings/menupoint1.php");
On the menupont1.php page I got a list with mysql data.
I implemented a "edit" button for each row - while clicking on the edit button, a boostrap modal appears with a form and the corresponding data filled in and ready to edit.
When i now click on "Save changes", the POST-Request is always empty.
To realize the form submit, I already tried several codes:
e.g.:
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
or
$(function(){
$('#editform').on('submit', function(e){
e.preventDefault();
$.ajax({
url: url, //this is the submit URL
type: 'GET', //or POST
data: $('#editform').serialize(),
success: function(data){
alert('successfully submitted')
}
});
});
});
At the moment:
while($xy= $xysql->fetch_assoc()) {
<div class="modal fade" id="edit-<?php echo $xy["id"] ?>" [..]>
<button id="submit>" class="btn btn-default">Save</button>
</div>
<script>
$(function() {
$('button#submit').click(function(){
$.ajax({
type: 'POST',
url: './test2.php',
data: $('form#modal-form').serialize(),
success: function(msg){
$('#test').html(msg)
$('#form-content').modal('hide');
},
error: function(){
alert('failure');
}
});
});
});
</script>
Maybe someone here could help me out with this problem?
thank you very much :)
I've set up a minimal example of how this would work:
example html of two modals, which are produced in a loop in your case.
I've now done it without a unique id, but with selecting via class.
<div class="modal">
<!-- // this classname is new and important -->
<form class="editform">
<input name="test" value="value1">
<button class="btn btn-default">Save</button>
</form>
</div>
<div class="modal">
<form class="editform">
<input name="test" value="value2">
<button class="btn btn-default">Save</button>
</form>
</div>
Your javascript would be something like this:
$(function() {
var formsAll = $('.editform');
// changed this to onSubmit, because it's easier to implement the preventDefault!
formsAll.on('submit',function(e){
e.preventDefault();
var formData = $(this).serialize();
console.log(formData);
// add your ajax call here.
// note, that we already have the formData, it would be "data: formData," in ajax.
});
});
Note, that I don't have your real html structure, so details might vary. But you get the idea.
also available here:
https://jsfiddle.net/a0qhgmsb/16/
Here I want to reset the appended data on click. So I can get the fresh data by removing the old data. Now actually data is coming, but the new data is getting appended with the old data which I need to remove.
$("#button").click(function(){
etc=$("#etc").val();
$.ajax({
url: 'db4.php',
type: 'POST',
data: {
etc: etc
},
error: function() {
$('#div1').html('<p>An error has occurred</p>');
},
success: function(data) {
var result = $.parseJSON((data));
$.each(result,function(i,field){
document.getElementById("div1").innerHTML=field.name;
$('body').append(document.getElementById("subasish123").innerHTML);
$('#subasish123').slice(0).hide();
});
}
});
});
<form>
<input id="etc" type="text" name="etc">
<label id="button">Click</label>
</form>
<div id="subasish123">
<div id="div1"></div>
</div>
Try redirecting your output to some other element instead of body.
Emptying the body of your HTML wouldn't be desirable.
Look at this fiddle for example:
jsfiddle.net
I have a PHP page included called 'leaguestatus.php'. This page allows the user to post a message/status update and the intent is to have only this part of the div refreshed; however, on submit, the entire page is reloaded.
In the current implementation I'm simply printing all the $_POST variables to the div so I can see what's coming through. The MsgText textarea DOES get posted, however, it's only after the whole page loads. I'm trying to get just the div and that included file to reload.
div id="statusupdates"><? include 'leaguestatus.php'; ?></div>
leaguestatus.php
<form id="statusform" method="POST">
<textarea name=MsgText rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>
<BR>
<BR>
<div id='formbox'>
<? print "<pre>POST Variables:<BR>";
print_r ($_POST);
print "</pre>";
$MsgText = $_POST["MsgText"];
?>
</div>
The jQuery I'm running in the header is:
$(document).ready(function() {
$("#statusform").submit(function(e) {
e.preventDefault();
var formData=$(this).serialize();
var pUrl="leaguestatus.php";
submitFormSave(formData, pUrl);
});
function submitFormSave(formData, pUrl) {
$.ajax({
url: pUrl,
type: 'POST',
data:formData,
success: function(response) {
$("#formbox").html(response);
}
}).success(function(){
});
}
});
Here are my includes:
html header
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
Edit: updated code to reflect use of #sazedul's response. Only issue now is on first click page acts as expected (no page refresh). On second click the entire page reloads. On third click we're back to normal.
Use this following code for ajax submit hope it will work.
$("#statusform").submit(function(e) {
e.preventDefault();
var formData=$(this).serialize();
var pUrl="leaguestatus.php";
submitFormSave(formData, pUrl);
});
function submitFormSave(formData, pUrl)
{
$.ajax({
url: pUrl,
type: 'POST',
data:formData,
success: function(response)
{
$("#formbox").html(response);
}
});
}
Made the following changes in your leaguestatus.php remembar to put double quote in the name="MsgText" in text area.
<form id="statusform" method="POST">
<textarea name="MsgText" rows=5 cols=40></textarea><BR>
<input type=submit value=Post id=uhsbutton>
</form>
<BR>
<BR>
<div id='formbox'>
</div>
<?php
if(isset($_POST['MsgText'])){
$message=$_POST['MsgText'];
echo $message;
}
?>
check for .load() like the code below....
$(document).ready(function() {
$("#statusform").submit(function() {
$("div").load();
});
});
You have to preventDefault of submit then other thing
so,you have to use e.preventDefault() to prevent submit.then do what ever you want
$("#statusform").submit(function(e) {
e.preventDefault();
......
I am using facebox to display a contact form, however when the user selects submit I would like the action which for this example I shall call action="contact_send.php" to also open in a facebox. Currently it is easy to open a link into a facebox by declaring the rel attribute as facebox
e.g.
Contact
This opens contact.html in a facebox window, I would however like the action of this form to also open in a lightbox, does anyone have any suggestions that might help?
thanks in advance
-Ashutosh
Your HTML FORM
<form id="contactfrm" method="post" onsubmit="return false;">
....your form elements
<input type="submit" onclick="submitContact();" />
</form>
EDIT :
Your Script
Now use jquery to submit form
<script type="text/javascript">
function submitContact() {
$.facebox(function() {
$.ajax({
data: { 'name' : $('#name').val(), 'message' : $('#message').val() }, //Make sure to change these values that reflects yours.
error: function() {
$.facebox('There was error sending your message.');
},
success: function(data) {
$.facebox(data); // the data returned by contact_send.php
},
type: 'post',
url: 'contact_send.php'
});
});
}
</script>
When you click submit button on your page, this code opens facebox and processes the variable you sent to contact_send.php page and returns the output from that page to the facebox.