Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: Pass value to php with ajax

  1. #1
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default Pass value to php with ajax

    Hello everyone,

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function ajaxFunction() {
    var field1 = document.getElementById('field1');
    if(field1.value.length == "0") {
    alert("Please enter a value");
    } else {
    // ajax goes here
    }
    }
    </script>
    </head>
    <body>
    <input type="text" name="field1" id="field1">
    <input type="button" value="submit" onclick="ajaxFunction();">
    </body>
    </html>
    I'm trying to pass the javascript variable called field1 to a php page(check.php) using ajax.

    When the variable has been moved to the php page I would like it to be stored in a php variable like this.

    PHP Code:
    <?php
    $field1value 
    ajaxy stuff;
    ?>
    I have no idea how to do this and have very limited experience with ajax.
    It needs to be cross browser compatible.
    Can anyone help me?
    Last edited by keyboard; 02-15-2012 at 05:38 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    The AJAX side of that can be done, but what's the point?

    I ask because:

    PHP Code:
    <?php 
    $field1value 
    ajaxy stuff
    ?>
    contrary to what you assert in your post, doesn't store anything. Like any PHP page, regardless of where it gets its information from, doing that only assigns a value to $field1value while the page that variable is on is being processed.

    That's not to say that doing something generally like that cannot be of any worth, it can. But there needs to be a more concrete purpose.

    So let's forget about what happens on the PHP page for a moment. AJAX is vastly less complicated when we use jQuery. So on the 'sending' page we can have:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var field1 = $('#field1');
    	$('#send').click(function(){
    		if(!field1.val()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'somepage.php',
    			type: 'post',
    			data: 'field1value=' + field1.val()
    		});
    	});
    });
    </script>
    </head>
    <body>
    <body>
    <input type="text" name="field1" id="field1">
    <input type="button" value="Submit" id="send">
    </body>
    </body>
    </html>
    And on the 'receiving' page (somepage.php):

    PHP Code:
    <?php 
    $field1value 
    = isset($_POST['field1value'])? $_POST['field1value'] : ''
    ?>
    But, as I say it doesn't do anything. The somepage.php code runs on the server, the $field1value is set, then the page is done and all is forgotten. Nothing has changed or happened other than a few clock ticks got used up on the server.

    If on the other hand we use a 'sending' page like:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var field1 = $('#field1');
    	$('#send').click(function(){
    		if(!field1.val()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'somepage.php',
    			type: 'post',
    			data: 'field1value=' + field1.val(),
    			success: function(results){
    				alert(results);
    			}
    		});
    	});
    });
    </script>
    </head>
    <body>
    <body>
    <input type="text" name="field1" id="field1">
    <input type="button" value="Submit" id="send">
    </body>
    </body>
    </html>
    And on somepage.php:

    PHP Code:
    Hey, what did you type "<?php
    $field1value 
    = isset($_POST['field1value'])? $_POST['field1value'] : ''
    echo 
    $field1value;
    ?>" for?
    Now we at least have evidence that something happened.
    Last edited by jscheuer1; 02-14-2012 at 03:47 AM. Reason: add second example
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Sorry if I wasn't clear -

    Quote Originally Posted by keyboard1333 View Post
    Hello everyone,
    PHP Code:
    <?php
    $field1value 
    ajaxy stuff;
    ?>
    Isn't the full contents of the php page, just the way I wanted the information to be stored (as you said temporarialy).

    This is absaloutly fantastic,
    Thanks jschuer1

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by keyboard1333
    Hey jscheuer1

    I was wondering if you could help me?

    Index.html
    Code:
    <html>
    <head>
    <title>
    Html Editor
    </title>
    <style type="text/css">
    #window1 p {
    	margin: 0;
    }
    #window2 p {
    	margin: 0;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    function clearwindow(){
    	var window1contents = document.getElementById('window1').innerHTML;
    	var window2contents = document.getElementById('window2').innerHTML;
    	if(window1contents == "<I>Edit Window</I>"){
    	document.getElementById('window1').innerHTML = "&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;";
    	}
    	if(window2contents == "<I>Viewing Window</I>"){
    	document.getElementById('window2').innerHTML = "";
    	}
    }
    function fillwindow(){
    	var window1contents = document.getElementById('window1').innerHTML;
    	var window2contents = document.getElementById('window2').innerHTML;
    	if(window1contents == "&lt;html&gt;<BR>&lt;head&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;"){
    	document.getElementById('window1').innerHTML = "<I>Edit Window</I>";
    	document.getElementById('window2').innerHTML = "<I>Viewing Window</I>";
    	}
    }
    </script>
    <script type="text/javascript">
    jQuery(function($){
    	var field1 = $('#window1').html();
    	$('#window1').keyup(function(){
    		if(!field1.val()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'somepage.php',
    			type: 'post',
    			data: 'field1value=' + field1.val(),
    			success: function(results){
    				alert(results);
    			}
    		});
    	});
    });
    </script>
    </head>
    <body style="background-color:grey;">
    	<div style="float:left; width:120px; height:60%; background-color:grey;"></div>
    	<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid; overflow:auto;" id="window1" onclick="clearwindow()" onblur="fillwindow()" contenteditable><i>Edit Window</i></div>
    	<div style="float:left; width:300px; height:60%; background-color:grey;"></div>
    	<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid; overflow:auto;" id="window2"><i>Viewing Window</i></div>
    	<div style="float:left; width:100px; height:61%; background-color:grey;"></div>
    
    	<div style="float:left; width:120px; height:70%; background-color:grey;"></div>
    	<!--<input type="button" value="Reset" onclick="reset()">--><input type="button" value="BOLD" onclick="ajaxFunction();">
    </body>
    </html>
    Somepage.php
    Code:
    <?php 
    $field1value = isset($_POST['field1value'])? $_POST['field1value'] : '';  
    echo $field1value; 
    ?>
    Can you tell why it isn't working?
    Any help would be great!!!
    I get the error "field1.val() is not a function". That's because you've got:

    Code:
    var field1 = $('#window1').html();
    The .val() function is only valid for input and textarea tags. Here, not only isn't it one of those, it's actually a string representing the innerHTML of a div tag.

    This works:

    Code:
    jQuery(function($){
    	var field1 = $('#window1');
    	field1.keyup(function(){
    		if(!field1.html()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'somepage.php',
    			type: 'post',
    			data: 'field1value=' + field1.html(),
    			success: function(results){
    				alert(results);
    			}
    		});
    	});
    });
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Index.html
    HTML Code:
    <html>
    <head>
    <title>
    Html Editor
    </title>
    <style type="text/css">
    #window1 p {
    	margin: 0;
    }
    #window2 p {
    	margin: 0;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    function clearwindow(){
    	var window1contents = document.getElementById('window1').innerHTML;
    	var window2contents = document.getElementById('window2').innerHTML;
    	if(window1contents == "<I>Edit Window</I>"){
    	document.getElementById('window1').innerHTML = "&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;";
    	}
    	if(window2contents == "<I>Viewing Window</I>"){
    	document.getElementById('window2').innerHTML = "";
    	}
    }
    function fillwindow(){
    	var window1contents = document.getElementById('window1').innerHTML;
    	var window2contents = document.getElementById('window2').innerHTML;
    	if(window1contents == "&lt;html&gt;<BR>&lt;head&gt;<BR>&lt;/head&gt;<BR>&lt;body&gt;<BR>&lt;/body&gt;<BR>&lt;/html&gt;"){
    	document.getElementById('window1').innerHTML = "<I>Edit Window</I>";
    	document.getElementById('window2').innerHTML = "<I>Viewing Window</I>";
    	}
    }
    </script>
    <script type="text/javascript">
    jQuery(function($){
    	var field1 = $('#window1');
    	field1.keyup(function(){
    		if(!field1.html()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'somepage.php',
    			type: 'post',
    			data: 'field1value=' + field1.html(),
    			success: function(results){
    				alert(results);
    			}
    		});
    	});
    });
    </script>
    </head>
    <body style="background-color:grey;">
    	<div style="float:left; width:120px; height:60%; background-color:grey;"></div>
    	<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid; overflow:auto;" id="window1" onclick="clearwindow()" onblur="fillwindow()" contenteditable><i>Edit Window</i></div>
    	<div style="float:left; width:300px; height:60%; background-color:grey;"></div>
    	<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid; overflow:auto;" id="window2"><i>Viewing Window</i></div>
    	<div style="float:left; width:100px; height:61%; background-color:grey;"></div>
    
    	<div style="float:left; width:120px; height:70%; background-color:grey;"></div>
    	<!--<input type="button" value="Reset" onclick="reset()">--><input type="button" value="BOLD" onclick="ajaxFunction();">
    </body>
    </html>
    Somepage.php
    PHP Code:
    <?php 
    $field1value 
    = isset($_POST['field1value'])? $_POST['field1value'] : '';  
    echo 
    $field1value
    ?>
    When I type in the content editable div, nothing happens.
    Any help?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Works here. It does require a PHP enabled server though. For best results in IE remove:

    Code:
    onclick="clearwindow()" onblur="fillwindow()"
    Last edited by jscheuer1; 02-15-2012 at 05:50 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    OK, I played with this a bit more and it seems that the clearwindow and fillwindow functions have a lot of room for improvement. And that the HTML of the contenteditable div cannot always all be passed as POST data for some reason. Escaping it before sending and unescaping it upon return seems to fix that. So try this out. Bear in mind that the clearwindow and fillwindow functions still have a lot of room for improvement. I've just made them a bit more serviceable:

    Code:
    <html>
    <head>
    <title>
    Html Editor
    </title>
    <style type="text/css">
    #window1 p {
    	margin: 0;
    }
    #window2 p {
    	margin: 0;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    function clearwindow(){
    	var window1contents = document.getElementById('window1').innerHTML;
    	var window2contents = document.getElementById('window2').innerHTML;
    	if(/<I>Edit Window<\/I>/i.test(window1contents)){
    	document.getElementById('window1').innerHTML = "&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;";
    	fillwindow.test = document.getElementById('window1').innerHTML;
    	}
    	if(/<I>Viewing Window<\/I>/i.test(window2contents)){
    	document.getElementById('window2').innerHTML = "";
    	}
    }
    function fillwindow(){
    	var window1contents = document.getElementById('window1').innerHTML;
    	var window2contents = document.getElementById('window2').innerHTML;
    	if(fillwindow.test == window1contents){
    	document.getElementById('window1').innerHTML = "<I>Edit Window</I>";
    	document.getElementById('window2').innerHTML = "<I>Viewing Window</I>";
    	}
    }
    </script>
    <script type="text/javascript">
    jQuery(function($){
    	var field1 = $('#window1');
    	field1.keyup(function(){
    		if(!field1.html()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'somepage.php',
    			type: 'post',
    			data: 'field1value=' + escape(field1.html()),
    			success: function(results){
    				alert(unescape(results));
    			}
    		});
    	});
    });
    </script>
    </head>
    <body style="background-color:grey;">
    	<div style="float:left; width:120px; height:60%; background-color:grey;"></div>
    	<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid; overflow:auto;" id="window1" onclick="clearwindow()" onblur="fillwindow()" contenteditable><i>Edit Window</i></div>
    	<div style="float:left; width:300px; height:60%; background-color:grey;"></div>
    	<div style="float:left; width:33.3%; height:60%; background-color:white; border: 3px darkgrey solid; overflow:auto;" id="window2"><i>Viewing Window</i></div>
    	<div style="float:left; width:100px; height:61%; background-color:grey;"></div>
    
    	<div style="float:left; width:120px; height:70%; background-color:grey;"></div>
    	<!--<input type="button" value="Reset" onclick="reset()">--><input type="button" value="BOLD" onclick="ajaxFunction();">
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    I changed index.html to the code you posted and left somepage.php exactly the same.

    When I type into the div with id="window1" nothing happens.
    Tested in IE9, Firefox and Chrome.
    Any help?

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Here's a demo:

    http://jscheuer1.comli.com/postedit/demo.htm

    If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 02-15-2012 at 10:09 AM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Hopefully I'll have a link up soon...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •