This is my HTML PAGE
I want to send some values with ajax then I want to get them with ajax response but I can't see any character in my div which called with id=result . Where is the problem?
<html>
<head>
<!-- JQuery v1.8.2 -->
<script src="theme/scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="span4">
<input type="text" id="title"/><br>
<textarea rows="10" cols="50" id="content"></textarea><br>
<input type="submit" id="gonderBtn" name="gonderBtn" />
<div id="result"></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#gonderBtn").click(function(){
var title = $("title").val();
var content = $("content").val();
$.ajax({
url: "deneme_action.php",
dataType: "html",
type: 'POST',
data: {
title: title,
content: content
},
success: function(data){
$("result").html(data);
}
});
});
});
</script>
</body>
</html>
deneme_action.php
<?php
if(isset($_POST["gonderBtn"])){
$result = "Sonuc:".$_POST["title"];
echo "Selam:".$result;
}
else{
echo "no post";
}
?>
Because you don't have a tag with class="result" but you have a tag with id="result".
Either change the jQuery selector to:
$("#result").html(data);
Or the div tag to:
<div class="result"></div>
and selector to:
$(".result").html(data);
And you are not sending gonderBtn with the POST - fix it too:
$("#gonderBtn").click(function(){
var title = $("#title").val();
var content = $("#content").val();
var gonderBtn = $(this).val();
$.ajax({
url: "deneme_action.php",
dataType: "html",
type: 'POST',
data: {
title: title,
content: content,
gonderBtn: gonderBtn,
},
I've also fixed the selectors for input and textarea too.
Check this line:
echo "Selam:"+$result;
Here the plus operator is an error so the php script is not returning anything.
Check this link that documents the use of + operator in php.
var title = $("title").val();
var content = $("content").val();
should be
var title = $("#title").val();
var content = $("#content").val();
You will also need to change:
$("result").html(data);
to
$("#result").html(data);
You should also wrap your inputs in a form.
Edit:
You might want to give your button input a value.
<input type="submit" id="gonderBtn" name="gonderBtn" value="go!" />
Edit 2:
You will also need to give your html elements a name.
<input type="text" id="title" name="title"/><br>
<textarea rows="10" cols="50" id="content" name="content"></textarea><br>
You're not selecting your #result div properly, add a # before
$("#result").html(data);
the same goes for all your selectors
var title = $("#title").val();
var content = $("#content").val();
Since your ajaxing your form you'll have to manually pass your button parameter, although an ajax parameter would be more appropriate.
data: {
title: title,
content: content,
gonderBtn: 'gonderBtn'
},
echo "Selam:"+$result;
In php use "." to concatenate strings.
echo "Selam:".$result;
Related
I want to make edit from. In this form contain input form control using select2 option. This select2 option input form can't display selected data that return from the database. I want to make the select2 option can be change too. I've tried this but still can display the selected data. Thank You :)
Here's my view
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<?php echo form_open('company2/do_update') ?>
<form>
<select id="Name" class="searching form-control" style="width:500px" name="company"></select>
<button type="submit" class="btn btn-info waves-effect waves-light">Save</button>
<?php echo form_close(); ?>
</form>
</body>
<script type="text/javascript">
$('.searching').select2({
placeholder: 'Masukkan Nama Company',
ajax:{
url: "<?php echo base_url('company2/select2'); ?>",
dataType: "json",
delay: 250,
processResults: function (param) {
return {
compClue: param.term,
};
},
processResults: function(data){
var results = [];
$.each(data, function(index, item){
results.push({
id: item.Name,
text: item.Name,
value:item.Name
});
});
return{
results: results,
cache: true,
};
}
}
});
var response = {};
response.val = "<?php echo $row['Name'];?>";
$("#searching option[value='" + response.val +"']").attr("selected","selected");
I would just output the content you want for the select to a div using PHP and then get the div content and append somewhere using javascript if needed.
<div id="selectOptions">
<?php
foreach($option as $row){
$optionVal = $row->optionVal;
$optionLabel = $row->optionLabel;
echo "<option value='$optionVal'>$optionLabel</option>";
}
?>
</div>
Since you are already using jQuery you can then get the content of the div using:
var options = $('#selectOptions').html();
I am sending ajax request to a php page on a button click. Here is my request being sent
$("#enteruser").on('click',function(){
console.log("entered here");
var name=$("#ename").val();
var email=$("#eemail").val();
var role=$("#erole").val();
var data={name: name, email:email, role:role};
var url='addemployee.php';
$.ajax({
url : url,
data: data,
type: 'POST',
success: function(response)
{
if(response=="success")
{
$("#rmsg").text("Hello World");
}
else
{
}
}
});
});
My this line is not working and URL after returning back contains the values I sent. So If I resend request the request is not sent again due to url. If I put the following line
window.location="anotherpage.html"; in the success block the page is redirected to the that page. Then why the rmsg paragraph is not being written?
I am adding the form dynamically using the following code
$("#create").on('click',function(){
var htmc='<div class="testbox">\n\
<h1>Create Employee</h1>\n\
<form>\n\
<hr>\n\
<label id="icon" for="eemail"><i class="icon-envelope "></i></label>\n\
<input type="text" name="eemail" id="eemail" placeholder="Email" required/>\n\
<label id="icon" for="ename"><i class="icon-user"></i></label>\n\
<input type="text" name="ename" id="ename" placeholder="Name" required/>\n\
<label id="icon" for="erole"><i class="icon-road"></i></label>\n\
<input type="text" name="erole" id="erole" placeholder="Role" required/>\n\
<button id="enteruser" class="button">Enter</button>\n\
</form>\n\
</div>';
$("#view").html(htmc);
});
$(document).on("#enteruser",'click',function(e){
e.preventDefault();
console.log("entered here");
var name=$("#ename").val();
var email=$("#eemail").val();
var role=$("#erole").val();
var data={name: name, email:email, role:role};
var url='addemployee.php';
$.ajax({
url : url,
data: data,
type: 'POST',
success: function(response)
{
if(response=="success")
{
alert(response);
$("#rmsg").text("Hello World");
}
else
{
}
}
});
});
One thing i like to do when troubleshooting HTTP calls is to view the actual network event in a debugging tool.
In Google Chrome, use CTRL + SHIFT + I to open up the debugging tools. Then click on the Network tab. In here, you may view the POST and Response and verify that your response is correct.
In MS IE, you can hit F12 to view the developer tools there
Try this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="ename" />
<input type="text" id="eemail" />
<input type="text" id="erole" />
<span id="rmsg"></span>
<button id="enteruser">Button</button>
<script type="text/javascript">
$("#enteruser").on('click',function(){
console.log("entered here");
var name=$("#ename").val();
var email=$("#eemail").val();
var role=$("#erole").val();
var data={name: name, email:email, role:role};
var url='addemployee.php';
$.ajax({
url : url,
data: data,
type: 'POST',
success: function(response)
{
if(response=="success")
{
$("#rmsg").text("Hello World");
}
else
{
}
}
});
});
</script>
</body>
</html>
PHP:
<?php session_start(); echo 'success'; ?>
You are not preventing default behaviour for a form. YOu should say to your app: "do nothing with the form and make it handled by js".
Also you are using a delegated function in the wrong way.
To do so change this:
$("#enteruser").on('click',function(){
console.log("entered here");
to this:
$("#enteruser").click(function(e){
e.preventDefault();
console.log("entered here");
all the other part of your code can remain as now if the form is in the dom from the beginning.
$(document).on('click',"#enteruser",function(e){
e.preventDefault();
console.log("entered here");
if the form is added to the page after it is loaded. YOu can also replace document with any element already in the page that is before the form in the dom structure
issues are still there...pls help
I am unable to load external file while using AJAX jquery. I want to use Jquery ajax to pop up form then validate, enter data in mysql. but starting from a simple ajax function. kindly let me know where i am going wrong
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax(
{
type: "POST",
url:"contact.php",
data: str,
success:function(result)
{
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<INPUT class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
You need to return false; to prevent the form from submitting and refreshing the page and check if your $("#div1") is missing.
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax(
{
type: "POST",
url:"contact.php",
data: str,
success:function(result)
{
$("#div1").html(result);
}
});
return false;
});
});
Simple. Since you are posting your form through ajax, you must prevent the default form submit by returning a false inside the submit method. Below is the correct version:
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
return false;
});
});
</script>
You can use a more simple form of post request as follows:
$.post("url",{var1: value1, var2: value2},function(data,status){
if(status=='success')
alert(data);
});
the second argument you can pass as many using this post request. The first argument url, if ofcourse relative to the document in which this js is loaded or you can give the exact url on the server.
According to your php file, data=='Hello'.
Similar is the procedure for any GET request also.
Make sure you are missing the div1
please use
<div id="div1"><div>
I'm still searching solution for getting values from dynamic created object.
Follwing code generates dynamic object from zip2.php
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
var q = $("#k").val();
$.ajax({
type: "POST",
url: "zips.php",
data: "q="+ q,
dataType: "html",
success: function(res) {
$("#result").html(res); $('#result').trigger('create');
},
});
});
});
<div data-role="content">
<div id="result"></div>
</div>
It created object like this format.(contents of zips.php)
<? echo " <div><ul id='zips' data-role='listview' data-inset='true' data-theme='c'>";
while($row = mysql_fetch_array($result)) {
$out .= "
<li>
<a name='submit_button' href='#mainPage'><span class='zip1'>$zip1</span>-
<span class='zip2'>$zip2</span><br />
<span class='address'>$row[zp_sido] $row[zp_gugun] $row[zp_dong] $row[zp_bunji] </span></a>
</li> \n";
}
echo $out."</ul>";
?>
And this script get the text() value from dynamic object and insert it to form.
<script>
$(document).ready(function() {
$('a[name=submit_button]').click(function(){
var inputVal1 = $('.zip1, this).text();
var inputVal2 = $('.zip2', this).text();
var inputVal3 = $('.address', this).text();
$('div input[name=zip_code1]').val(inputVal1);
$('div input[name=zip_code2]').val(inputVal2);
$('div input[name=address1]').val(inputVal3);
</script>
<div>
<form>
<input type="text" id='zip_code1' name="zip_code1" > - <input type="text" id='zip_code2 name="zip_code2"><br />
<input type="text" id='address1' name="address1">
</form
</div>
The problem is that "var inputVal1 = $('.zip1, this).text();" gets null from dynamic objects class name "zip1".
Instead of
$('a[name=submit_button]').click(function(){..
use this:
$('#result').on('click', 'a[name=submit_button]', function(){..
As you a[name=submit_button] append to DOM after page load, dynamically via ajax request, so you need delegate event handler to that, ordinary event binding will not work here.
Read more about .on()
Note
For general binding syntax of .on() is like:
$(target).on(eventName, handlerFunction)
but for delegate event systax is
$(container).on(eventName, target, handlerFunction)
Here container is the Static-element that belongs to DOM at page load and contains target and both container and target are valid jQuery selector.
I want to add a comment system after my article,
php part code
<?php
...
while($result = mysql_fetch_array($resultset))
{
$article_title = $result['article_title'];
...
?>
<form id="postform" class="postform">
<input type="hidden" name="title" id="title" value="<?=$article_title;?>" />
<input type="text" name="content" id="content" />
<input type="button" value="Submit" class="Submit" />
</form>
...
<?php
}
?>
ajax part:
$(function($) {
$(document).ready(function(){
$(".Submit").click(function(){
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var anyBlank = 0;
if(anyBlank == "0")
{
var title = $("#title").val();
var content = $("#content").val();
$.ajax({
type: "POST",
url: "ajax_post.php",
data: "title="+title+"&content="+content,
success: function(date_added){
if(date_added != 0)
{
structure = '<div class="comment_date_added">'+date_added+'</div><div id="comment_text"><div id="comment_content">'+content+'</div>';
$("#post_comment").prepend(structure);
}
});
});
ajax_post.php
echo $title;
echo $content;//get $title and $content and insert into database.
my question: <form id="postform" class="postform"> is written into a MYSQL_QUERY result circle. how to modify ajax part so that every div.submit can post its own value to ajax_post.php and then return the data into $("#post_comment").prepend(structure); Thanks to all.
You have to give the input fields a class instead of an ID. IDs have to be unique in an HTML document:
<form class="postform">
<input type="hidden" name="title" class="title" value="<?=$article_title;?>" />
<input type="text" name="content" class="content" />
<input type="button" value="Submit" class="Submit" />
</form>
Then you can make the data lookup relative to the clicked element:
var title = $(this).siblings('.title').val();
var content = $(this).siblings('.content').val();
I also suggest to pass an object to the data attribute for automatic URL encoding of the values:
data: {title: title, content: content}
Then, when you create a new entry for the #post_comment section, you have to give these elements also a class instead of an ID (and don't forget to use var!):
var structure = '<div class="comment_date_added">'+date_added+'</div><div class="comment_text"><div class="comment_content">'+content+'</div>';
or more jQuery like:
$('<div />', {class:'comment_data_added'})
.append($('<div />', {class: 'comment_date_added', text: date_added}))
.append($('<div />', {class: 'comment_content', text: content}))
.prependTo('#post_comment');
Further notes:
You have somehow a nested ready() handler:
$(function($) { // <--┐
$(document).ready(function(){ // <--┴- this is the same
//...
});
});
Either do:
jQuery.noConflict();
jQuery(function($) {
$('.Submit')...
)};
or
$(function() {
$('.Submit')...
)};
This part in the click handler:
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var anyBlank = 0;
does not seem to do anything. Besides that, the submit button has no ID and no name.
Depending on the further structure of your PHP code, you should have a look at the alternative syntax for control structures. It makes easier to mix PHP and HTML without fiddling around with brackets.