JavaScript - Sending Form Results To Webpage?
I have a form with results and ID's for each field, I can get an alert to popup with the results, is there anyway to display this on the webpage?
This is what I have so far: Code: document.getElementById('result').write(account.value +" "+ rep.value +" "+ error1.value +" "+ fix.value); along with this in the HTML: Code: <p id='result'></p> Similar TutorialsHi, I have a script that has a form and i need it to send to an email address. The send button has an onclick with send() as its action, the js file has a send function but no way of inputting an email address, I though of adding .submit() or .post() jquery items but I am having trouble. Basically the script was given to me as is because there was no need for it and i wanted to get it to work. an suggestions or ideas? regards! Hello, I have 2 things I'm trying to figure out. 1. First form on the page has questions with radio buttons. Each radio's value is a number so a score is assessed at the end. 2. Second form on the page is an email the admin form, which duplicates the score in one field. Question: I would like to know how to write the form results to a text area in second form. However, I can't do this for one, and secondly, the value is a number, can I use labels? Here's the code I've 'made up' so far... JS (i know it's wrong) Code: <script LANGUAGE="JavaScript" type="text/javascript"> function display() { message = "<ul><li><b>Question 1: </b>" + document.quizform.Q1.label; message = "<li><b>Question 2: </b>" + document.quizform.Q2.label; message = "<li><b>Question 3: </b>" + document.quizform.Q3.label; message = "<li><b>Question 4: </b>" + document.quizform.Q4.label; message = "<li><b>Question 5: </b>" + document.quizform.Q5.label; message = "<li><b>Question 6: </b>" + document.quizform.Q6.label + "</ul>"; document.write(message); } </script> Form field example: Code: Question 1:<BR> <label for="Yes"><input type="radio" name="Q1" value="0" checked></label>Yes<br> <label for="No"><input type="radio" name="Q1" value="10"></label>No<br> <label for="I don't know"><input type="radio" name="Q1" value="10"></label>I don't know<br> How can I go about making it so JavaScript will not let a form submit unless a number entered into a field matches a pre-specified number? A guess.. Code: function validateForm() { if (document.forms["form"]["number"].value=="123") { submit} else {alert ("Cant submit because the number doesn't match."); return false; } } Hi, I have a problem with sending data from a form to a php script with AJAX. To test if it works, I try to send data from the form, print it in the php with "echo", and then put it back in the initial html file. My Javascript code is: Code: function registerPrivateUser() { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); return; } var postData="firstName="+ document.getElementById("txtFirstName").value; var url="classes/users/checkRegistration.php"; xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("POST",url,true); //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); xmlhttp.send(postData); } The function stateChanged, basically says: Code: if (xmlhttp.readyState==4) { var strResponse; strResponse=xmlhttp.responseText; alert('Response:' + xmlhttp.responseText); } checkRegistration.php looks like this: PHP Code: <? session_start(); $firstName=$_POST['firstName']; echo($firstName); ?> The problem is that the response is empty, but I don't know why. I have checked the input data and the postData variable says "firstName="+input (e.g. "firstName=Robert"), so that's not the error. I have read several forum posts here, but still haven't figured out what I'm doing wrong. If anyone could please tell me, I would appreciate it alot. Hey, I have a couple of forms which use JS validation and if the validation checks out the forms action is a new php page which sends the form (see code below). It all works fine but occasionally blank emails come through. After researching some people say I shouldn't use client side validation. Is there an easier way by tweaking the code I have rather than changing it all completely? Code: <script language="php"> $email = $HTTP_POST_VARS[email]; $mailto = "info@xxxxxxxx.com"; $mailsubj = "mail form"; $mailhead = "From: $Email\n\n"; reset ($HTTP_POST_VARS); $mailbody = "mail:\n\n"; while (list ($key, $val) = each ($HTTP_POST_VARS)) { $mailbody .= "$key : $val\n"; } if (!eregi("\n",$HTTP_POST_VARS[email])) { mail($mailto, $mailsubj, $mailbody, $mailhead); } </script> thanks for any help, E Fixed.
Hi I'm putting together the following website, HGV/LGV Training and have an issue regarding a form submit action. Basically I've used an open-source script for the search form so can't get any support from the Author. My problem is that I need the search results to appear in a different URL but at the moment they just appear in a new DIV on the home page. My knowledge of JS is limited and can't get my head around what the OS script is doing. I think the relevant section of the search form is as follows: <form method=post action=<?echo $_PHP_SELF;?>> <input type="text" name="zipcode"> <? echo show_country_codes(); ?> Any help on this would be greatly appreciated. Keith. I am having some trouble with this form and I was hoping someone could help me with it. It is not returning any errors, it is simply not returning the results of the form fields. The clear form works, the redirect works, the layout is fine, just no results. I am just beginning to learn Javascripts and I know this is a pretty basic script, but could someone be so kind to show me what it is I am doing wrong and teach me the right way to do this? I know it has to be something very simple but I keep going over it and i can not see what I am doing wrong. Rather than just post a snipit of the code I included the whole form so I do not forget to include any information. Thanks guys, I really appreciate it! Code: <form name="evaluation" action="http://www.YOURURL.com/webformmailer.php" target="_self" method="post"><input value="Submission" name="subject" type="hidden" /><input value="evaluationreturn.html" name="redirect" type="hidden" /> <span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-weight: bold;"><br /> <table bgcolor="F7F5F2" border="0" cellpadding="0" cellspacing="0" width="456"> <tbody> <tr> <td><span style="color: rgb(40, 89, 161);">Comment 1</span><br style="color: rgb(40, 89, 161);" /> <br style="color: rgb(40, 89, 161);" /> <span style="color: rgb(40, 89, 161);">Comment 2</span><br style="color: rgb(40, 89, 161);" /> <br style="color: rgb(40, 89, 161);" /> <span style="color: rgb(40, 89, 161);">comment 3</span><br /> <br /> </td> </tr> <tr> <td height="28" valign="top"> <table style="width: 456px; height: 52px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 137px; text-align: left; color: rgb(40, 89, 161);" class="text_1">Your name:</td> <td style="width: 40px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 271px;"><input name="yourname" class="form_1" type="text" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="28" valign="top"> <table style="width: 456px; height: 52px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 137px; text-align: left; color: rgb(40, 89, 161);" class="text_1">Business name:</td> <td style="width: 40px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 271px;"><input name="businessname" class="form_1" type="text" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="75" valign="top"> <table style="width: 456px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="text_1" style="padding-top: 3px; width: 138px; text-align: left; vertical-align: middle; color: rgb(40, 89, 161);">Business Location:</td> <td style="width: 38px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 272px;"><textarea name="location" class="form_1"></textarea></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="40" valign="top"> <table style="width: 456px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="padding-top: 3px; width: 138px; text-align: left; vertical-align: middle; color: rgb(40, 89, 161);" class="text_1">Business Hours:</td> <td style="width: 38px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 272px;"><textarea name="businesshours" class="form_1"></textarea></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="28" valign="top"> <table style="width: 456px; height: 50px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="text-align: left; width: 143px; color: rgb(40, 89, 161);" class="text_1">Reservation required?</td> <td style="width: 34px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 271px;"><input name="reservation" class="form_1" type="text" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="28" valign="top"> <table style="width: 456px; height: 50px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 138px; text-align: left; color: rgb(40, 89, 161);" class="text_1">Reservation Telephone Number:</td> <td style="width: 39px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 271px;"><input name="reservationphone" class="form_1" type="text" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="28" valign="top"> <table style="width: 456px; height: 50px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 138px; text-align: left; color: rgb(40, 89, 161);" class="text_1">E-mail address:</td> <td style="width: 39px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 271px;"><input name="email" class="form_1" type="text" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="28" valign="top"> <table style="width: 456px; height: 50px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 138px; text-align: left; color: rgb(40, 89, 161);" class="text_1">Your contact number:</td> <td style="width: 39px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 271px;"><input name="yournumber" class="form_1" type="text" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td height="91" valign="top"> <table style="width: 456px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="text_1" style="vertical-align: top; padding-top: 3px; width: 138px; text-align: left; color: rgb(40, 89, 161);">Select dates to perform evaluation: From/To <br /> Maximum of 30 days</td> <td style="width: 38px;"><img src="images/spacer.gif" height="1" width="1" /></td> <td style="width: 272px;"><textarea name="performdate" class="form_2"></textarea></td> </tr> <tr> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br /> </span></span> <table style="text-align: left; width: 458px;" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 220px; text-align: center;"> <p> <input value="Clear Form" onclick="reset(); return false;" type="reset" /></p> <input value="alpha" name="form_order" type="hidden" /> </td> <td style="width: 218px; text-align: center;"> <p> <input value="Submit" onclick="submit();" type="submit" /></p> <input value="alpha" name="form_order" type="hidden" /> </td> </tr> </tbody> </table> <span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-weight: bold;"></span></span></form> Hi, I'm working on a menu update form. I'm pulling the existing data from mysql and posting it into a form, using php. This works fine. But now I want the user to be able to modify the data and perform and update query to the database with the changes. I cannot figure out how to get the modified php text box data into my html form text boxes so I can run an update query. I would be ok with a button that transfers the php text box data to the html form data. Hope this is clear what I'm trying to do, seems simple enough, but I can't figure it out. Thanks in advance for any ideas. I have a form that is submitted via jquery into a mysql database using php Code: <form method="post" name="add_loc_form" id="add_loc_form"> <table width="100%" align="center" cellspacing="0"> <tr> <td class="cat"><h2>Add Location</h2></td> <td align="right" class="cat"><a href="#" class="loc_help_a"><img src="{T_THEME_PATH}/images/help.gif" /></a></td> </tr> </table> <div id="loc_help" style="width:95%; display:none; padding:2.5%; background-color:#FFE9D2"> help txt</div> <table width="70%" align="center"> <tr> <td valign="top">latitude</td> <td valign="top"><input type="text" name="loc_long" id="loc_long" size="20" /></td> </tr> <tr> <td valign="top">Longitude</td> <td valign="top"><input type="text" name="loc_lat" id="loc_lat" size="20" /></td> </tr> <tr> <td valign="top">Place name</td> <td valign="top"><input type="text" name="loc_place" id="loc_place" size="40" /></td> </tr> <tr> <td valign="top">Description</td> <td><textarea cols="30" rows="3" id="loc_desc" name="loc_desc"></textarea></td> </tr> <tr> <td colspan="2" align="center" valign="top"><input type="submit" value="add" name="add_loc" id="add_loc" /> <button class="close_add_loc">close</button></td> </tr> </table> </form> Its is then passed to the jquery Code: $("#add_loc_form").submit(function() { var loc_long = $('#loc_long').val(); var loc_lat = $('#loc_lat').val(); var loc_place = $('#loc_place').val(); var loc_desc = $('#loc_desc').val(); var dataString = "loc_long="+ loc_long +"&loc_lat="+ loc_lat +"&loc_place="+ loc_place +"&loc_desc="+ loc_desc; if(loc_long=='') { $("loc_long").css("border-color:red"); return false; } if(loc_lat=='') { $("loc_lat").css("border-color:red"); return false; } if(loc_place=='') { $("loc_place").css("border-color:red"); return false; } if(loc_desc=='') { $("loc_desc").css("border-color:red"); return false; } $.ajax({ type: "POST", url: "./ajax.php", data: dataString, success: function() { $('form').clearForm(); $("#add_map_locations").fadeOut(600); $("#map_add_success").fadeIn(600); } }); return false; }); the php is PHP Code: mysql_query("INSERT INTO table_locations (longitude, latitude, place_name, description, user_id) VALUES ('$loc_long', '$loc_lat', '$loc_place', '$loc_desc', '$user_id')"); The problem is when each entry has a number in it its submitting a rounded number to the database ie loc_long's value is -2.329102 but its submitting -2 for some reason, if you put numbers in the place or description fields its saving as a rounded number as above. If you put text in any of the fields its saving 0 instead of the text. The fields in the database as set to varchar so its not that. Can anyone help please. hello everybody, I need help about, I need to change the result to opening a url page. This script results in a value and I need the result to be open a url page. Can anyone help me?? <SCRIPT language="Javascript"> nome = new Array(4); nome[0] = new Array(4); nome[1] = new Array(4); nome[2] = new Array(4); nome[3] = new Array(4); nome[0][0]="1500"; nome[0][1]="1250"; nome[0][2]="1300"; nome[1][0]="800"; nome[1][1]="850"; nome[1][2]="900"; nome[2][0]="500"; nome[2][1]="520"; nome[2][2]="540"; nome[3][0]="400"; nome[3][1]="356"; nome[3][2]="234"; function affi() { document.form.txt.value=nome[document.form.liste.selectedIndex][document.form.taille.selectedIndex]; } </SCRIPT> <form name="form" class="texto" > Choose the article : <select name="liste"> <option>Camisas <option>Polos <option>T-shirts <option>base corporal </select> <br> Choose the size: <select name="taille"> <option>T. Small <option>T. Médium <option>T. Large </select> <br> <input type="button" value="Obter preço" onClick="affi(this.form)" name="button"> <br> <br> <input type="TEXT" name="txt"> </form> Thank's in advance rui Hi everybody I would like to be able to make it so that an order form only submits positive results. I have modified this form http://www.mcfedries.com/JavaScript/OrderTotals.asp for my friends website. She has 50 different products that she makes (different sizes and colors). The form submits results for things ordered but also for things not ordered. PROD_yellow_3.00= PROD_green_3.00= PROD_blue_3.00= PROD_red_3.00=1 PROD_purple_3.00= As you can see the only thing ordered is the $3.00 red product. But all the other ones not ordered show up in the form results. Is there a way to only send results of items actually ordered? I have looked at other order forms and they also send all results not just positive ones. Thank you. My javascript experience: none, only able to modify things. (And I wanted to ask this question on the site that has the sample order form but something wasn't working and I couldn't join.) All, I currently have a form on my page and I found this on the jQuery website: Code: $.post("test.php", $("#testform").serialize()); However, I want to do something after the results are posted so I think I need a hybrid of the one above and this one: Code: $.post("test.php", function(data) { alert("Data Loaded: " + data); }); Any help would be greatly appreciated. My form id is saveCrop, not sure if that makes a difference or not. Thanks in advance! I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url. I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help. Code: searchForms = new Ext.TabPanel({ fullscreen: true, title: 'Search', displayField: 'text', sto searchForm, iconCls: 'search', items: [{ id: 'searchSubmit', xtype: 'form', standardSubmit : true, scroll: 'vertical', items: [{ xtype: 'fieldset', title: 'Keywords', defaults: { // labelAlign: 'right' labelWidth: '35%' }, items: [{ xtype: 'textfield', name: 'keywords', id: 'keywords', placeHolder: 'EG: Music, TV', autoCapitalize : true, required: true, useClearIcon: true }] }, { xtype: 'fieldset', title: 'Advanced Search', items: [{ xtype: 'selectfield', name: 'genre', id: 'genre', label: 'Genre', options: [{ text: 'All', value: ' ' text: 'Country', value: '1' text: 'Sci-Fi', value: '2' text: 'Western', value: '3' }] }, { xtype: 'selectfield', name: 'media', id: 'media', label: 'Media', options: [{ text: 'All', value: ' ' text: 'Music', value: '1' text: 'TV', value: '2' text: 'Movie', value: '3' }] }] }, { layout: 'vbox', defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'}, items: [{ text: 'Search', ui: 'confirm', scope: this, hasDisabled: false, handler: function(){ searchForms.submit({ url: 'search.php' }); } }, { text: 'Reset', ui: 'decline', handler: function(){ searchForms.reset(); } }] }] }] }); I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all. I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file. I've also tried to load the file in the app seperately by using: Code: Ext.regModel('mobile', { fields: [ {name: 'text', type: 'string'} ] }); var searchForm = new Ext.data.TreeStore({ model: 'mobile', proxy: { type: 'ajax', url: 'search.php?keywords=test', reader: { type: 'tree', root: 'items' } } }); and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search' I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working I don't know if this is of help, but the main javascript file is: Code: var tabPanel; var homePanel = new Ext.Panel({ title: 'Home', iconCls: 'home', fullscreen: true, scroll:{direction:'vertical',threshold:7}, items: [{ html: '<center><p>Home</p></center>' }] }); var servicePanel = new Ext.Panel({ title: 'Services', iconCls: 'team', fullscreen: true, items: [{ html: '<center>Please choose a service</center>' }] }); var searchPanel = new Ext.Panel({ title: 'Search', iconCls: 'search', fullscreen: true, items: [{ html: '<center>Search</center>' }] }); var feedtabpanel = new Ext.Carousel({ title: 'More', iconCls: 'more', fullscreen: true, sortable : true, xtype:'panel', scroll:{direction:'vertical',threshold:7}, items: [ { title: 'Contact', html : '<center><h1>Contact Us</h1></center>', }, { title: 'Feedback', html : '<center><h1>Let us know what you think<h1></center>', }, { title: 'Tell a friend', html : '<center><h1>Tell your friends how much you love this app</h1></center>', } ] }); searchForms = new Ext.TabPanel({ fullscreen: true, title: 'Search', displayField: 'text', sto searchForm, iconCls: 'search', items: [{ id: 'searchSubmit', xtype: 'form', standardSubmit : true, scroll: 'vertical', items: [{ xtype: 'fieldset', title: 'Keywords', defaults: { // labelAlign: 'right' labelWidth: '35%' }, items: [{ xtype: 'textfield', name: 'keywords', id: 'keywords', placeHolder: 'EG: Music, TV', autoCapitalize : true, required: true, useClearIcon: true }] }, { xtype: 'fieldset', title: 'Advanced Search', items: [{ xtype: 'selectfield', name: 'genre', id: 'genre', label: 'Genre', options: [{ text: 'All', value: ' ' text: 'Country', value: '1' text: 'Sci-Fi', value: '2' text: 'Western', value: '3' }] }, { xtype: 'selectfield', name: 'media', id: 'media', label: 'Media', options: [{ text: 'All', value: ' ' text: 'Music', value: '1' text: 'TV', value: '2' text: 'Movie', value: '3' }] }] }, { layout: 'vbox', defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'}, items: [{ text: 'Search', ui: 'confirm', scope: this, hasDisabled: false, handler: function(){ searchForms.submit({ url: 'search.php' }); } }, { text: 'Reset', ui: 'decline', handler: function(){ searchForms.reset(); } }] }] }] }); Ext.regModel('mobile', { fields: [ {name: 'text', type: 'string'} ] }); var searchForm = new Ext.data.TreeStore({ model: 'mobile', proxy: { type: 'ajax', url: 'search.php', reader: { type: 'tree', root: 'items' } } }); var store = new Ext.data.TreeStore({ model: 'mobile', proxy: { type: 'ajax', url: 'areas.php', reader: { type: 'tree', root: 'items' } } }); var nestedList = new Ext.NestedList({ fullscreen: true, title: 'Location', displayField: 'text', sto store, iconCls: 'locate', }); nestedList.on('leafitemtap', function(subList, subIdx, el, e) { var store = subList.getStore(), record = store.getAt(subIdx), recordNode = record.node, title = nestedList.renderTitleText(recordNode), card, preventHide, anim; if (record) { card = record.get('card'); anim = record.get('animation'); preventHide = record.get('preventHide'); } if (card) { tabPanel.setCard(card, anim || 'slide'); tabPanel.currentCard = card; } }); var services = new Ext.data.TreeStore({ model: 'mobile', proxy: { type: 'ajax', url: 'subcats.php', reader: { type: 'tree', root: 'items' } } }); var servicesList = new Ext.NestedList({ fullscreen: true, title: 'Services', displayField: 'text', sto services, iconCls: 'team', }); servicesList.on('leafitemtap', function(subList, subIdx, el, e) { var store = subList.getStore(), record = store.getAt(subIdx), recordNode = record.node, title = servicesList.renderTitleText(recordNode), card, preventHide, anim; if (record) { card = record.get('card'); anim = record.get('animation'); preventHide = record.get('preventHide'); } if (card) { tabPanel.setCard(card, anim || 'slide'); tabPanel.currentCard = card; } }); Ext.setup({ icon: 'icon.png', glossOnIcon: false, tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', onReady: function() { tabPanel = new Ext.TabPanel({ tabBar: { dock: 'bottom', layout: { pack: 'center' } }, fullscreen: true, ui: 'dark', animation: { type: 'cardslide', cover: true }, items: [ homePanel, nestedList, servicesList, searchForms, feedtabpanel ] }); } }) If I have a javascript var in a webpage(html form textarea VALUE - yui) that contains html code, and want to appear it, in confirmformpage.php, then how to transfer it...? is it really needed go via PHP ...? and ofcourse use innerHTML to write it....yes I usually use an intermitened processform.php script. http://developer.yahoo.com/yui/editor view the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand. click View all 3 comments and it will show all comments then click more button try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top. http://www.runningprofiles.com/membe...ll_Script.php# Why is this?? What do i need to do to fix it? PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> $(function() { $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $("#more"+ID).html('<img src="moreajax.gif" />'); $.ajax({ type: "POST", url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php", data: "lastmsg="+ ID, cache: false, success: function(html){ $("ol#updates").append(html); $("#more"+ID).remove(); // removing old more button } }); } else { $(".morebox").html('The End');// no results } return false; }); }); $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); //comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } *{ margin:0px; padding:0px } ol.timeline { list-style:none } ol.timeline li { position:relative; border-bottom:1px #dedede dashed; padding:8px; } .morebox { font-weight:bold; color:#333333; text-align:center; border:solid 1px #333333; padding:8px; margin-top:8px; margin-bottom:8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .morebox a{ color:#333333; text-decoration:none} .morebox a:hover{ color:#333333; text-decoration:none} #container{margin-left:60px; width:580px } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <ol class="timeline" id="updates"> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="80%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> </ol> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> </div> </td> </tr> </table> </div> </body> </html> if it help here is ajax_more.php PHP Code: <?php include("../../../settings.php"); if(isSet($_POST['lastmsg'])) { $lastmsg=$_POST['lastmsg']; $lastmsg=mysql_real_escape_string($lastmsg); $small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div class="comments" id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> <?php } ?> Hi! I have been working on an assignment, and I seem to have things working okay, except that I'd like for the results (Message + list of 3 favorite movies or books) to show up in the Results box of the original page, not in a separate page. I'm sure it's something totally obvious that I'm missing, but I'm a newbie, and would appreciate any hints or tips that you all could give me. Thanks so much in advance! Heather W |