|
JavaScript - Dynamic Form With Javascript
Hi,
I'm trying to create a dynamic form using Javascript. This form essentially needs to collect data through certain fields and populate another. Code: <input name="Field1" type="text" /> <input name="Field2" type="text" /> <input name="Field3" type="text" /> <input name="Field4" type="text" /> <input name="Field5" type="text" /> Field 6 value = answer I'm stuck on how to go about this. I'm assuming I need to create multiple conditions to check each field and then output to a text box? Code: if ((document.thisform.Field1.value == null) && (document.thisform.Field2.value == null)) {
I've done a bit of searching around but can't find anything with particular reference to this exact requirement, only brick level functions. If I have left anything out, or if it's all amiss, please let me know. Similar TutorialsHello, I've used the concept from this website to build a form. http://www.enviromark.ca/english/quoteform.html Notice how the second drop down options change depending on what option is selected in the first drop down. Here's the Javascript Code:
var Option1_Array = new Array("Choose a version", "1", "2");
var Option2_Array = new Array("Choose a version", "3", "4");
function program(objProgram) {
var objVersion = objProgram.form.Version;
var selectedArray = window[objProgram.options[objProgram.selectedIndex].value.replace(/\s/g,'') + "_Array"];
objVersion.options.length = 0;
for (var i=0; i < selectedArray.length; i++) {
objVersion.options[i]=new Option(selectedArray[i], selectedArray[i].replace(/->\s/g, ""));
}
}
Here's the HTML Code: <form>
<select name="Program" onChange="program(this)">
<option value="Start">Please choose a program</option>
<option value=Null>---------------------------------------></option>
<option value="Option1">1</option>
<option value="Option2">2</option>
</select>
<select name="Version" onChange="">
</select>
</form>
Now, this code works perfectly, and does exactly what I want it to. BUT I'd like to add more fields that accomplish the same thing. For example choose option1 --> version 2 --> type 3 --> thing 5 Now, in order to do this I believe you need to generate a 'value = "a_value"' in the generated html option and select fields. That way, all you need to do is make separate functions for each level and the function can call the 'value' html attribute to handle each <select> depending on its declared value. If this is the best way (it sounds a little sketchy to me) then any help would be great. Or, if you can add on more child selection options within one function. Thanks, -Matthew Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong So I have a little calendar widget on my site, for people to choose their dates for a reservation system. They then click a 'Book Now' button which creates a dynamic url (using their start date and the number of dates) to the booking engine. The problem is, the way it accomplishes this (window.location.href=), breaks cross-domain tracking on Google Analytics. And I'm not smart enough to figure out how to do it any other way. What I'd like to do is have clicking the Book Now button change the URL in the form action within the form with ID resForm, and then submit the form. I'm hoping someone can help me edit the form so that it accomplishes this. I'd be incredibly thankful. This is what I currently have: Code: <script>
jQuery(document).ready(function($) {
$(".book-now").click(function() {
if($('#check-in').length > 0 && $('#DepartureDate').val() != '') {
var data = $('#check-in').val();
var arr = data.split('/');
var datac = $('#DepartureDate').val();
var arr2 = datac.split('/');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(arr[2],arr[0] -1,arr[1]);
var secondDate = new Date(arr2[2],arr2[0] -1,arr2[1]);
var diffDays = Math.round((firstDate.getTime() - secondDate.getTime())/(oneDay));
if ((diffDays) < 0)
{
diffDays = Math.abs(diffDays);
var link = "https://res.windsurfercrs.com/bbe/page1.aspx?propertyID=13841&checkin=" + arr[0] + "/" + arr[1] + "/" + arr[2] + "&nights=" + diffDays;
console.log(link);
window.location.href= link;
}
else
{
alert ('Please fill in correct Check-In and Check-Out dates. The Check-In date must be before the Check-Out date.');
}
} else {
alert ('Please fill in a Check-In and Check-Out date, thanks!');
}
});
});
</script>
The form looks like this: Code: <form action="#" onSubmit="_gaq.push(['_linkByPost',this]);" method="post" id="resForm"> <input type='text' name="checkin" id="check-in" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='arrivaldate'/> <input name="checkout" id="DepartureDate" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='departuredate'/> <input type="button" value="BOOK NOW" class='book-now' /> </form> Reply With Quote 01-25-2015, 12:46 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Just call the _gaq() function manually. Code: _gaq.push(['_linkByPost',document.getElementBy("resForm")])
window.location.href= link;
Hey there CF members, i have a huge problem with dynamic JavaScript i am using .load function which is the part of my script built by my programmers to load objects dynamically in JS. the code reads PHP Code: $("#content").load("SOME CODE HERE",hideUpdate); The division id is Content as u can see above. the need is to add a html code at the beginning of it like in php we can use dot operator like "SOME CODE IS " . $ code same way what can we use in here in dynamic html to combine a custom HTML regards hi i got some code from another site. i modified it according to my needs. what is it doing it adds dynamic form fields by clicking "add another" link. the problem is when logged in user wants to modify his contact details he clicks on edit then gets to this modification form where all the data in his db is selected and displayed in that form fields. so the problem here is when he clicks on add another link it adds up that many fields sets that appeared currently. means if there appeared four sets of fields then clicking on add another link will add four more fields. what i want is to add only one set of fields which contains of text field and select menu. my code is here Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
});
});
</script>
<style>
#myForm div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#myForm label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#btnAdd {
margin-left:130px;
}
</style>
</head>
<body>
<form id="myForm" method="post" action="process.php">
<div>
<label>First Name: </label><input type="text" name="fname" id="fname"><br>
</div>
<div>
<label>Last Name: </label><input type="text" name="lname" id="lname"><br>
</div>
<?php
$connect = mysql_connect("localhost","user","pass");
mysql_select_db("db");
$get_im = mysql_query("SELECT * FROM contactim WHERE userid='$_SESSION[userid]'");
$count = mysql_num_rows($get_im);
while($get_contactim = mysql_fetch_assoc($get_im)) {
$userim_db = $get_contactim['username'];
$im_db = $get_contactim['im'];
//echo $userim_db."<br>";
for($i = 1; $i <= $count; $i++) {
?>
<div id="input1" class="clonedInput">
<label>IM Screen Names:</label>
<input type="text" name="name[]" id="name1" value="<?php if($userim_db == "") { echo ""; } else { echo $userim_db; } ?>" />
<select name="screenname[]" id="screenname1">
<option value="AIM" <?php if($im_db == "AIM") { echo "SELECTED"; } ?>>AIM</option>
<option value="gtalk" <?php if($im_db == "gtalk") { echo "SELECTED"; } ?>>Google Talk</option>
<option value="skype" <?php if($im_db == "skype") { echo "SELECTED"; } ?>>Skype</option>
<option value="windows" <?php if($im_db == "windows") { echo "SELECTED"; } ?>>Windows Live</option>
<option value="yahoo" <?php if($im_db == "yahoo") { echo "SELECTED"; } ?>>Yahoo</option>
</select><br />
<?php
}
}
?>
</div>
<div>
<a href="#" id="btnAdd">Add another</a>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
hi i need help in creating dynamic form using jquery. i create a form in this form i want when "add another" link is clicked then it adds one more set of fields. form is here 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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script src="js/script.js" type="text/javascript"></script>
<style>
#form1 div {
font-size:14px;
margin-bottom: 10px;
clear: left;
}
#form1 label {
width: 125px;
display: block;
font-size:14px;
font-weight: bold;
color: #999;
float: left;
}
#link {
margin-left:125px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div>
<label>IM Screen Names:</label>
<input type="text" name="textfield" id="textfield" />
<select name="select" id="select">
<option value="AIM" selected="selected">AIM</option>
<option value="gtalk">Google Talk</option>
<option value="skype">Skype</option>
<option value="windows live">Windows Live</option>
<option value="yahoo">Yahoo</option>
</select><br />
<div id="link"><a href="">Add another</a></div>
</div>
</form>
</body>
</html>
Is this possible? Please look at the attached image. I am trying to create a team creation page for a site I am making, however I want the user to be able to see all the names they enter before the information is passed to the .php file to send it to the MySQL table. 1. So, every time the user enters a name and presses the "add name" button the name details are stored in an Javascript array and displayed in the box below. 2. When the user presses the "save team" button the team name is passed by a simple form post and the javascript array is passed to a php array and then processed ready to be passed to the MySQL table. The problem is I don't know to do the first bit (number1). Any ideas or pointers? I have this piece of javascript code, which enables me to get my Picasa photos without link back feature, in my webpage. The issue is with the hardcoded RSS url feed. I want this to be dynamically passed as a variable to the java script. I use a PHP code, where this javascript is coded. In the below code, if I say var samples = <?php $url_code ?>, the javascript does not recognize. Can someone help on this, as I use the same PHP code, with different url feeds, to display different picasa photo albums ? Code: <script type="text/javascript">
function load() {
var samples = "https://picasaweb.google.com/data/feed/base/user/......................../........./.........?alt=rss&kind=photo&authkey=.....................&hl=en_US"
var options = {
numresults: 2,
scaleimages: true,
maintainAspectRatio : false,
displayTime: 1000,
transistionTime: 300,
//linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>
hello Sir/Mam i have a piece of code here that creates a dynamic form.. Code: <script type='text/javascript' language='javascript'>
<!--
function createTextbox(){
var textboxtag = document.createElement("input");
textboxtag.setAttribute("name","username");
document.getElementById("form1").appendChild(textboxtag);
}
-->
</script>
<body>
<div id='div1'>
<button name='textbox' onclick='createTextbox()'>Textbox</button>
</div>
<div id='div2'>
<form id='form1' action='#' method='post'>
</form>
</div>
</body>
this code sets the "name" attribute to "username" automatically.. my problem is how to set the name attribute manually by the user after the dynamic textbox is created.. just like in visual basic where after you create a form e.g button or textfield, theres a side pane where you can change attributes like name, value, etc.. tnx for the time reading my post..sorry for my poor explanation of the problem..im new in javascript and trying to learn it all by myself.. Hi, I'm pretty new to javascript and ajax and need some help. I want to create a form that has an advanced search page which changes the search fields that appear, depending on what the user clicks. For example, at the top there are three buttons: 1. Search images 2. Search videos 3. Search audio As a user clicks these I want different search fields to be shown on the page. I have tried searching for a way to do this via Google, with no luck. Can someone point me in the correct direction (via a demo or tutorial) on how to do this? I don't just want the answer as I really want to learn how to get this to work! Thanks i want to build a form have a "payment" select option ex. when user choose option "credit card" is will show some textbox(firstname and lastname,ccnumber,ccv,expday...) when user choose option "paypal" is will show some textbox(firsname,email paypal). Please help me solve this Hi guys, I am able to create some of the dynamic controls but having trouble to order them in one column.. i have this view : field1 field2 field3 what i want is : field1 field2 field3 below is my code : function AddLevel2() { //var mainContainer2 = document.getElementById('mainContainer2'); var newDiv = document.createElement('div') newDiv.style.width = "560px"; newDiv.style.backgroundColor= projbgGr; newDiv.style.position = "relative"; newDiv.style.left = "245px"; var BUDDL = document.createElement('select'); // size lenght of the DDL for both IE or Firefox BUDDL.setAttribute("style","width:100px"); //firefox BUDDL.setAttribute("width","100px"); BUDDL.style.width = "100px"; BUDDL.id = 'BU' + b ; BUDDL.setAttribute('name','BU' + b); BUDDL.style.position = "relative"; BUDDL.style.left = "5px"; BUDDL.onchange=show; // filling the DDL by ITEM array Elements var i=0; for (i=0;i<=4;i++) { objOption = document.createElement('option') objOption.text = "BU" + i; //objOption.value=ITEM1[i]; BUDDL.options.add(objOption); } var j =1; var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e"; //add Description Unit Description = document.createElement( 'INPUT' ); Description.id = 'D' + b ; Description.setAttribute('name','D' + b); Description.size=2; // size lenght of the Comment for both IE or Firefox Description.setAttribute("style","width:300px"); //firefox Description.setAttribute("width","300px"); Description.style.width = "300px"; Description.onblur = show; //Description.style.backgroundColor= bgc; //end Description //number of testers NumberTesters = document.createElement( 'INPUT' ); NumberTesters.id = 'T' + b; NumberTesters.setAttribute('name','T' + b ); NumberTesters.size=2; // size lenght of the Comment for both IE or Firefox NumberTesters.setAttribute("style","width:40px"); //firefox NumberTesters.setAttribute("width","40px"); NumberTesters.style.width = "40px"; NumberTesters.onblur=show; //NumberTesters.style.backgroundColor= bgc; //number of testers // Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.style.position = "relative"; newDelButton.style.left = "7px"; // Append new text input to the newDiv newDiv.appendChild(BUDDL); newDiv.appendChild(Description); newDiv.appendChild(NumberTesters); newDiv.appendChild(newDelButton); //newDiv.appendChild(newAddButton2); //Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); //Add a handler to button for deleting the newDiv from the mainContainer newAddButton.onclick = AddLevel22; //newAddButton.onclick = AddNewRecord; //newAddButton2.onclick = AddLevel3; newDelButton.onclick = function() { var answer = confirm ("You have to delete all UATs under this BU first\n \tIs this done ?\t") if (answer) {alert ("Now you can delete it"); mainContainer.removeChild(newDiv);} else alert ("Then please check all UATs under this BU first and delete them"); } b++; document.form1.NumberOfBU.value = parseInt(b-1); //alert(document.form1.NumberOfBU.value); //AddLevel3; for (UATCounter = 1 ; UATCounter<=limit; UATCounter++) { //var newDiv = document.createElement('div') // // newDiv.style.width = "250px"; // newDiv.style.backgroundColor= projbgVi; // newDiv.style.position = "relative"; // newDiv.style.left = "350px"; var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e"; newMDate = document.createElement( 'INPUT' ); newMDate.id = 'M'+ (b-1) + '_' + UATCounter ; newMDate.setAttribute('name','M'+ (b-1) + '_' + UATCounter); newMDate.setAttribute('type', 'Date'); newMDate.size=7; newMDate.style.backgroundColor= bgc; //newMDate.onfocus=Calend; // function Calend () // { // fnInitCalendar(this, this.getAttribute('id'), 'style=calendar.css,close=true'); // } newMDate.onblur = show; //Frontline Hours FLHours = document.createElement( 'INPUT' ); FLHours.id = 'FL'+ (b-1) + '_' + UATCounter ; FLHours.setAttribute('name', 'FL'+ (b-1) + '_' + UATCounter); FLHours.size=2; // size lenght of the Comment for both IE or Firefox FLHours.setAttribute("style","width:40px"); //firefox FLHours.setAttribute("width","40px"); FLHours.style.width = "40px"; //NumberTesters.style.backgroundColor= bgc; //Frontline Hours MGRHours = document.createElement( 'INPUT' ); MGRHours.id = 'MG'+ (b-1) + '_' + UATCounter ; MGRHours.setAttribute('name', 'MG'+ (b-1) + '_' + UATCounter); MGRHours.size=2; // size lenght of the Comment for both IE or Firefox MGRHours.setAttribute("style","width:40px"); //firefox MGRHours.setAttribute("width","40px"); MGRHours.style.width = "40px"; //NumberTesters.style.backgroundColor= bgc; //Frontlne Hours //Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.style.position = "relative"; newDelButton.style.left = "7px"; //newDiv.appendChild(ProjDDL3); newDiv.appendChild(newMDate); newDiv.appendChild(FLHours); newDiv.appendChild(MGRHours); mainContainer.appendChild(newDiv); } } Hi, I'd like to create a textarea and a division so that whatever embed code you put in the textarea it gets executed on the division in real-time. Your kind help is greatly appreciated! JavaScript newbie Hi everyone, i am stuck at a problem. i am trying to craete a redimmensionable array using javascript, is there a way to do this, i know that this can be done in vbscript using redim and preserve commands. If not then is it possible to variables between javascript and vbscript, or call vbscript function using javascript. a sample code will be much aprreciated thanks for your time! J Hello, I have been noticing a really cool trend on the web and it is called the javascript carousel. Not the one from dynamic Drive. Here is an example of what I am talking about; carousel http://food.yahoo.com/;_ylt=AtuShzEA...hz75HDg9VIY.Y5 check on the bottom of the page where it says "try these recipes" I just love the circle indicating how many "pages there are. Do you know where I can find the tutorial or script for this effect? Thanks, Creations_Kash hi friends, I am looking for a solution to display the records of a dynamically selected mysql table using ajax,jsp & js combinations. any sites showing some example thnx in advance. Hi all! Im trying to work out a way of entering the contents of a div (which changes regularly) into a form field when it is focused on. The issue is that the div containing the text value is in an iframe of a php file (gallery.php). The div (#lbBottom) text contents that I need to use is the caption of the current photo open with a light-box style jquery plugin (slimbox). The gallery is formed using the php and needs to be in an iframe to align the lightbox correctly. #lbBottom is generated by title=\"Code: $alttag1\" and give a result of Code: +the current photo number. Ideally it is just the photo number (last 2 characters) that I need but the contents of the div will do! Would appreciate any help or advice anyone can give loads! As you will see with the mywrite function, im getting a bit tangled! GAME HTML 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=utf-8" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
function mywrite() {
$.get("gallery.php", function(data){
//alert("Data Loaded: " + data);
document.getElementById('#lbBottom').text = myVar;
var addanswer = data;
});
document.quiz.q1.value.focus();
document.quiz.q1.value = addanswer
alert("done");
}
</script>
</head>
<body>
<div id="leftcol">
<form id="quiz" name="quiz">
<p><label for="q1"><img src="images/q1.jpg" alt="Question1"/><span class="photoquestion">1.</span></label><input id="q1" type="text" value="" onfocus="mywrite()" name="q1" /></p>
<p><label for="q2"><span>2.</span>We’ll go that extra mile!</label><input id="q2" type="text" onfocus="mywrite()" value="" name="q2" /></p>
<p><label for="q3"><span>3.</span>Question 3</label><input id="q3" onfocus="mywrite()" type="text" value="" name="q3"/></p>
<p><label for="q4"><img src="images/q4.jpg" alt="Question4"/><span class="photoquestion">4.</span></label><input id="q4" onfocus="mywrite()" type="text" value="" name="q4"/></p>
<input class="submit" type="submit" name="submit" value="Check Answers" />
</form>
</div>
<iframe id="gallery_cont" src="gallery.php" name="iframe" scrolling="no">
</iframe>
</body>
</html>
GALLERY PHP 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> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/lightbox.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="gallery"> <?php $cleanup = array(".jpg", ".","_"); $dir1 = "./adverts/"; $imageset1 = opendir($dir1); while(false != ($file1 = readdir($imageset1))) { if(($file1 != ".") and ($file1 != "..") and ($file1 != ".DS_Store") and ($file1 != "thumbs")) { $alttag1 = str_replace($cleanup," ",$file1); echo("<a href=\"./adverts/$file1\" title=\"Code: $alttag1\" rel=\"lightbox-group\" ><img src=\"./adverts/thumbs/$file1\" alt=\"$alttag1\" /></a>\n"); } } ?> </div> </body> </html> Hello all! As it could not be otherwise, in my first post here, I have a horribly simple problem... I'm currently working on a homepage for my browser, where I have many frequently used links, and I'm trying to implement some search engines too. The one I'm working on is simply, a predefined URL, and the input text string at the end. For example: "http://www.example.com/search/(textinput)" This is the code I have so far: Code: <script type="text/javascript">
function gosearch()
{
var srchstring = document.getElementById('string').value;
var resulturl = 'http://www.example.com/search/' + srchstring;
window.location.href = resulturl;
}
</script>
<form name="searchform" onsubmit="gosearch();">
<input id="string" size="31" maxlength="255" value="" />
<input type="submit" value="Search!" />
</form>
But what happens by using this code, is that, to the current URL, a "?" gets added, as if the code tried to send some info using GET. I could do this quite easily using PHP, but as I want to use this locally, I cannot use any server-side code... Besides the fact that I want to learn some JScript too. Thanks for your help. |
|||||||