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) {
Related
I am trying to send my form values to php page in order to perform SQL requests to my server according to my form values. This is original php with form and ajax script:
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<form enctype="multipart/form-data" method="post">
<input type="datetime-local" name="start" id="start">
<input type="datetime-local" name="finish" id="finish">
<input type="checkbox" name="consta" id="consta" value="tru"> Remove const
<input type="submit" name="apply" id="apply">
</form>
<script>
$('#apply').click(function(){
var data= $('form').serialize();
$.post('gensetapply.php', data);
});
</script>
And in gensetapply.php I am trying to get variables through $_POST:
<?php
$con=$_POST['consta'];
$str=$_POST['start'];
$fin=$_POST['finish'];
echo $con.", ".$str.", ".$fin;
?>
So, I am sure my ajax request is not working.
I am new to this things and have wrote code above looking to similar examples, so please feel welcome to point out my mistakes. There might be a typo cause I am handtyping it again here, not copy-paste from source.
EDIT:
It was working, I just couldn't see it when i refresh the page, but through devtools in Chrome (Network>Response) I. Hope it'd help some other fools like me ;)
1st : Your using post method to post the data to server so you need to prevent the default submit
<script>
$('#apply').submit(function(e){
e.preventDefault();
var data= $('form').serialize();
$.post('gensetapply.php', data);
});
</script>
2nd : or Simple change the type="submit" to type="button".
Here 'Apply 'button type is submit. Therefore your form submits immediately. As you are handling form submission through ajax so the solution is you need to stop submitting form. You can fix it returning false in click event like following
<script>
$('#apply').click(function(){
var data= $('form').serialize();
$.post('gensetapply.php', data);
return false;
});
</script>
I am using ajax to post data on the same page and trying to echo posted data with php with following script.
$('button').click(function(){
$.ajax({
type: "post",
data: $("form").serialize(),
beforeSend: function(){},
success: function(data){alert(data)},
error: function(err) {alert(err.responseText);}
})
})
and php script is :
<?php echo isset($_POST['data']) ? $_POST['data'] :''; ?>
my html is:
<form>
<input type="hidden" name="data" value="to_success"/>
<button type="button">Click Me</button>
</form>
My problem is php does not echo posted data on page, but when i post form data on another php file which is same php script; php is able to echo posted data and ajax is alert that. please help me to resolve this issue. thanks
It's difficult to tell without seeing your entire PHP page as one listing, but from your description it sounds like your issue is either because of the way you are declaring your .click() event or the way you are posting to the page. The former is more likely.
The $.ajax() request will use an XMLHttpRequest object to POST to your PHP script. The PHP script should then take those values and generate the return string from the combination of the plain text in the script and the inserted echo'd values. This should then be received by the success method's callback function and alerted to your page as a blob of HTML text in the alert box.
Indeed, this is exactly what happens if I use the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
$.ajax({
type: "post",
data: $("form").serialize(),
beforeSend: function() {},
success: function(data) {
alert(data);
},
error: function(err) {
alert(err.responseText);
}
});
});
});
</script>
</head>
<body>
<?php echo isset($_POST['data']) ? $_POST['data'] :''; ?>
<form>
<input type="hidden" name="data" value="to_success"/>
<button type="button">Click Me</button>
</form>
</body>
</html>
However, if I comment out the lines for $(document).ready(function(){ and its corresponding end });, then nothing happens when I click.
So, try wrapping your .click() event definition in a $(document).ready().
var log = document.getElementById("log");
$(function(){
$('textarea').keypress(function(e) {
if (e.keyCode == 13 && !e.shiftKey) {
log.innerHTML += "Company<br>";
e.preventDefault();
var frm = this.form; // don't submit the form yet
log.innerHTML += "<br>";
$.ajax({
url: $(frm).attr('action'), // remember to specify which attribute you want
data: $(frm).serialize(),
dataType: "json",
success: function() {
log.innerHTML += "Ajax complete (form should be submitted now)<br>";
// submit the form when the ajax request is complete
// frm.submit();
}
});
}
});
});
<form action="#">
<textarea name="comment"></textarea>
</form>
<div id="log"></div>
I am trying to set up the script to where I can display the results within the input. Is there a way to display the results whatever the user puts in the textarea below?
log.innerHTML += "Company<br>";
.innerHTML seems to be acting like a basic paragraph of text. All I need is to be able to display a list of links that are going to be put in the input to save them. Is there a way I can use .text() for the textarea?
Any help is appreciated, thank you!
HTML:
<form action="#">
<textarea name="comment"></textarea>
</form>
<div id="log"></div>
JS:
$('textarea').on('focusout', function(){
$('#log').text($(this).val());
});
use $("#log").text("").append($("textarea").val());
Im going to be submitting url links within the form and each link has to be on a different line. It looks weird with all of them jamd together. Sorry lol
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 know this has been asked some time, but the solutions before did not help, and I do not understand if I am missing something
I have simple php/hmtl page with an index.php where I include the different content php pages with a simple GET check:
if (isset($_GET['section'], $section[$_GET['section']])) {
include $section[$_GET['section']];
} else {
include $section['home'];
}
Now one of these sections contains a form which I want to do some magical ajax/jquery action with.
In my javascript file which is loaded at the bottom of the index.php I have following jquery ajax stuff
//ajax load domain search script
$(document).ready(function(){
$('#lookup_domain').live("click", function(e) {
e.preventDefault();
searchVal = $('#domain').val();
topLevel = $('.custom_select').val();
domain = searchVal + '.' + topLevel;
$.ajax({
type: 'GET',
url: 'script_domain.php',
data: 'domain=' + domain,
dataType: 'html',
beforeSend: function() {
$('#result').html('<img style="margin-left: 80px;margin-top: 30px;" src="_assets/img/loader.gif" alt="loading..." />');
if (!searchVal[0]) {
$('#result').html('<p>Syötä domain nimi.</p>');
return false;
}
},
success: function(response) {
$('#result').html(response);
},
error: function(response) {
$('#result').html('<p>Haussa virheitä.</p>');
}
});
});
});
I thought it would be enough to use
$(document).ready(function(){
and the live method (i have jquery 1.7.1 so live should be working?)
$('#lookup_domain').live("click", function() {
but unfortunatedly this is not working, the form just sends it to itself and loads the page again.
Here is the form:
<?php
if(!defined('indexcalled')){die('Direct access not premitted');}
?>
<div id="domain_search">
<h5>hae verkkotunnusta</h5>
<form action="#" method="get" class="domain_form">
<input type="text" name="domain" class="domain_input" />
<div class="select_wrap">
<select class="custom_select">
<option value="fi">.FI</option>
<option value="com">.COM</option>
<option value="net">.NET</option>
<option value="me">.ME</option>
<option value="info">.INFO</option>
</select>
</div><!--/select wrap-->
<input type="submit" value="Syötä" class="domain_submit_btn" id="lookup_domain"/>
</form>
<div class="clear"></div>
</div><!--/domain search-->
What am I missing here? Is there any good documentation about how to use jquery with this kind of dynamical page setup?
EDIT
My original question was, how to handle these kind of elements properly with jquery, because they are included later on.
I found that I should be working with on() instead of live because its deprecated in 1.7 too. So I edited the code like this:
$(document.body).on("click", '#lookup_domain', function(e){
e.preventDefault();
$(document.body).on("click", '#domain', function(event){
alert($(this).text());
});
But the alert does not work, it does nothing. What am I missing here?
You're calling e.preventDefault(), which should keep the form from submitting, however you are not passing the event object into your click handler. Update it to this and it should work:
$('#lookup_domain').live("click", function(e) {
e.preventDefault();
...
});
Because you are using a submit button for your live click you need to disable the form submission.
There are two solutions:
1, Return false on the click event:
$('#lookup_domain').live("click", function() {
// all of your code
return false;
})
2, add an onsubmit attribute to your form:
<form action="#" method="get" class="domain_form" onsubmit="return false;">
</form>
Thanks for all guys who helped me in the chat, the correct method is to first have the document ready, then use .on() with click method with body to access the element created afterwards. Then just with normal .val() to get the values, like this:
$(document).ready(function(){
$(document.body).on("click", '#lookup_domain', function(e){
e.preventDefault();
searchVal = $('#domain').val();