How do you POST a Data Array using AJAX

rocky48 · January 18, 2015

II am new to jscript and AJAX and have a problem that I need to solve.

I have a form on which I need to input the RGB values of a color that will be used in the next PHP file.

I have choosen a color chooser written in jscript called JS-Color.

There are a number of pre-written scripts for choosing the color, of which I have used the following:

<script type="text/javascript" src="jscolor/jscolor.js"></script>

R<input id="red" size="5">  G<input id="grn" size="5">  B<input id="blu" size="5">  - - -
H<input id="hue" size="5">  S<input id="sat" size="5">  V<input id="val" size="5">

<p> Choose any color: <input class="color" id="myColor" onchange="
	document.getElementById('red').value = this.color.rgb[0]*100 + '%';
	document.getElementById('grn').value = this.color.rgb[1]*100 + '%';
	document.getElementById('blu').value = this.color.rgb[2]*100 + '%';
	document.getElementById('hue').value = this.color.hsv[0]* 60 + '°';
	document.getElementById('sat').value = this.color.hsv[1]*100 + '%';
	document.getElementById('val').value = this.color.hsv[2]*100 + '%';">

I am trying to work out how to use this to get the 3 values that I can post in a form.

Looking at the internet, I have found that AJAX is the easiest way to POST from jscript.

I have attempted to write some script, but I'm sure I'm way off the mark.

Here is my attempt:

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Yosemite  
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20091106

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head>
<body>

<div id="wrapper"><!-- start #wrapper -->
	<div id="menu"><!-- start #menu -->
		<ul>
			<li class="current_page_item"><a href="index.php">Home</a></li>
			<li><a href="Links.html">Links</a></li>
			<li><a href="Verse_Menu.html">Verses</a></li>
			<li><a href="Techniques.html">Techniques</a></li>
			<li><a href="blog.php">Blog</a></li>
			<li><a href="Gallery.html">Gallery</a></li>
			<li><a href="contact.html">Contact</a></li>
			<li><a href="AboutUs.html">About Us</a></li>
			<li><a href="Stats_Menu.html">Stats</a></li>
		</ul>
	</div><!-- end #menu -->
	<div id="header"><!-- start #header -->
		<div id="logo">
			<h1><a href="http://www.1066cards4U.co.uk">1066 Cards 4U</a></h1>
	</div>
	</div><!-- end #header -->
	<div id="page"><!-- start #page -->
	<div id="page-bgtop"><!-- start #page-bgtop -->
	<div id="page-bgbtm"><!-- start #page-bgbtm -->
		<div id="content"><!-- start #content -->
<h1>Page Title</h1>
<script type="text/javscript">
$(function (){
$('#form_id').on('submit', function(e){
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: "/test_input.php",
       data: $(this).color.rgb[0]*255, $(this).color.rgb[1]*255, $(this).color.rgb[2]*255,
       success: function() {
         alert('success');
       }
    });
});
});
</script>   
	
<form method="post" id="form_id">
<script type="text/javascript" src="jscolor/jscolor.js?refresh=adsl"></script>
<script type="text/javascript">
jscolor.dir = "jscolor/";
</script>

<script type="text/javascript" src="jscolor/jscolor.js"></script>

R<input id="red" size="5">  G<input id="grn" size="5">  B<input id="blu" size="5">
H<input id="hue" size="5">  S<input id="sat" size="5">  V<input id="val" size="5">

<p> Choose any color: <input class="color" id="myColor" onchange="
	document.getElementById('red').value = this.color.rgb[0]*255;
	document.getElementById('grn').value = this.color.rgb[1]*255;
	document.getElementById('blu').value = this.color.rgb[2]*255;
	document.getElementById('hue').value = this.color.hsv[0]* 60 + '°';
	document.getElementById('sat').value = this.color.hsv[1]*100 + '%';
	document.getElementById('val').value = this.color.hsv[2]*100 + '%';">

<input type="submit" id="submit" name="submit" value="Send">
</form>

<br /><br /><br /><br />
</div><!-- end #content -->
		
	
<div id="sidebar"><!-- start #sidebar -->
			
<div id="search" ><!-- start #search -->
<h2><font color="blue">SITE SEARCH</h2>					
<script>
  (function() {
    var cx = '018330043583532205772:h1v3z6ucuna';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
</div><!-- end #search -->

<div style="clear: both;"> </div><!-- start and end #style -->
</div><!-- end #sidebar -->
		<div style="clear: both;"> </div>
	</div><!-- end #page-bgbtm -->
	</div><!-- end #page-bgtop -->
	</div><!-- end #page -->
</div><!-- end #wrapper -->

<div id="footer"><!-- start #footer -->
		<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>.</p>
<p>Copyright (c) 2013 - 1066 Cards 4U - content and design</p>
<p><a href="sitemap.html"><font color="blue">Sitemap</font></a></p>
	</div><!-- end #footer -->
</body>
</html>

Which is the variable that I can use?

Is it this.color.rgb[0]*255; for example?

I have created a variable $red etc, but it does not even open the test_input.php file.

None of the examples I have seen on the internet relate to the task I am trying to figure out.

Can anyone advise me?

Frank_b · January 18, 2015

AJAX means that the javascript makes a request to the webserver. (javascript runs in the browser of the client). after the call it waits on an answer. This answer comes as a variable (which can be an object) in javascript. There will be no new page loaded. But you can overwrite some content of the page (for example a <div>) with javascript using the data that comes back from the webserver. The request to the webserver can be handled by a php script.

For the transportation of data (think about more than one variabele) programmers often use JSON these days. I recommand that you look for some examples on the internet with JSON and AJAX to understand this methods

rocky48 · January 19, 2015

I am still as confused as ever!

How do I use the jscript variables in the form?

Do I put the form Submit tag at the end?

I have a multi part form using HTML tags.

Can I put this jscript code in with it or do I have to run it separately?

An example of similar code would help enormously.

Sign In

How do you POST a Data Array using AJAX

Recommended Posts

rocky48

Link to comment

Share on other sites

Frank_b

Link to comment

Share on other sites

rocky48

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information