|
JavaScript - Submit Onload With Dynamic Form Fields
Am integrating a Barclays epdq shopping cart into an existing website, part of the regulations with this system is that you can only submit from one 'allowed url'. To enable access from multiple url's I need to create a 'jump page'.
This needs to be a simple page that takes any variables posted to it and re-posts them (onload) onto the epdq shopping cart. The problem is I am unable to populate the form dynamically and submit onload. I have tested and it all works fine if hardcoded. Is it possible to submit a dynamically generated form using javascript? PHP Code: foreach ($_POST as $name => $value){ $newVars .= '<INPUT value="' . $value . '" name="' . $name .'" type="hidden" />'; } Code: <html> <head></head> <body onLoad="document.epdqformer.submit();"> <FORM name="epdqformer" id="epdqformer" action="https://secure2.epdq.co.uk/cgi-bin/CcxBarclaysEpdq.e" method="POST"> PHP Code: Similar TutorialsI have a form that only shows the submit (update) buttons if the value select field beside it is changed. But what is someone has JS disabled, how can I enable them? Code: <select title="3553" name="3553" onchange="JavaScript:document.cart.add3553.disabled=false;"> From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. I'm trying to understand how forms, data, php, javascript all work together. So 1) I hardcoded some html form fields with values using php using "echo", then 2) I dynamically created some more html form fields with values using javascript using "createElement" and appending to the html form element. When I click on the submit form, the php created form fields still show on the webpage, but the javascript dynamically created form fields disappear. Can anyone shed some light for me? Why are the javascript created form fields disappearing when I click on submit and not the PHP created form fields? Thank you! Code: <form method="post" id="commentform" action="<?php echo $PHP_SELF?>"> Here is the code for test.html: Code: <html>
<head><title></title></head>
<body>
<script type="text/javascript">
function OnSubmitForm(){
document.myform.action ="insert.html";
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm()" method="get">
<input type='radio' name='Search' value='test'>test</input>
</form>
<a href='javascript:document.myform.submit()'><img src='images/buttonnext.jpg'></a>
</body>
</html>
The way I want it to work: when the img (buttonnext.jpg) is clicked, the form is submitted. When the form is submitted it runs the javascript, which sets the action to be that insert.html is loaded. i.e. the end result should be to redirect to insert.html?Search=test The way that it is working now: the page is redirected to test.html?Search=test Note: If I use a submit button that is part of the form (i.e. input field with type "submit") the page is redirected correctly. What do I need to change to accomplish my goal? I am using a script that duplicates a fieldset and an onBlur event that updates a sub total when you enter a value into 3 fields in the set but I am having one glitch that I can not figure out and would appreciate any insight you can provide. Here is the trouble: The duplication of the fieldset works great. I have another script which is creating a sum ("sum") of the fields named "unitPrice" in the original fieldset. When I duplicate the fieldset that has the new "unitPrice" fields they do not get calculated into that sum. I am sure the "unitPrice" fields are being renamed in the new fieldset but what name would I use and how do I write it into the calculation so that the sub total ("sum") is updated with all of the "unitPrice" fields? Thanks for your help. Code: <!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
// Suffix + Counter
var suffix = ':';
var counter = 1;
// Clone nearest parent fieldset
function cloneMe(a) {
// Increment counter
counter++;
// Find nearest parent fieldset
var original = a.parentNode;
while (original.nodeName.toLowerCase() != 'fieldset') {
original = original.parentNode;
}
var duplicate = original.cloneNode(true);
// Label - For and ID
var newLabel = duplicate.getElementsByTagName('label');
for (var i = 0; i < newLabel.length; i++) {
var labelFor = newLabel[i].htmlFor
if (labelFor) {
oldFor = labelFor.indexOf(suffix) == -1 ? labelFor : labelFor.substring(0, labelFor.indexOf(suffix));
newLabel[i].htmlFor = oldFor + suffix + counter;
}
var labelId = newLabel[i].id
if (labelId) {
oldId = labelId.indexOf(suffix) == -1 ? labelId : labelId.substring(0, labelId.indexOf(suffix));
newLabel[i].id = oldId + suffix + counter;
}
}
// Input - Name + ID
var newInput = duplicate.getElementsByTagName('input');
for (var i = 0; i < newInput.length; i++) {
var inputName = newInput[i].name
if (inputName) {
oldName = inputName.indexOf(suffix) == -1 ? inputName : inputName.substring(0, inputName.indexOf(suffix));
newInput[i].name = oldName + suffix + counter;
}
var inputId = newInput[i].id
if (inputId) {
oldId = inputId.indexOf(suffix) == -1 ? inputId : inputId.substring(0, inputId.indexOf(suffix));
newInput[i].id = oldId + suffix + counter;
}
}
// Select - Name + ID
var newSelect = duplicate.getElementsByTagName('select');
for (var i = 0; i < newSelect.length; i++) {
var selectName = newSelect[i].name
if (selectName) {
oldName = selectName.indexOf(suffix) == -1 ? selectName : selectName.substring(0, selectName.indexOf(suffix));
newSelect[i].name = oldName + suffix + counter;
}
var selectId = newSelect[i].id
if (selectId) {
oldId = selectId.indexOf(suffix) == -1 ? selectId : selectId.substring(0, selectId.indexOf(suffix));
newSelect[i].id = oldId + suffix + counter;
}
}
// Textarea - Name + ID
var newTextarea = duplicate.getElementsByTagName('textarea');
for (var i = 0; i < newTextarea.length; i++) {
var textareaName = newTextarea[i].name
if (textareaName) {
oldName = textareaName.indexOf(suffix) == -1 ? textareaName : textareaName.substring(0, textareaName.indexOf(suffix));
newTextarea[i].name = oldName + suffix + counter;
}
var textareaId = newTextarea[i].id
if (textareaId) {
oldId = textareaId.indexOf(suffix) == -1 ? textareaId : textareaId.substring(0, textareaId.indexOf(suffix));
newTextarea[i].id = oldId + suffix + counter;
}
}
duplicate.className = 'duplicate';
insertAfter(duplicate, original);
}
// Delete nearest parent fieldset
function deleteMe(a) {
var duplicate = a.parentNode;
while (duplicate.nodeName.toLowerCase() != 'fieldset') {
duplicate = duplicate.parentNode;
}
duplicate.parentNode.removeChild(duplicate);
}
</script>
<script>
function myFunction(){
var the_fields = document.getElementsByName("unitPrice");
var the_sum = 0;
for (var i=0; i<the_fields.length; i++){
if (the_fields[i].value != "" && !isNaN(the_fields[i].value)) {
the_sum += Number(the_fields[i].value);
}
}
document.repairform.sum.value = (the_sum.toFixed(2));
}
</script>
<SCRIPT LANGUAGE="JavaScript">
function CalculateTotal() {
firstnumber = document.repairform.sum.value/100;
secondnumber = document.repairform.tax.value;
total = (firstnumber * secondnumber -0) + (document.repairform.sum.value -0);
document.repairform.grandTotal.value = total.toFixed(2)
;
}
</SCRIPT>
<script>
function checkDecimal(obj, objStr){
var objNumber;
if(isNaN(objStr) && objStr!=''){
alert('Value entered is not numeric');
objNumber = '0.00';
}
else if(objStr==''){
objNumber = '0.00';
}
else if(objStr.indexOf('.')!=-1){
if(((objStr.length) - (objStr.indexOf('.')))>3){
objStr = objStr.substr(0,((objStr.indexOf('.'))+3));
}
if(objStr.indexOf('.')==0){
objStr = '0' + objStr;
}
var sLen = objStr.length;
var TChar = objStr.substr(sLen-3,3);
if(TChar.indexOf('.')==0){
objNumber = objStr;
}
else if(TChar.indexOf('.')==1){
objNumber = objStr + '0';
}
else if(TChar.indexOf('.')==2){
objNumber = objStr + '00';
}
}
else{
objNumber = objStr + '.00';
}
obj.value = objNumber;
}
</script>
</head>
<body>
<form id="item_details" name="repairform" method="post" action="#" onSubmit="return false;">
<h2>Contact Information</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td>
<label for="name">
Name:
</label>
</td>
<td>
<input type="text" id="name" name="name" />
</td>
<td>
<label for="form-phone">
Phone:
</label>
</td>
<td>
<input id="form-phone" type="tel" required> </td>
</tr>
<tr>
<td>
<label for="form-date">
Date:
</label>
</td>
<td>
<input id="form-date" type="date"required>
</td>
<td>
<label for="form-datewanted">
Date Wanted
</label>
</td>
<td>
<input id="form-datewanted" type="date" required>
</td>
</tr>
<tr>
<td>
<label for="form-address">
Address
</label>
</td>
<td>
<input id="form-address" type="text">
</td>
</tr>
</table>
</fieldset>
<h2>Vehicle Information</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td>
<label for="form-ymc">
Year-Model-Color</label>
</td>
<td>
<input id="form-ymc" type="text" required>
</td>
<td>
<label for="form-make">MAKE</label>
</td>
<td>
<input id="form-make" type="text">
</td>
</tr>
<tr>
<td><label for="form-bodytype">BODY TYPE</label>
</td>
<td>
<input id="form-bodytype" type="text">
</td>
<td>
<label for="form-unitno">UNIT NO.</label>
</td>
<td>
<input id="form-unitno" type="text">
</td>
</tr>
<tr>
<td>
<label for="form-serialno">SERIAL NO.</label>
</td>
<td>
<input id="form-serialno" type="text">
</td>
<td>
<label for="form-motorno">MOTOR NO.</label>
</td>
<td>
<input id="form-motorno" type="text">
</td>
</tr>
<tr>
<td>
<label for="form-mileage">MILEAGE</label>
</td>
<td>
<input id="form-mileage" type="text">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</fieldset>
<h2>Repair Estimate</h2>
<fieldset>
<span class="tab">
<a href="#" onClick="cloneMe(this); return false;" class="cloneMe" title="Add">+</a>
<a href="#" onClick="deleteMe(this); return false;" class="deleteMe" title="Delete">x</a>
</span>
<table cellspacing="10">
<tr>
<td>
<label for="repair_replace">Repair/Replace</label>
</td>
<td class="mainText">
<input class="radio" name="repair_replace" type="radio" value="Repair" />Repair<br>
<input class="radio" name="repair_replace" type="radio" value="Replace" />Replace
</td>
<td>
<label for="form-description">Description:
</label>
</td>
<td >
<textarea id="form-description" name="form-description" cols="5" rows="5" ></textarea>
</td>
</tr>
<tr>
<td>
<label>PARTS AND MATERIALS </label>
</td>
<td><input name="unitPrice" value="" id="parts" onBlur="myFunction(); checkDecimal(this,this.value)" onFocus="this.focus();" class="dollar" />
</td>
<td>
<label>LABOR </label>
</td>
<td ><input name="unitPrice" value="" id="labor" type="text" onblur="myFunction(); checkDecimal(this,this.value)" class="dollar"/>
</td>
</tr>
<tr>
<td>
<label>REFINISHING </label>
</td>
<td><input name="unitPrice" id="refinishing" type="text" onBlur="myFunction(); checkDecimal(this,this.value)" class="dollar"/>
</td>
<td>
</td>
<td >
</td>
</tr>
</table>
</fieldset>
<h2>Price Estimate</h2>
<fieldset>
<table cellspacing="10">
<tr>
<td><label>SUB TOTAL </label>
</td>
<td><input type="text" name="sum" class="dollar" readonly/>
</td>
<td>
<label>Tax %</label>
</td>
<td>
<input class="tax" type="text" name="tax" onBlur="CalculateTotal()" />
</td>
</tr>
<tr>
<td>
<label>GRAND TOTAL </label>
</td>
<td>
<input type="text" name="grandTotal" class="dollar" readonly/>
</td>
<td>
</td>
<td >
<p>
<input type="submit" value="Send Estimate" onClick="myFunction()">
</p>
</td>
</tr>
</table>
</fieldset>
<p>
<input type="submit" value="Submit" class="button" /><input type="reset" value="Reset" class="button" />
</p>
</form>
</body>
</html>
hi guys kindly assist in this i have the code below used to generate additional dynamic fields how can i save data entered in mysql??? <HTML> <HEAD> <TITLE>New Task</TITLE> <link rel="stylesheet" href="style1.css" type="text/css"/> <meta http-equiv="Content-Script-Type" content="text/javascript"> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = rowCount + 1; newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </SCRIPT> </HEAD> <BODY> <br> <br> <h2>INPUT NEW TASK</h2> <table border="1" width="100%"> <tr> <td> <fieldset> <legend></legend> <table border="0" width="100%"> <tr> <td>User:</td> <td><input type="text" size="20" name=""disabled></td> <td>Start Date:</td> <td><input type="text" size="20"></td> </tr> <tr> <td>Client name:</td> <td><select name=""></select></td> <td>Process</td> <td><select name=""></select></td> <td>Day?</td> <td><input type="text" size="5"></td> </tr> </table> </fieldset> <fieldset> <legend>Tasks</legend> <table border="0" width="100%"> <th width="5">select</th><th width="5">No</th><th width="150">Task</th><th width="400">Description</th><th width="100">Start Time</th> <th width="100">End Time</th><th width="100">Worked hrs</th><th width="90">Action</th> <tr> </table> <TABLE id="dataTable" width="100%" border="1"> <TD><INPUT type="checkbox" name="chk"/></TD> <td width="5"><input type="text" size="5"name=""disabled></td> <td width="150"><select name=""></select></td> <td><textarea rows="2" cols="30"></textarea></td> <td><input type="text" size="10"name=""></td> <td><input type="text" size="10"name=""enabled></td> <td><input type="text" size="10"name=""disabled></td> <td><input type="button"type="button" value="+" onclick="addRow('dataTable')"></td> <td><input type="button"type="button" value="-" onclick="deleteRow('dataTable')"></td> </tr> </table> </fieldset> <table border="0" width="100%"> <tr> <td width="122"><input type="button" value="SAVE"></td> <td></td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </BODY> </HTML> i have a script which i found on the internet. i modify that script according to my needs. what is in that script is there are three form fields with two buttons. one button is "Give me more fields" clicking on this button will give you more fields. and second button is submit so the data goes to server side and will be added to db. the problem is when i click give me more fields it gives me three more fields which is right but when i fill all these fields and click submit button it adds to the db but the data in the first three fields adds in the one row and the other three fields data adds in separate row which is not fine for me. so how can i do this so all the data will be added to only one row. here is js code Code: var counter = 0;
//Start a counter. Yes, at 0
function add_phone() {
counter++;
// I find it easier to start the incrementing of the counter here.
var newFields = document.getElementById('addQualification').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
// This will change the 'name' field by adding an auto incrementing number at the end. This is important.
}
var insertHere = document.getElementById('addQualification');
// Inside the getElementById brackets is the name of the div class you will use.
insertHere.parentNode.insertBefore(newFields,insertHere);
}
here is my form Code: <form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="phone">
Degree:
<input type="text" name="degree_0" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_0" value="" /><br>
Institute:
<input type="text" name="institute_0" value="" /><br>
</div>
<div id="addQualification" style="display: none;">
Degree:
<input type="text" name="degree_" value="" /><br>
CGPA/Grade:
<input type="text" name="cgpa_" value="" /><br>
Institute:
<input type="text" name="institute_" value="" /><br>
</div>
<input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
<input type="submit" name="submit" value="submit" />
</fieldset>
</form>
here is my php Code: <?php
if(isset($_POST['submit']))
//This checks to make sure submit was clicked
{
echo "You clicked submit!<br>";
echo "Here is your data<br>";
echo "<br>";
if ($_POST['cgpa_0'])
//This checks that the proper field has data
{
$continue = FALSE;
$i = 0;
while ($continue == FALSE)
{
if (isset($_POST['degree_'.$i]))
//This looks for an entry after 0 and increments
{
echo $_POST['degree_'.$i] . " = " . $_POST['cgpa_'.$i] . "<br>";
//Echoing the data
$degree1 = $_POST['degree_'.$i];
$cgpa1 = $_POST['cgpa_'.$i];
$institute1 = $_POST['institute_'.$i];
$db = mysql_connect("localhost");
mysql_select_db("test", $db);
$query = "INSERT INTO cv
(
degree1,
cgpa1,
institute1
)
VALUES
(
'$degree1',
'$cgpa1',
'$institute1'
)";
$result = mysql_query($query);
//The four lines above is the example on how the data would be put into a MySQL database. It's not used here
}
else
{
$continue = TRUE;
}
$i++;
}
}
}
?>
hi i am newbie to js please help me like a newbie thanks. i want to make a form. the form will have three text fields and with two buttons. what i want with this form is when the user enters the first three fields and if he wants to add more then he will click on add more button and on the same page three more fields will appear below the first three fields. the user will then enter these three fields then if he wants to add more then he will click on add more button. so three more fields will appear below the first six fields. user will enter these fields. he will be allowed to enter upto eight or less than eight times. once he finishes with this then he will click the second button to insert this data into db. I am very very new to programming and trying to create a web interface for a model. The user needs to be able to add as many compounds as they want and add a variable number of subgroups for each compound. Also, each input needs a distinct name. I have tried adapting someone else code to add/remove form inputs but am not having any luck creating subgroups. below is my code Code: <html>
<head>
<title>form</title>
<content="text/html"; />
<script type="text/javascript">
<!--
window.onload = function () {
if (self.init)
init();
}
var counter = 0;
var counter1 = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
document.getElementById('moreFields1').onclick = moreFields1;
moreFields();
moreFields1();
}
function moreFields() {
counter++;
var newFields = document.getElementById('readcomp').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writecomp');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function moreFields1() {
counter1++;
var newFields = document.getElementById('readsubgr').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter1;
}
var insertHere = document.getElementById('writesubgr');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// -->
</script>
</head>
<body>
<div id="readcomp" style="display: none">
Comp name<input type=text name="comp" value="" size="2"/>
Concentration<input type=text name="comp_qty" value="" size="2"/>
<input type="button" value="Remove comp"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br/>
<span id="writesubgr"></span>
<input type="button" id="moreFields1" value="add subgroup" /><br/><br/>
</div>
<div id="readsubgr" style="display: none">
Subgroup Name<input type=text name="subgroup" value="" size="2"/>
Quantity <input type=text name="subgroup_qty" value="" size="2"/>
<input type="button" value="Remove subgroup"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form action="cgi_bin\show_input.pl" method="post">
<span id="writecomp"></span>
<input type="button" id="moreFields" value="add comp" /><br/><br/>
<input value="Run Program" type="submit"> <input value="Reset all fields" type="reset">
</form>
</body></html>
any help would be appreciated. thanks Hello, months when I want all the fields will be filled submit will be visible on all but I just do what has not n'arive test Note b: there is already invisible submit send # I hope the idea is clear Maintenon. here is my code jQuery: Code: $(document).ready(function() {
//------------------ validation champ email par blur -------------
$("#email,#objet,#message").blur(function() {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if ($("#email").val() !== "E-mail" && $("#email").val() !== "" && $("#email").val().match(filter)
&& $("#objet").val() !== "" && $("#objet").val() !== "Objet"
&& $("#message").val()!== "" && $("#message").val()!== "Votre message") {
$("#objet,#message,#email").css("border-color","#98D100");
$("#envoyer").fadeIn(2000);
alert('les champs valid');
return true;
}
else {
$("#objet,#message,#email").css("border-color","#FF0000");
$("#envoyer").fadeOut(2000);
alert('les champs not valid');
return false;
}
});
//--------------- animation de champ message -----------------
$("#message").focus(function(){
$("#message").animate({
height: "50px"
}, 1000 );
});
});
here is the html code: Code: <input id="email" type="text" value="E-mail" onFocus="if (this.value=='E-mail') {this.value=''}"/> <div class="cl"></div> <input id="objet" type="text" value="Objet" onFocus="if (this.value=='Objet') {this.value=''}"/> <div class="cl"></div> <textarea id="message" type="text" value="Votre message" onFocus="if(this.value=='Votre message') {this.value=''}">Votre message</textarea> <div class="cl"></div> <input id="envoyer" type="submit" value="Envoyer"/>
Regards. Hi, jI have a javascript script that adds/deletes input in a form. I'd like to calculate the volume for each ligne : l*h*d Then a total of all the volume fileds The data will be inserted in a php table. Thanks for your help (I hope you can understand my english) I have trouble with php but even more with javascript versions. PHP Code: -- Structure of mysql table named 'tbox' -- CREATE TABLE IF NOT EXISTS 'tbox' ( 'tboxid' int(11) NOT NULL AUTO_INCREMENT, 'tboxidtproid' int(11) NOT NULL, 'tboxdate' date NOT NULL, 'tboxL' int(11) NOT NULL, 'tboxD' int(11) NOT NULL, 'tboxH' int(11) NOT NULL, 'tboxnet' float NOT NULL, 'tboxgros' float NOT NULL, PRIMARY KEY ('tboxid') ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=55 ; The html page wiith js : PHP Code: <html> <head> <script type="text/JavaScript"> // add a box <!-- function create_champ(i){ var l = document.getElementById('l_1').value; var d = document.getElementById('d_1').value; var h = document.getElementById('h_1').value; var v = document.getElementById('v_1').value = (l * d * h) ; var i2 = i + 1; document.getElementById('champs_'+i).innerHTML = '<span id="ligne_'+i+'">L <input type="text" size="9" maxlength="9" name="l[]" id="l_'+i+'" \/> D <input type="text" size="9" maxlength="9" name="d[]" id="d_'+i+'" \/> H <input type="text" size="9" maxlength="9" name="h[]" id="h_'+i+'" \/> Volume : <input type="text" size="9" maxlength="50" name="v[]" id="v_'+i+'" value = "" " disabled="true" \/> <input type="button" value="x" id="boutton_'+i+'"onclick="delete_champ('+i+')" \/><br \/><\/span>'; document.getElementById('champs_'+i).innerHTML += '<span id="champs_'+i2+'"><input type="button" value="Add a box" onclick="create_champ('+i2+')" \/><\/span>'; } function delete_champ(i){ document.getElementById("ligne_"+i).innerHTML=""; } </script> </head> <body> <form id="1" name="addalbum" method="post" action=""> <td width="250" valign="top"><fieldset> <legend>Boxes Dimensions(mm)</legend> <table width="95%" border="0" cellspacing="0" cellpadding="3"> <tr> <span id="ligne_1"> L <input type="text" name="l[]" id="l_1" size="9" maxlength="9" value="" /> D <input type="text" name="d[]" id="d_1" size="9" maxlength="9" value="" /> H <input type="text" name="h[]" id="h_1" size="9" maxlength="9" value="" /> Volume : <input type="text" name="v[]" id="v_1" size="9" maxlength="9" value="" disabled="true" /> <input type="button" value="x" id="boutton_1" onclick="delete_champ(1)" /> <br /> </span> <span id="champs_2"> <input type="button" value="Add a box" onclick="create_champ(2)" \/></span> </table> </fieldset></td> <label> <input type="submit" name="button" id="button" value="Envoyer"> </label> </form> <?php /* insert fields in table tbox */ ?> </body> </html> Hi to all, I have a dynamic form, when a button is clicked 3 more fields appear, the function is to colect for example from date [02/02/2010] to date [10/02/2010] equals price [250$] per week and if you want another period just click the button and 3 more fields appear. How do I get all this data to PHP? Code: <script type="text/javascript">
var counter = 3;
function addNew() {
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('input');
newText.type = "text";
newText.value = "DD/MM/AAAA";
newText.name = counter++;
var newText1 = document.createElement('input');
newText1.type = "text";
newText1.value = "DD/MM/AAAA";
newText1.name = counter++;
var newText2 = document.createElement('input');
newText2.type = "text";
newText2.value = "0";
newText2.name = counter++;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Delete";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
newDiv.appendChild(newText2);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
}
}
</script>
<table style="margin-left:200px" border="0">
<tr><!-- Row 1 -->
<td width="140"><b>Start Date</b></td><!-- Col 1 -->
<td width="142"><b>End Date</b></td><!-- Col 2 -->
<td width="140"><b>Price per week</b></td><!-- Col 3 -->
</tr>
</table>
<div style="margin-left:200px" id="mainContainer"><div><input value="DD/MM/AAAA" name="0" type="text" ><input value="DD/MM/AAAA" name="1" type="text" ><input value="0" name="2" type="text" ><input type="button" value="New price" onClick="addNew()"></div>
So i have a form with fields (30+), and about 5 of them are fields that need to pass into my dropdown (actually a dynmaic dropdown, select SOURCE, then whatever source u select it'll show options that are mysql source=$source), so it can go into my mysql query, and filter out the best results. (i.e date_of_birth, min_credits, state, etc). Needs to be done without submitting, hence javascript. Im echo'ing my query and its saying the variables i'm trying to pass are UNDEFINED. Am I not passing the vars correctly? do i need to prep the vars to "grab" them in the current field? this is what i have in my <head> Code: <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSchool(id,hs_grad_year,dob_day,dob_month,dob_year,min_credits,state) {
var strURL="findSchool.php?source="+id+"&hs_grad_year="+hs_grad_year+"&dob_day="+dob_day+"&dob_month="+dob_month+"&dob_year="+dob_year+"&min_credits="+min_credits+"&state="+state;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('schooldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(id,cid) {
var strURL="findSub.php?source="+id+"&cid="+cid;
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('subdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
The only var that is passing is SOURCE, and that's because its the name of the first dropdown I'm VERY new to javascript, do i need to set up like a GET method on my RECEIVING page? or can i just pass variables through? Do i need to get the "existing" data in the fields first? Thanks in advance, JT Hello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone 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 Hey guys Not sure how to get this done, but i have a webpage that opens up and on that page i have 2 frames (TOP frame, and BOTTOM frame). On the top frame, i have a webpage that loads with a users information and multiple check-boxes checked. On the bottom frame, i want to have a form that contains ONE button (lets say CLEAR) that clears all the information from the form on the TOP frame. Note: I do not have ability to edit the webpage in the TOP frame. The web page is a company website and I am one of the IT people here but not dealing with websites. I was just put in charge of going to over 350 peoples pages and clearing everything on that page manually, so I want to create a script/page that loads the page that i needs, but EITHER clears the form and un-checks all the check-boxes, or a button that i press to do so. Help please 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 Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script
> Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="54%" class="subHeader">Full Name* </td>
<td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
</tr>
<tr>
<td class="subHeader">Company Name </td>
<td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
</tr>
<tr>
<td class="subHeader">Address</td>
<td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
</tr>
<tr>
<td class="subHeader">Postcode</td>
<td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
</tr>
<tr>
<td class="subHeader">Telephone Number* </td>
<td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
</tr>
<tr>
<td class="subHeader">Mobile Number </td>
<td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
</tr>
<tr>
<td height="25" class="subHeader">Email Address* </td>
<td class="subHeader"><input name="Email" type="text" id="Email" /></td>
</tr>
<tr>
<td height="30" class="subHeader">Status*</td>
<td class="subHeader"><select name="StatusClass" id="StatusClass">
<option selected="selected">Please Choose</option>
<option>Architect</option>
<option>Interior Designer</option>
<option>Private Client</option>
<option>Student</option>
<option>Trade Enquiry</option>
</select> </td>
</tr>
<tr>
<td height="23" class="subHeader">Project*</td>
<td class="subHeader"><select name="Project" size="1" id="Project">
<option selected="selected">Please Choose</option>
<option>Planning Stages</option>
<option>New Build</option>
<option>Refurbishment</option>
<option>Barn Conversion</option>
<option>No project - information only</option>
</select> </td>
</tr>
<tr>
<td height="37" class="subHeader">How did you hear about us?*</td>
<td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
<option selected="selected">Please Choose</option>
<option>Web Search</option>
<option>Grand Designs</option>
<option>Living Etc</option>
<option>Home Building & Renovation</option>
<option>Architect</option>
<option>Friend/Family</option>
<option>Magazine/Editorial</option>
<option>Newspaper Article</option>
<option>Trade Show/Exhibition</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td height="24" class="subHeader">Brochure Request </td>
<td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
</tr>
<tr>
<td class="subHeader">Message</td>
<td class="subHeader"><span class="style4">
<textarea name="Message" id="Message"></textarea>
</span></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" class="subHeader"><em>* Required fields</em></td>
</tr>
</table>
</form>
|
|||||||