We Keep Coding

Javascript to Post Inside a Div

I have this code bellow and I need it to make a post inside a div.
<script type="text/javascript">
$(function() {
$(".loader").click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#content').load($(this).attr('href'));
});
});
</script>
<form method="post">
some random inputs and checkbox's goes here
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
</form>
When submiting, the javascript is sucessfully loading the consulta_produto.php inside a div called "content", however, I need to adapt the script to make it possible to POST too
Someone at other topic said to Use $(".loader").parent("form").submit instead of $(".loader").click, however i didnt understood what he meant, I tried changing it in a lot of different ways, but none of them worked
I researched a few topics about how to post with javascript, but I could adapt none of them to keep the function to load consulta_produto.php inside the div "content"
So I wonder, how can I adapt my javascript to keep loading consulta_produto.php inside content div while posting the data from some inputs and check boxs?

First of all, you need to either:
Place all of your <script> code after the relevant HTML has been loaded, OR
Wrap it all in a $(document).ready(function() {...}); to achieve the same effect
Then, instead of executing code at your inputs click() event, you can do it upon your forms submit() event. (This is basically what you mentioned someone told you in another topic). I changed your submit input to a submit button, doesn't really matter.
So, instead of loading the href attribute, you load the action attribute of the form itself into the div.
Of course you want to submit actual data along with the form - no problem. You just use an AJAX method. This is in order to stop the page from reloading.
First you do the preventDefault() to stop the usual page reload. Then you initialize the $.ajax() method.
Data: The first parameter 'data' contains all the form data to pass
along.
Type: Represents the type of request (POST)
URL: This is the form action (/consulta/consulta_produto.php).
Success: Finally, the 'success' parameter contains a function
which loads it all into the specified <div>.
AJAX is essential when avoiding page reloads in PHP, play around with it!
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(event) {
event.preventDefault();
$.ajax({ //AJAX Method
data: $(this).serialize(), //Gets data from form
type: $(this).attr('method'), //Gets the method, in your case POST
url: $(this).attr('action'), //Gets the form action
success: function(r) {
$('#content').html(r); //Loads data into div
}
}); //End of AJAX Method
}); //End of form submit event
});
</script>
And here is your HTML:
<div id="content" style="width:100%; height:500px; ">
</div>
<form id="form" action="/consulta/consulta_produto.php" method="post">
some random inputs and checkbox's goes here
<button type="submit">Consultar<button>
</form>

JQuery / AJAX: On Input Field change, create php session, and refresh current page

I have two input fields. One is for show called business and the other is hidden called auto_search_id and goes to server. I have already created an autocomplete functionality. What I want to do is if the user starts typing and decides to click on an autocomplete list item which has already stored businesses, the page takes the id, sends it to update.php page to update the PHP Session id, and then refreshes the page with the current Session id.
Having problems figuring out the correct AJAX coding. My change function for the input field is not working. It pulls up the autocomplete, but when an auto complete list item is clicked, it doesn't send the id and refresh a page. I still new to JQuery/AJAX, but think I am missing something in the on #auto_search_id change function but not knowing what. Please Help...
Javascript / JQuery / Ajax
<script>
$(document).ready(function(){
$("#business").autocomplete({
minLength: 2,
source: function(request, response){
$.ajax({
type: "POST",
url: "/autocomplete-pq.php",
dataType: "json",
data:'keyword=' + request.term,
success: function(data){
response(data);
}
});
},
select: function(event, ui){
$("#business").val(ui.item.label);
$("#auto_search_id").val(ui.item.value);
return false;
}
});
$("#auto_search_id").change(function(){
$.ajax({
type:'POST',
url:"/update.php",
data: { varname: reponse},
success:function(response){
location.reload()
}
});
});
});
</script>
PHP
<?php
session_start();
$_SESSION["id"] = $_POST["varname"];
echo $_SESSION["id"];
?>
HTML
<input type="text" id="business" name="jurisdiction" value="<?php echo $juristiction ?>" required>
<input type="hidden" name="search" id="auto_search_id" />

I cannot reproduce the code but i see 2 things being wrong:
1 Calling $("#auto_search_id").val(ui.item.value); actually sets a new value of an input, however it does not trigger it's change event. You should trigger it like so:
$("#auto_search_id").val(ui.item.value).trigger("change");
2 You are trying to send a response (which is not available yet) to the server. A assume you want to send the hidden field value to the server.
$("#auto_search_id").change(function(){
var newID = $(this).val();
$.ajax({
type:'POST',
url:"/update.php",
data: {varname: newID},
success:function(response){
location.reload()
}
});
});

First you need the check if the change event is been called. Put an alert inside it. To maintain session, you need to pass it's id calling the parameter PHPSESSID, but it has some security implications, please read: http://php.net/manual/pt_BR/function.session-id.php

How does "Add Comment" javascript/AJAX work on stackoverflow?

