I am new to ajax.
I have index.html
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"n.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
<div id="div1" style="margin-left: 25;"></div>
<button>Add Author</button>
n.php
Name:<input type="text" name="txtname">
age:<input type="text" name="txtage">
Simply i want to add name and age textboxes on index.html page when 'Add Author' button clicks without refreshing page.But above code loads name and age textboxes only once.I want it every time when button clicks.
Edit:
Now if I want to put another button 'remove author',and want to perform exact opposite action(i.e) remove both textboxes.what should i do? can u please help?
and want to know how can i check validation server side?
Please Help.
Change this
$("#div1").html(result);
to
$("#div1").append(result);
So everytime you click the button it will append the textboxes.
try the following:
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"n.php",success:function(result){
$("#div1").append(result);
}});
});
});
</script>
use append instead of html. append will add the response at the end of whatever content is present in the div wherease html will replace the present content.
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"n.php",success:function(result){
$("#div1").append(result);
}});
});
});
</script>
<div id="div1" style="margin-left: 25;"></div>
<button>Add Author</button>
Related
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();
......
What I want to do is simple in words but I have no idea how to actually do it.
I have a Div ID/Class given to a container in an HTML file.
Now I want to add a checkbox or button in a php file which can hide and show the div element on HTML file.
What I want to do:
Normally vislble to everyone.
I checked hide open and clicked submit.
Remove the container or change the visibility to none.
If i understood you right try this :
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
just change buttons to checkbox, and do some checking, if checkbox is checked make hide else show
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#showHide').change(function(){
var c = this.checked ? $("p").show() : $("p").hide();
});
});
</script>
<p>If you click on the "Hide" button, I will disappear.</p>
<input type="checkbox" id="showHide" name="showHide" value="Show">Check it
Use this Javascript (you don't have to use Jquery):
<script type="text/javascript">
function showHide(thediv){
id = document.getElementById(thediv).style;
id.display = (id.display != 'inline')? 'inline' : 'none';
}
</script>
Then define the div that you want to hide:
<div style="display:none" id="my_div">
Hello World or any other HTML
</div>
Now - set your radio button some where in your code, and trigger the show script upon click:
<input type="radio" onclick="showHide('my_div')" />
If you want the div to be shown as default, change to
<div style="display:inline" id="my_div">
Or just completely remove the style.
Because of my web style, i don't want to use input & textarea and get information by using $_POST[] and i need to get information that is in DIV element.
For example , I want to get information in this :
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
and :
$_POST[myname];
But i can't do it with $_POST , How can i do it ??
And if this method can't do this , do you know any other method to get information from DIV like this ?
you can call a onsubmit function and make a hidden field at the time of form submission like this
HTML
need to give a id to your form id="my_form"
<form action="submit.php" method="post" id="my_form">
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
<input type="submit" value="submit" name="submit" />
</form>
Jquery call on submit the form
$(document).ready(function(){
$("#my_form").on("submit", function () {
var hvalue = $('.mine').text();
$(this).append("<input type='hidden' name='myname' value=' " + hvalue + " '/>");
});
});
PHP : submit.php
echo $_POST['myname'];
You can use this method. First, with javascript get content of <div>
Code:
<script type="text/javascript">
var MyDiv1 = Document.getElementById('DIV1');
</script>
<body>
<div id="DIV1">
//Some content goes here.
</div>
</body>
And with ajax send this var to page with get or post method.
You would need some JavaScript to make that work, e.g. using jQuery:
$.post('http://example.org/script.php', {
myname: $('.mine').text()
});
It submits text found inside your <div> to a script of your choosing.
You can use following structure;
JS:
$(document).ready(function() {
$("#send").on("click", function() {
$.ajax({
url: "your_url",
method: "POST",
data: "myname=" + $(".mine").text(),
success: function(response) {
//handle response
}
})
})
})
HTML:
<div class="mine" name"myname">
this is information that i want to get and put into database by PHP !
</div>
<input type="button" name="send" id="send" value="Send"/>
You can see a simulation here: http://jsfiddle.net/cubuzoa/2scaJ/
Do this in jquery
$('.mine').text();
and post data using ajax.
Put the content of DIV in a variable like below:
var x = document.getElementById('idname').innerHTML;
I want after I type text in the textbox and click the button for that text to appear in the div above the form but I keep getting a php error undefined index: chattext
HTML:
<div class="chatdiv"></div>
<form id="chatform" action="chat.php" method="post">
<textarea name="chattext"></textarea>
<button>Send</button>
</form>
CHAT.PHP
<?php
echo $_POST['chattext'];
?>
JQUERY:
$(function () {
$('button').on('click', function(e) {
$.post('chat.php', $(this).serialize(), function(data) {
$('.chatdiv').html(data);
});
e.preventDefault();
});
}); // end ready
You are serializing the button:
$(this).serialize()
not the form. Change it to:
$("#chatform").serialize()
For future reference, when you're getting little issues like this, take a look at your web browsers developers tool, under network. It will show you what data is being posted to the web server.
You're not referencing the form in serialize(), the line should be:
$('#chatform').serialize()
You need to bind the event listener to your form in order to use $(this).serialize();
$('form#chatform').on('submit', function(e) {
I have a div with a form in it. After a user submits the form, I want to load new content into the div, replacing the form.
The new content will be static.
Do I need AJAX for this?
you don't HAVE to use ajax for this, after submitting the form you can issue a redirect to a static page without the form(post-redirect-get pattern).
But note that in this case the entire page will refresh while submitting,
and if the submit might fail from some reason(who said validation), hitting F5 will pop up the ugly "do you want to send crap..."
so no, you don't have to use ajax, but it is so easy with the form plugin that it is a crime not to.
if you do use the form plugin, then at the success callback hide the form with the static content
You do need Ajax: (I'll do it like SimpleCoder said, but with the ajax call)
$('#myForm').submit(function(){
var field1 = $("#field1").serialize(); // If this doesn't work just remove the serialize()
var field2 = $("#field2").serialize();
$.ajax({
type: "POST",
url : "???", //your processing page URL instead of ???
data: "&field1="+field1+"&field2="+field2,
success: function(){
$("#formHolder").html("Your static content");
}
});
});
( You should replace field1, field2 with your fields, and if it doesn't work, remove the serialize() function. )
All you have to do is .html() the static content in the success function of the ajax call.
Assuming your HTML looks something like this:
<div id="formHolder">
<form id="myForm">
...
</form>
</div>
Do something like this:
$("#myForm").submit(function(){
$("#formHolder").html("Your static content");
});
You can find an example of this here
https://www.write-about-property.com/seo-services/ the code to work on the form submit uses an instance of the object created in form.js
If you have a crack at it then come back we will help you perfect it for your purpose. You would put the div you wanted to update in the toupdate var
ajform.toupdate = $("#update")
you can simply make the divs invisible, and the submit button is just a button with js action to make the div visible
<script type="text/javascript" language="javascript">
function step2() {
document.getElementById('step1_container').style.display = 'none';
document.getElementById('step2_container').style.display = 'block';
}
function step3() {
document.getElementById('step2_container').style.display = 'none';
document.getElementById('step3_container').style.display = 'block';
}
</script>
...
<form action="validate.php" method="post">
<div id="step1_container">
PAGE 1 here
<input type="button" onclick="javascript:step2();" value="submit"/>
</div>
<div id="step2_container" style="display: none;">
Page 2 here
<input type="button" onclick="javascript:step3();" value="submit"/>
</div>
<div id="step3_container" style="display: none;">
Page 3 here
<input type="button" onclick="javascript:step4();" value="submit"/>
</div>
</form>
And so on
You don't need ajax, using only on-page javascript would be enough.
However, with ajax you can display the content from the page you're submitting the form to.
Try the jQuery From plugin for an elegant ajax solution:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm({
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
});
});
</script>