|
JavaScript - Displaying Form Results In A New Url
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. Similar TutorialsI'm very new at JavaScript and I'm trying to get each of the if statements below in a text text box with the result depending on the answer of the equation. However i can't figure out a way to allow the user to click a button to to show the result in a text box. If anyone could help it would be much appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function calculate() {
A = document.form1.text2.value
B =(parseInt(A ) * 52)
D= (parseInt(B ) * 0.015 )
if ( B <= 6000){
tax = 0;}
else
if (B <= 37001){
tax = (B - 6000) * .15;
} else
if (B<= 80001){
tax = (B - 37000) * .30 + (37000 - 6000) * .15;
} else
if (B <= 180001){
tax = (B- 80000) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;
} else
tax = (B - 180000)* .45 + (180000 - 80000 begin_of_the_skype_highlighting**************180000 - 80000******end_of_the_skype_highlighting) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;}
</script>
</HEAD>
<BODY>
<form name="form1">
Weekly Salary: <INPUT TYPE="TEXT" NAME="text2">
<INPUT TYPE="BUTTON" VALUE="SUBMIT" Onclick="calculate();">
</BODY>
</HTML>
I have been searching for a way to display facebook api friends.getAppUsers in set of 5. I am able to do this if i hard code it but I cant seem to find and comprehend a method to do this dynamically. What i want to achieve is, if i have 43 friends using the application, the code should allow users to view this result in set of 5. -prevBtn- friend1 friend2 friend3 friend4 friend5 -nextBtn- upon clicking on the nextBtn, -prevBtn- friend6 friend7 friend8 friend9 friend10 -nextBtn- etc i am actually relatively new to Javascript and Facebook Codings.. so any help would really be great! Thanks! here are my codes: Code: <div id="fb-root"></div>
<table width="750px" height="185px" background="Image/friends.jpg">
<tr>
<td align="right">
<a href="#"onClick="prev();return false"><img src="Image/prevFriend.jpg" width="36" height="154"></a>
</td>
<td width="89%">
<div id="profile_pics" align="left"></div>
</td>
<td>
<a href="#" onClick="next();return false">Image/nextFriend.jpg" width="36" height="154"></a>
</td>
</tr>
</table>
</div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
var profilePicsDiv = document.getElementById('profile_pics');
var NameDiv = document.getElementById('name');
var containDiv = document.getElementById('container');
FB.init({ appId: 'xxxxxxxxxxxx', status: true, cookie: true, xfbml: true });
FB.Event.subscribe('auth.sessionChange', function (response) {
if (response.session) {
window.location.reload();
} else {
window.location.reload();
}
});
FB.getLoginStatus(function(response) {
if (!response.session) {
profilePicsDiv.innerHTML = '<em></em>';
containDiv.innerHTML = '<em>You are not connected </em> ';
return;
}
FB.api({ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? Math.min(5,result.length) : 1;
if (numFriends > 0)
{
for (var i=0; i<numFriends; i++)
{
markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[i] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);
}
}
profilePicsDiv.innerHTML = markup;
FB.XFBML.parse(profilePicsDiv);
});
});
function next(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? Math.min(10,result.length):1;
if (numFriends > 5)
{
for (var j=5; j<numFriends; j++)
{
markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);
}
}
else{
if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{
markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic> '
);
}
}
};
profilePicsDiv.innerHTML = markup;
FB.XFBML.parse(profilePicsDiv);
});
}
function prev(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? Math.min(5,result.length):1;
if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{
markup +=
(
<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);
}
}
profilePicsDiv.innerHTML = markup;
FB.XFBML.parse(profilePicsDiv);
});
}
I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. 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> Fixed.
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> 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 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 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
]
});
}
})
Pardon me for asking a basic question. I basically need a pointer to an example or ways to learn this -- including an editor I should use for scripting. I would like to do the following: Divide a window into 3 panes; Display & manage messages in one pane; Each message has a unique subject line; Each message can be opened or deleted or forwarded. Thanks. 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 } ?> Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. Hi and thanks in advance! Someone on this site made a form for me that hides and displays fields, depending on which variable is chosen from a given array. They did a very good job with it with one exception. It seems the code that is used to hide certain fields also hides the form data rather than posting it when the form is submitted. Here is the code for both the java (listed first) and the form itself. Code: // Funtion
// Description: show or hide element in the form according to selected element
//
function show_hide(){
if (!document.getElementById) return false;
fila = document.getElementById('tr_firstname');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_firstname_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_email_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_url_data');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments');
fila.style.display = "none"; //hide
fila = document.getElementById('tr_description_comments_data');
fila.style.display = "none"; //hide
var strtext ;
var nuoption= document.frmbodydata.csreason.length;
var nuindice = document.frmbodydata.csreason.selectedIndex;
var nuvalueSelect = document.frmbodydata.csreason.options[nuindice].value;
var strtextSelect = document.frmbodydata.csreason.options[nuindice].text;
if (nuvalueSelect==0 )
{
return;
}
fila = document.getElementById('tr_description_comments');
fila.style.display = ""; //show
fila = document.getElementById('tr_description_comments_data');
fila.style.display = ""; //show
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_firstname');
fila.style.display = ""; //show
fila = document.getElementById('tr_firstname_data');
fila.style.display = ""; //show
fila = document.getElementById('tr_email');
fila.style.display = ""; //show
fila = document.getElementById('tr_email_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
fila = document.getElementById('tr_url');
fila.style.display = ""; //show
fila = document.getElementById('tr_url_data');
fila.style.display = ""; //show
}
if (nuvalueSelect==4 )
{
fila = document.getElementById('tr_receipt_invoice');
fila.style.display = ""; //show
fila = document.getElementById('tr_receipt_invoice_data');
fila.style.display = ""; //show
}
}
//
// Function
// Description: Validate the form for submit
//
function ValidateForm( form ) {
var nuindice = form.csreason.selectedIndex;
var nuvalueSelect = form.csreason.options[nuindice].value;
if (nuvalueSelect==0 )
{
return false;
}
valor = form.receipt_invoice.value;
if (!freturn(valor)) return false;
valor = form.description_comments.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==1 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==5 )
{
valor = form.firstname.value;
if (!freturn(valor)) return false;
}
valor = form.lastname.value;
if (!freturn(valor)) return false;
valor = form.email.value;
if (!freturn(valor)) return false;
if (nuvalueSelect==2 || nuvalueSelect==3 || nuvalueSelect==4 || nuvalueSelect==4 )
{
valor = form.url.value;
if (!freturn(valor)) return false;
}
alert ("Thank you for your comment.")
return true
}
//
// Function
// Description: Function to return TRUE or FALSE for inclomplete data
//
/*function freturn(pbolvalue)
{
if( pbolvalue == null || pbolvalue.length == 0 || /^\s+$/.test(pbolvalue) )
{
alert ("Incomplete Data, check please.");
return false;
}else{
return true;
}
}
*/
function ReloadCaptchaImage(captchaImageId)
{
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false;
}
Code: <center> <form id="frmbodydata" name="frmbodydata" onsubmit="return ValidateForm(this);" action="http://www.SnapHost.com/captcha/WebFormSubmit.aspx" method="post"> <input id="SnapHostID" name="SnapHostID" value="2FMYX5LLTQZQ" type="hidden" />
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Reason for contact</td>
</tr>
<tr>
<td><select id="csreason" name="csreason" onchange="show_hide();" align="left"> <option value="0">Please Select One</option> <option value="1">Contact</option> <option value="2">Report Bad Link</option> <option value="3">Gallery Submission</option> <option value="4">Preferred Partner Submission</option> <option value="5">Link Exchange</option> </select></td>
</tr>
<tr id="tr_firstname" style="display:none;">
<td>First name/Last name</td>
</tr>
<tr id="tr_firstname_data" style="display:none;">
<td><input id="firstname" /><input id="lastname" align="left" type="text" /></td>
</tr>
<tr id="tr_email" style="display:none;">
<td>Email</td>
</tr>
<tr id="tr_email_data" style="display:none;">
<td><input id="email" size="30" maxlength="30" align="left" type="text" /></td>
</tr>
<tr id="tr_receipt_invoice" style="display:none;">
<td>Receipt/Invoice</td>
</tr>
<tr id="tr_receipt_invoice_data" style="display:none;">
<td><input id="receipt_invoice" name="receipt_invoice" size="15" maxlength="15" align="left" type="text" /></td>
</tr>
<tr id="tr_url" style="display:none;">
<td>URL</td>
</tr>
<tr id="tr_url_data" style="display:none;">
<td><input id="url" size="80" maxlength="80" align="left" type="text" /></td>
</tr>
<tr id="tr_description_comments" style="display:none;">
<td>Description/Comments</td>
</tr>
<tr id="tr_description_comments_data" style="display:none;">
<td><textarea id="description_comments" rows="10" cols="50" align="left"> </textarea></td>
</tr>
<tr>
<td><i>Enter security code</i></td>
<td>SECURITY CODE</td>
</tr>
<tr>
<td><input name="CaptchaCode" class="txtFields" maxlength="6" style="width:130px; height:28px; font-size:24px; text-align:center;" type="text" /></td>
<td><a href="http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx"><img id="CaptchaImage" alt="Web Form Code" style="margin-left:20px; border:1px
solid #999999;" src="http://www.SnapHost.com/captcha/WebForm.aspx?id=2FMYX5LLTQZQ&ImgType=2" /></a> <br /> <a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a></td>
</tr>
<tr>
<td align="center"><input src="http://www.theopenpussy.com/1/images/submit.gif" alt="Submit button" type="image" /></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</form> </center>
Sorry for all the code! Is there anything I can do to maintain the hide and seek nature of the forms and show the data that is submitted, or am I stuck displaying all fields all the time? 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 |
|||||||