I created a submit form with JS simply to post a variable to PHP:
entry.innerHTML= ' <form action="eLoad.php" method="post"> <input class="submitLink" type="submit" name="name" value='+uploaded[i][1]+'> </form>
It works but in my php i want to send back a variable to JS. I'm using Json but every time I submit, the form submits to my browser and ouputs the php file and echos whatever JS text I have on the browser. I want to redirect to another page after the php and the JS (json) in my php loads.
Any help? Thanks
Sounds like sending an AJAX request and redirecting on the callback function is what you need.
As suggested here, I also strongly recommend using an existing library.
To use jQuery for example, you'll first have to include it by adding:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Once you've done that and can use the library, try something like this:
$.ajax({
url: "eLoad.php"
}).done(function() {
window.location = <url-to-redirect-to>;
});
One last thing to mention, there are many useful params you can use when calling the jQuery's ajax function, take a look at http://api.jquery.com/jQuery.ajax/
What you are looking here is for async submition of forms, otherwise known as AJAX.
I suggest you adopt an existing library to do the boring part for you.
Visit this Lightweight JS AJAX library , you will need to use ajax as suggested, implementing and using jQuery will be the fastest way, but do go for other options like zepto.js, mootools, etc. Also if you want to build your own solution for your problems do a little research on xmlhttp, refer to this link https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
You wont have to write a lot of code to do this, but using readily available libraries wont hurt.
I recommend an AJAX solution. Take a look at the JQuery JavaScript library at http://api.jquery.com/jQuery.ajax/. With AJAX you can load content (and post forms) dynamicly into your webpage without refreshing the page.
Edit: Example code:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('submit', 'form#my-form', function() {
$.ajax({
type: "post",
data: $(this).serialize(),
url: "my_page.php",
success: function(response) {
alert(response);
}
});
});
</script>
Related
I've been looking over an older post trying to work out a solution for showing the confirmation PHP in a lightbox.
As my knowledge on javascript and ajax is close to zero - well, it IS zero - I'm hoping someone might elaborate.
<form method="post" action="contact.php">
Is the basic form method. Would I be able to use something like Tinybox2 and simply add
TINY.box.show({url:'submit.php',post:'id=16',width:200,height:100,opacity:20,topsplit:3})
to the action, rather than a php?
Cheers, Trin
If you want to use TinyBox, you need to serialize your form before you post it. One of the fastest and nonpainful way to do this to use jQuery (Just add reference if you haven't done this.)
TINY.box.show({url: $("form").prop("action"), post:$('form').serialize(),width:200,height:100,opacity:20,topsplit:3})
First one grabs the "action" url from your form, and the second method makes your form to be posted with TinyBox.
This code should display a tinybox when user submits the form:
$("form").submit(function( event ) {
event.preventDefault();
TINY.box.show({
url: $("form").prop("action"),
post: $('form').serialize(),
width:200,
height:100,
opacity:20,
topsplit:3
});
return;
});
Just put this inside
<script type="text/javascript">
$(document).ready(function () {
// Here.
}
</script>
block.
I have ajax calls made in jquery function which i call with onClick options placed on divs.
example:
<div class='basic' onClick='example( <?php echo numberIwant ?> )'> example </div>
and the functions than looks like this:
function example(ID){
$.ajax({
type: "POST",
url: "example.php",
data: "ID="+ID, success: function(msg){$("#main").html(msg);}
});
}
Now I want to make browser back button to work, to open the previous page(ajax content).
I googled and tried multiple scrips like ajaxify and history.js and so on but I just cannot get it working.
I don't know if I either don't know how to use ajaxify properly or if it just doesent work with this kind of method..
Can anyone help me?
Using the backbutton w/ AJAX has historically been a very common problem. Luckily, with HTML5 came history.pushState which sort of allows you to manually manipulate what the browser does during a navigation (e.g., backbutton).
Some good resources on this:
http://diveintohtml5.info/history.html
http://adhockery.blogspot.com/2011/02/javascripts-history-object-pushstate.html
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
I'm using jQuery plugin with $.ajax() functions.
There is some way to upload a file with POST and do some function when is it done?
here my code.... what i do wrong?
$.ajax({
url: "../index.php?rqst=upload",
type: 'POST',
data:{
'fileToUpload': $("#fileToUpload").val()
},
success: function(data) {
alert("file upload");
}});
and this is the file input:
<input class="form-control" type="text" name="fileToUpload" id="fileToUpload">
and there is a way to display a gif during the load???
thanks in advance
File uploads must be enctype='multipart/form-data' and you can't mix GET and POST like you're doing. Since this is POST, remove the ?rqst=upload from the url. Also $("#fileToUpload").val() is only going to give you the name of the file, not the actual file. You need a specialized javascript library to do file uploads with Ajax. Also, for a file upload, your input's type must be type='file' not type='text'.
It's much easier to use $.post() than $.ajax().
You have it almost right. Instead of success use complete.
Just before running $.ajax(), add some simple dom manipulation code that puts a spinning gif somewhere. Then in the success callback handler add code to remove it.
Also, there is a javascript library for making spinning loading icons: http://fgnass.github.io/spin.js/#!
firstly i would check you are able to connect to the file directly,
comment out your data section and the change the url to a page holding an echo only.
then if the page can be found connected to you will get the alert.
on another note ensure "index.php?rqst=upload" has an echo in it so the success function picks it up. i usually use echos within if else statements so i can see if an error occurs and what error, then i can use the js to display the necessary message
Recently I have been trying to get my page to be able to change the content with AJAX or similar, using Javascript and without redirecting.
I found on another question they claim it can not be done and you must use a hash.
However, here, it is being done so that leads me back to wonder how it is done.
Any ideas?
Thanks.
You have the html structure like:
<div id="navigation">
About Me
Other Stuff
</div>
And you Javascript Code would be:
$('#about').on("click",function(e){
e.preventDefault();
//do the ajax stuff.
});
$('#other').on("click",function(e){
e.preventDefault();
//do the ajax stuff.
});
other examples:
http://snipplr.com/view/6455/
I am trying to do a simple query for info from a database through an html page. I've got all the backend stuff working fine, but I'm having trouble on the client side. I currently have a form where the user submits their ID# to get some info on their case.
But with my current setup, it returns an entirely new page and I just want to read in a text string, process it and update the content on the current html page without opening up a new one and replacing the old one. How can this be done?
Here's my code so far:
function showInfo() { } // I want to make the request here instead
<form name="register" action="http://localhost:8080/testapp/authenticate" method="get">
<p><label for="badge">ID #:</label>
<input id="badge" name="ID" type="text" pattern="[0-9]{6}"
placeholder="xxxxxx">
<button id="checkButton" type="submit" onClick="showInfo()">Enter</button>
</p>
</form>
My guess is that you're actually submitting the form, which is posting back to the server. What you will want to do is cancel the form from submitting and submit it using AJAX (which is what I believe you want?).
To do so, your showInfo() function should do one of these three things (I can never remember which one)
return false;
cancel the event, something like e.preventDefault()
stop the propagation, something like e.stopPropagation()
Once you've successfully prevented the form from hard-submitting, you can then do what you'd like by submitting your data via AJAX and manipulating your response however you'd like.
1st - Jason is absolutely right that what you want for this situation is AJAX, below is an example in motion.
2nd - You should be using a Javascript library such as jQuery, which might look intimidating (as it did for me at first), but it is really easy and completely worth the small effort to get it going.
3rd - With jQuery, your application tidbits should look something like this, using the example you provided:
HTML -
<p>
<label for="badge">ID #:</label>
<input id="badge" name="ID" type="text" pattern="[0-9]{6}"
placeholder="xxxxxx">
// Please note that I removed the onClick section from the line below.
<button id="checkButton" type="button">Enter</button>
</p>
JQUERY -
// The default function you described to take information and display it.
function showInfo(data) {
// Insert your function here, probably using JSON as the Content Type
}
// This is the key AJAX function, using jQuery, that takes your info and gets a
// response from the server side, the sends it to the function above in order for it
// to be displayed on the page.
function processIdInfoCheck() {
$.ajax({
type: 'post',
url: '/http://localhost:8080/testapp/authenticate',
data: {
'id': $('#badge').val();
},
dataType: 'json',
success: displayIdInfoReturn,
error: function () {
alert("There was an error processing your request, please try again");
}
});
}
// When the page loads, the code below will trigger, and bind your button click
// with the action you want, namely triggering the AJAX function above
(function ($) {
$('#checkButton').bind('click', processIdInfoCheck);
})(jQuery);
Just remember, AJAX takes some effort to get the desired effect, but when you look at page load times, request numbers, etc... It is totally worth it. Please let me know if this was helpful and if you need any specifics.