main.php:
<SCRIPT type="text/javascript">
$("#btnSubmit").click(function () {
alert("What will i put here!");
});
</SCRIPT>
<input type = "submit" id = "btnSubmit" value = "Try IT!" />
<div id = "show_search2">
</div>
output.php:
<?php $val = $_POST['btnSubmit'];
echo "<H1>$val</H1>"; ?>
What specific jQuery functionality can get the value of the btnSubmit and access it through $_POST and output it to the div show_search2? I used prototype.js but it provides conflict with my other JS scripts in the index.
Note: all my script source is included in index and that's why I didn't include the source in this post.
Do you mean something like this:
$("#btnSubmit").click(function (e) {
e.preventDefault();
var submitVal = $(this).val();
$.ajax({
type: "POST",
url: "url_of_your_output.php",
data: {btnSubmit : submitVal},
success: function(response) {
$("#show_search2").html(response); //response from output.php
}
});
});
Related
this is my first time writing an ajax below is my structure
submitted.php
<?php $a = $_POST['a']; // an input submitted from index.php ?>
<button>bind to jquery ajax</button> // call ajax
<span></span> // return ajax result here
<script>
$('button').on('click', function() {
event.preventDefault();
$.ajax({
method: "POST",
url: "test.php",
data: { "key" : 'data'}
})
.done(function( msg ) {
$('span').html(msg);
});
});
</script>
test.php
<?php echo $a; // will this work? ?>
ajax return blank... no error, my error_reporting is on.
No, there are a few things wrong with this:
You are posting a key - value pair where the key is key, so you would need $_POST['key'] in your php script;
You should use .preventDefault() if you need to prevent an event like a form submit that is caused by your button. If that is the case, you need to get the event variable from your event handler: $('button').on('click', function(event) {.If there is no event to prevent, you can simply remove that line;
If you do have a form (it seems so from your comment), you can easily send all key - value pairs using: data: $('form').serialize().
form.php
<button>bind to jquery ajax</button> <!-- ajax trigger -->
<span></span> <!-- return ajax result here -->
<script>
// NOTE: added event into function argument
$('button').on('click', function(event) {
event.preventDefault();
$.ajax({
method: "POST",
url: "test.php",
data: { "key" : 'data'}
})
.done(function(msg) {
$('span').html(msg);
});
});
</script>
process.php
<?php
echo (isset($_POST['key'])) ? $_POST['key'] : 'No data provided.';
?>
This is the way to do it:
ubmitted.php
<button>bind to jquery ajax</button> // call ajax
<span></span> // return ajax result here
<script>
$('button').on('click', function() {
// no need to prevent default here (there's no default)
$.ajax({
method: "POST",
url: "test.php",
data: { "key" : 'data'}
})
.done(function( msg ) {
$('span').html(msg);
});
});
</script>
test.php
<?php
if (isset($_POST['key'])
echo $_POST['key'];
else echo 'no data was sent.';
?>
I want to update my session variables on textbox's onchange event, without page reload
How to do that.?? thanks!
You must use ajax for it, on on change event of textbox like,
$('textbox').on('change',function(){
$.ajax({
url:'yoururl.php',
data:{data},
success:function(){
alert('success');
}
});
});
I would use on blur, that way it wont set the variable everytime the user types, only when he clicks somewhere else....
$('textbox').blur(function(){
var thevalue = $(this).val();
$.ajax({
url:'yoururl.php',
type: "post",
data:{"value":thevalue},
dataType:"html",
success:function(data){
console.log(data);
}
});
});
THen in your php...
<?php
$_SESSION['yoursessionkey'] = $_POST['value'];
echo "success";
?>
It can be done by combination of javascript and PHP.
Make a function() and insert PHP code in it.
Pass the current argument as in session variable in javascript function..
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$("#field").change(function(){
$.ajax({
url: "http://yourserver.com/ajax.php",
data: { value: $("#field").val() }
});
});
});
</script>
...
<input type="text" id="field" />
And in ajax.php:
<?php
$_SESSION['var'] = $_GET['value'];
?>
This code, if click on text inside div class="example4DOMWindow" sends defined values to php and then get back php data and in popup window displays data received from php.
Here is example http://jsfiddle.net/rigaconnect/q3RcV/1/
This is ajax that sends and receives data
$(document).ready(function()
{
var one = $("#first_var").text();
var two = $("#second_var").text();
$.ajax({
type: "POST",
url: '__popup-window_ajax.php',
data: {var1: one, var2: two },
dataType: "json",
success: function(data) {
$('#load').html(data);
}
});
});
This part of code displays popup window (sample here http://swip.codylindley.com/DOMWindowDemo.html)
<body>
<div id="first_var" class="example4DOMWindow" style="width: 50px;">text one</div>
<div id="second_var" class="example4DOMWindow" style="width: 50px;">text two</div>
<script type="text/javascript">
$('.example4DOMWindow').openDOMWindow({
eventType:'click',
windowSourceID:'#example4InlineContent',
});
</script>
<div id="example4InlineContent" style="display:none">
<div>
<div id="load"></div>
</div>
</div>
</body>
And this is php file code
$p_one = $_POST['var1'];
$p_two = $_POST['var2'];
$test = $p_one. '<br>test<br>'. $p_two;
echo json_encode($test);
The code sends to php only var that is defined. Like var one = $("#first_var").text(); So if no var inside ajax code, nothing send. And sends all vars.
Necessary the code to send to php only clicked text. User clicks on text one, sends text one and do not send text two; clicks on text two, sends only text two.
Here https://stackoverflow.com/a/17622947/2360831 / http://jsfiddle.net/aGWGn/5/
clicked text is passed as value to javascript.
Tried to put all together like this
$(document).ready(function(){
document.body.onmousedown = whichElement;
var output = document.getElementById("load")
function whichElement(e) {
e = e || window.event;
var targ = e.target || e.srcElement;
if (targ.nodeType===3) {// defeat Safari bug
targ = targ.parentNode;
}
output.innerHTML = targ.innerHTML;
}
//var one = $("#first_var").text();
var one = targ;
var two = $("#second_var").text();
$.ajax({
type: "POST",
url: '__popup-window_ajax.php',
data: {var1: one, var2: two },
dataType: "json",
success: function(data) {
$('#load').html(data);
}
});
});
But the code does not pass var one = targ; to php file (var two also does not pass).
From my understanding the main question is how to pass var targ or var output(?) to var one....
Please, advice what is incorrect
Update
Changed data to data: {var1: output, var2: two },
and in popup window see
[object HTMLDivElement]
test
text two
text two
Changed to var one = targ.innerHTML; but does not work....
Changes to get to work
Changed var output = document.getElementById("load") to var output = document.getElementById("load1")
In html added <div id="load1"></div>
And changed
//var one = $("#first_var").text();
var one = targ;
var two = $("#second_var").text();
to var one = $("#load1").text();
Now seems work. But think the code need improvements
From what I understand, you need to pass only the clicked text to php, right?
If so, you don't need all that code from the moment you are using jquery. You just need to attach a 'click' event handler to .example4DOMWindow and send only the text of the clicked div.
index.html:
<body>
<!--
<script src="jquery-2.0.3.js"></script>
<script src="jquery.DOMWindow.js"></script>
-->
<div id="first_var" class="example4DOMWindow">text one</div>
<div id="second_var" class="example4DOMWindow">text two</div>
<div id="example4InlineContent" style="display:none">
<div id="load"></div>
</div>
<script>
$(document).ready(function() {
$('.example4DOMWindow').openDOMWindow({
eventType:'click',
windowSourceID:'#example4InlineContent',
});
$(".example4DOMWindow").on('click', function(event){
$.ajax({
type: 'POST',
url: '__popup-window_ajax.php',
data: { 'clickedText' : $(this).text() },
success: function(data) {
$('#load').html(data);
}
});
});
});
</script>
</body>
__popup-window_ajax.php:
<?php
$var = $_POST['clickedText'];
echo json_encode($var);
?>
HTML:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<input value="load()" id="test" type="submit" />
<div id="result"></div>
Script:
$.ajaxSetup ({
cache: false
});
var loadUrl = "http://localhost/test/process.php";
$("#test").click(function(){
$("#result").load(loadUrl, "content=sd345f"+singleValues);
});
function displayVals() {
var singleValues = $("#single").val();
}
$("select").change(displayVals);
displayVals();
That is my current code, I'm new to jquery and what i wanna ask is how do i make the var singleValues update when i choose a list from a dropdown and append it as a get value when i click on submit?
ANd here's process.php BTW:
<?php file_put_contents('1.txt',$_GET['content']); ?>
If I understand right, you want to load the result when you click on the button.
Try the following code:
$("#test").click(function(){
// get the selected value
var value = $("#single option:selected").val();
// GET to server
$.ajax({
type : "GET",
url : "http://localhost/test/process.php",
data : {
"content" : value
},
success : function(response){
$("#result").html(response);
}
});
// Don't use default submit function
return false;
});
More information about $.ajax http://api.jquery.com/jQuery.ajax/
I have a div which contains some text for the database:
<div id="summary">Here is summary of movie</div>
And list of links:
Name of movie
Name of movie
..
The process should be something like this:
Click on the link
Ajax using the url of the link to pass data via GET to php file / same page
PHP returns string
The div is changed to this string
<script>
function getSummary(id)
{
$.ajax({
type: "GET",
url: 'Your URL',
data: "id=" + id, // appears as $_GET['id'] # your backend side
success: function(data) {
// data is ur summary
$('#summary').html(data);
}
});
}
</script>
And add onclick event in your lists
<a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the onclick event (link is clicked) is triggered.</div>
You could achieve this quite easily with jQuery by registering for the click event of the anchors (with class="movie") and using the .load() method to send an AJAX request and replace the contents of the summary div:
$(function() {
$('.movie').click(function() {
$('#summary').load(this.href);
// it's important to return false from the click
// handler in order to cancel the default action
// of the link which is to redirect to the url and
// execute the AJAX request
return false;
});
});
try this
function getmoviename(id)
{
var p_url= yoururl from where you get movie name,
jQuery.ajax({
type: "GET",
url: p_url,
data: "id=" + id,
success: function(data) {
$('#summary').html(data);
}
});
}
and you html part is
<a href="javascript:void(0);" class="movie" onclick="getmoviename(youridvariable)">
Name of movie</a>
<div id="summary">Here is summary of movie</div>
This works for me and you don't need the inline script:
Javascript:
$(document).ready(function() {
$('.showme').bind('click', function() {
var id=$(this).attr("id");
var num=$(this).attr("class");
var poststr="request="+num+"&moreinfo="+id;
$.ajax({
url:"testme.php",
cache:0,
data:poststr,
success:function(result){
document.getElementById("stuff").innerHTML=result;
}
});
});
});
HTML:
<div class='request_1 showme' id='rating_1'>More stuff 1</div>
<div class='request_2 showme' id='rating_2'>More stuff 2</div>
<div class='request_3 showme' id='rating_3'>More stuff 3</div>
<div id="stuff">Here is some stuff that will update when the links above are clicked</div>
The request is sent to testme.php:
header("Cache-Control: no-cache");
header("Pragma: nocache");
$request_id = preg_replace("/[^0-9]/","",$_REQUEST['request']);
$request_moreinfo = preg_replace("/[^0-9]/","",$_REQUEST['moreinfo']);
if($request_id=="1")
{
echo "show 1";
}
elseif($request_id=="2")
{
echo "show 2";
}
else
{
echo "show 3";
}
jQuery.load()
$('#summary').load('ajax.php', function() {
alert('Loaded.');
});
<script>
$(function(){
$('.movie').click(function(){
var this_href=$(this).attr('href');
$.ajax({
url:this_href,
type:'post',
cache:false,
success:function(data)
{
$('#summary').html(data);
}
});
return false;
});
});
</script>
<script>
function getSummary(id)
{
$.ajax({
type: "GET",//post
url: 'Your URL',
data: "id="+id, // appears as $_GET['id'] # ur backend side
success: function(data) {
// data is ur summary
$('#summary').html(data);
}
});
}
</script>