I was just looking at the code in firebug and I can't follow it. I can't figure out how clicking "add comment" calls the jquery function that shows the comment form. On my site I am trying to mimic this behavior. I have a registration form and I want a link such as "Fill in my data" which then displays a text input below the link where they enter a code, and then a submit button that through AJAX populates the fields. I am new to js and AJAX, but am a quick learner so I was hoping to get some clarity here on the details of implementation. Seems to me the displaying of the input field should not be AJAX, but just js. And then submit would trigger the AJAX function. I know AJAX is fairly involved, in terms of having to create an xml that describes the server side data that needs to be collected and then somehow submit button will trigger call to server side php script or something. Conceptually I understand, but mechanically I don't... Thanks! Brian
I just tried implementing as described, but the url is not triggering the js. Here is what I have:
<script type="text/javascript">
$(function(){
$(".previousreg-link").on("click", function( event ){
event.preventDefault(); // Prevents browser following #hash
$(this).hide(); // hide the button
$(".previousreg-form-container").show(); // Show the form parent
});
$(".previousreg-form-container form").on("submit", function( event ){
event.preventDefault(); // Don't send headers
alert( $(this).serialize() +"\nWILL BE SENT TO PHP" );
// $.ajax stuff
});
});
</script>
<a href=# class=previousreg-link>Use previous registration data</a>
<div class="previousreg-form-container dno">
<form>
<textarea name=previousreg></textarea>
<input type=submit>
</form>
</div>
Because my site already loads jquery I didn't add the script declaration for jquery. Is anything above obviously wrong? Thanks.

Here in StackOverflow, the form is already present, but hidden initially (to save valuable space).
(StackOverflow uses a .dno class to hide elements.)
The click on the add a comment button does simply:
hide the clicked add a comment button
show the DIV holding the form
A simple way to do it:
$(function(){
$(".comments-link").on("click", function( event ){
event.preventDefault(); // Prevents browser following #hash
$(this).hide(); // hide the button
$(".comment-form-container").show(); // Show the form parent
});
$(".comment-form-container form").on("submit", function( event ){
event.preventDefault(); // Don't send headers
alert( $(this).serialize() +"\nWILL BE SENT TO PHP" );
// $.ajax stuff
});
});
.dno{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href=# class=comments-link>add a comment</a>
<div class="comment-form-container dno">
<form>
<textarea name=comment></textarea>
<input type=submit>
</form>
</div>
Regarding the $.ajax
since by submitting the form we don't want the page to refresh, AJAX is used to POST data to a PHP (let'ssay: saveComment.php page) which than stores to database. AJAX returns than a message response from the PHP code:
$.ajax({
type : "POST",
url : "saveComment.php",
data : $(this).serialize(), // `this` is our form
success : function( response ) { // Response is the PHP echo
alert("PHP says: "+ response);
// Using jQuery append the message to
}
});
The PHP stuff
in the code above AJAX will POST a serialized data to PHP like:
comment=Please, show what you tried!
The saveComment.php than might look like:
<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST') exit; // Don't allow anything but POST
$response = "";
if ( isset($_POST["comment"]) ) {
$commment = htmlspecialchars( $_POST["comment"] );
// TODO: $userId = retrieve here the user ID from the session;
// Sanitize(!!!!!) and save to database $comment and $userId
$response = $commment;
} else {
$response = "Please, enter a comment";
}
echo $response; // This will be sent/returned to AJAX
exit;
above, whatever you put in the echo, it will be returned by AJAX into the response argument.

Open new Tab or Window with POST [PHP]

This is the situation: I have 2 files, reportCaller.php and report.php. From the reportCaller.php, the user is going to press a button with the method "onclick", this will call the function that is going to do the ajax/post stuff (this is with what im having problems), report.php is going to catch some parameters by POST and has to be opened on a new Tab or Window, this is going to display a report. (Note: May be not important, but im using HTML2PDF).
reportCaller (HTML):
<input type="button" onclick="generateReport()">
reportCaller (JS):
function generateReport(){
var id = '¡I must reach the report FILE!';
//I tried a couple stuff, but didnt work, this is one:
$.ajax({
type: "POST",
url: "report.php",
data: {id:id},
cache: false,
success: function (html) {
myWindow = window.open(encodeURIComponent(true),
"_blank");
myWindow.focus();
});
}
report:
$id = $_POST['id'];
//This file (report.php) must catch $_POST, will not help if i only open the file in a new Tab/Window
Thanks for reading.

This is more of a comment than an answer, but I haven't got the reputation ;-)
take a look at
Javascript Post on Form Submit open a new window
the trick is to put your button in a
<form target="_blank">
Element and then send that form..
You could do your processing of data in the onsubmit Handler

any way to stay in the same location when refreshed

i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>

Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

Presuming that you're using Ajax to change your page states, why not look at something like History.js?