fields showing according to quantity selected.
Moderator: General Moderators
fields showing according to quantity selected.
Basically I have a form field “quantity”
I need fields to be shown below this on the same page depending on the quantity...
i.e
quantity = 2 (this wil be a drop down on the form, the below should appear when selected)
staffno = staff department =
staffno = staff department =
if quantity = 4
staffno = staff department =
staffno = staff department =
staffno = staff department =
staffno = staff department =
Any help will be appreciated. I would need to submit the vallues to my database after.
thanks
I need fields to be shown below this on the same page depending on the quantity...
i.e
quantity = 2 (this wil be a drop down on the form, the below should appear when selected)
staffno = staff department =
staffno = staff department =
if quantity = 4
staffno = staff department =
staffno = staff department =
staffno = staff department =
staffno = staff department =
Any help will be appreciated. I would need to submit the vallues to my database after.
thanks
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: fields showing according to quantity selected.
You could use a for loop
Since you want to submit this value each field needs a different name; you can use the value of $i to create a unique name by appending it to a value. Seems like you want this to happen "immediately" after selecting the amount from the dropdown menu so look at an ajax solution.
Code: Select all
<?php
$amount = $_POST['total'];
for ($i=1;$i<=$amount;$i++) {
// echo the field
}
?>“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: fields showing according to quantity selected.
... or use Javascript, depending on whether the content of the 2nd dropdown requires a database lookup. But, as you know, users can set their browsers to ignore Javascript, in which case you're back to AJAX.social_experiment wrote:Seems like you want this to happen "immediately" after selecting the amount from the dropdown menu so look at an ajax solution.
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: fields showing according to quantity selected.
Wouldn't disabling javascript also disable the ajax; since ajax is part javascript?califdon wrote:in which case you're back to AJAX.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: fields showing according to quantity selected.
Thanks guys, I am fairly a beginner but will give this a try. I have not really looked at ajax coding but will do a bit of research on it. Am I looking for somethig specific..
Thanks again
Thanks again
Re: fields showing according to quantity selected.
social_experiment wrote:Wouldn't disabling javascript also disable the ajax; since ajax is part javascript?califdon wrote:in which case you're back to AJAX.
Re: fields showing according to quantity selected.
Can someone point me to what i am looking for in ajax please...
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: fields showing according to quantity selected.
http://tinyurl.com/82fcl6a
A quick search didn't reveal a solution specific to what you wish to achieve but this url should point in the right direction. hth
A quick search didn't reveal a solution specific to what you wish to achieve but this url should point in the right direction. hth
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: fields showing according to quantity selected.
Could you be more specific? The first "quantity" field is an <input type-text> field?? When user enters a number, you want another field, a <select><option> field to open with the number of rows specified by the first field?? And all these drop-down rows will contain the same values?? That just isn't making any sense to me. <select><option> ("drop-down") form elements are for the purpose of selecting one of the options, each of which has a different value.mwaheedf wrote:Basically I have a form field “quantity”
I need fields to be shown below this on the same page depending on the quantity...
i.e
quantity = 2 (this wil be a drop down on the form, the below should appear when selected)
staffno = staff department =
staffno = staff department =
if quantity = 4
staffno = staff department =
staffno = staff department =
staffno = staff department =
staffno = staff department =
Any help will be appreciated. I would need to submit the vallues to my database after.
thanks
Re: fields showing according to quantity selected.
the quantity field is a <select><option> field with a value of 1-10. this will be presented as a dropdown. if two is selected I need two more fields to show which will allow me to add two staff.califdon wrote: Could you be more specific? The first "quantity" field is an <input type-text> field?? When user enters a number, you want another field, a <select><option> field to open with the number of rows specified by the first field?? And all these drop-down rows will contain the same values?? That just isn't making any sense to me. <select><option> ("drop-down") form elements are for the purpose of selecting one of the options, each of which has a different value.
staff no : /input field/ staff depatment : /input field
staff no : /input field/ staff depatment : /input field
the two will obviously contain different values that will need to be submitted to the database.
Re: fields showing according to quantity selected.
OK, then I would suggest creating 10 pairs of fields, each with its unique "name" attribute (staffno1, staffdep1, staffno2, staffdep2, staffno3,staffdep3, ... etc.) and all with the type='hidden'. It could also be done by using the CSS visible propertiy. Then in the change event (or perhaps better, the blur event) of the "quantity" <select> element, call a Javascript function that will loop through the hidden elements, changing the desired number of them from "hidden" to "text". I would do this entirely in Javascript, avoiding PHP and AJAX, unless you believe you have a serious problem with respect to the few users who disable Javascript in their browser. I don't have the time right now to write and test such a function, but I will try to get back to it later today.
Re: fields showing according to quantity selected.
OK, here's a working, if not especially pretty, demo of how it can be done in Javascript.
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, http://www.pspad.com">
<title>Multiple Inputs Test</title>
<script type='text/javascript'>
function showfields(val) {
var id;
// First, set all to 'none' in case user changes to a lower count:
resetfields();
// Then set the requested number of fields to 'block':
for(var i=1; i<=val; i++) {
id='no'+ i;
document.getElementById(id).style.display = 'block';
}
}
function resetfields() {
for(var i=1; i<=10; i++) {
id='no'+ i;
document.getElementById(id).style.display = 'none';
}
}
</script>
<style type='text/css'>
body {
background-color: rgb(200, 220, 255);
text-align: center;
}
.choose {
margin: 0 25% 2em 25%;
}
.entries {
margin: 1em 15% 1em 15%;
display: none;
}
#reset {
backbround-color: rgb(200, 220, 255);
text-align: center;
}
</style>
</head>
<body>
<div>Please select the number of Departments you need:</div>
<select class='choose' name='choose' width='15px' onchange='javascript: void showfields(this.value);'>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
<option value=10>10</option>
</select>
<div><form name='DeptNumbersNames' method='post' action='something.php'>
<div class='entries' id='no1' style='display=block'> 1. Dept No.: <input type='text' name='num1' size='6' />
Dept Name: <input type='text' id='nam1' size='32' /></div>
<div class='entries' id='no2' style='display=none'> 2. Dept No.: <input type='text' id='num2' size='6' />
Dept Name: <input type='text' id='nam2' size='32' /></div>
<div class='entries' id='no3' style='display=none'> 3. Dept No.: <input type='text' id='num3' size='6' />
Dept Name: <input type='text' id='nam3' size='32' /></div>
<div class='entries' id='no4' style='display=none'> 4. Dept No.: <input type='text' id='num4' size='6' />
Dept Name: <input type='text' id='nam4' size='32' /></div>
<div class='entries' id='no5' style='display=none'> 5. Dept No.: <input type='text' id='num5' size='6' />
Dept Name: <input type='text' id='nam5' size='32' /></div>
<div class='entries' id='no6' style='display=none'> 6. Dept No.: <input type='text' id='num6' size='6' />
Dept Name: <input type='text' id='nam6' size='32' /></div>
<div class='entries' id='no7' style='display=none'> 7. Dept No.: <input type='text' id='num7' size='6' />
Dept Name: <input type='text' id='nam7' size='32' /></div>
<div class='entries' id='no8' style='display=none'> 8. Dept No.: <input type='text' id='num8' size='6' />
Dept Name: <input type='text' id='nam8' size='32' /></div>
<div class='entries' id='no9' style='display=none'> 9. Dept No.: <input type='text' id='num9' size='6' />
Dept Name: <input type='text' id='nam9' size='32' /></div>
<div class='entries' id='no10' style='display=none'>10. Dept No.: <input type='text' id='num10' size='6' />
Dept Name: <input type='text' id='nam10' size='32' /></div>
<div><input type='submit' value='Submit the form' />
</form>
</div>
<div id='reset'>
<input id='reset' type='button' value='Reset inputs' onclick='resetfields();'>
</div>
</body>
</html>
Last edited by califdon on Mon Mar 26, 2012 4:43 pm, edited 2 times in total.
Reason: Included Form tags, cleaned up appearance.
Reason: Included Form tags, cleaned up appearance.
Re: fields showing according to quantity selected.
Thanks a lot mate, this really helped solve the problem I was having.
Re: fields showing according to quantity selected.
Hey guys,
This worked great but I am now having problems with the insert statement.
for example in the departmant example above. if i have 5 department then the top five boxes will be filled with input data.
however the other 5 will be blank... because i have to create a insert statement for each one it will insert 5 with data and the other 5 with the initial fields...
what i need is if 3 is selected then only the 3 departmant name are entered into the database.. and the other wont even try to insert..
any ideas...
also i was wondering instead of repetive coding is there a easier way i can code the insert statement so it inserts row for each department in one statement..
This worked great but I am now having problems with the insert statement.
for example in the departmant example above. if i have 5 department then the top five boxes will be filled with input data.
however the other 5 will be blank... because i have to create a insert statement for each one it will insert 5 with data and the other 5 with the initial fields...
what i need is if 3 is selected then only the 3 departmant name are entered into the database.. and the other wont even try to insert..
any ideas...
also i was wondering instead of repetive coding is there a easier way i can code the insert statement so it inserts row for each department in one statement..
Code: Select all
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "DeptNumbersNames")) {
$insertSQL = sprintf("INSERT INTO test (dept1, quantity) VALUES (%s, %s)",
GetSQLValueString($_POST['num1'], "text"),
GetSQLValueString($_POST['nam1'], "text"));
mysql_select_db($database_conn_login, $conn_login);
$Result1 = mysql_query($insertSQL, $conn_login) or die(mysql_error());
$insertSQL = sprintf("INSERT INTO test (dept1, quantity) VALUES (%s, %s)",
GetSQLValueString($_POST['num2'], "text"),
GetSQLValueString($_POST['nam2'], "text"));
//all the way to 10...
mysql_select_db($database_conn_login, $conn_login);
$Result1 = mysql_query($insertSQL, $conn_login) or die(mysql_error());
}Re: fields showing according to quantity selected.
I don't have the time today (or probably the next several days) to work out a reasonable way to design such a script, but it's pretty straightforward. You know how many departments data to expect because the user has asked for that many, so you just use a for loop to run that number of INSERT operations. The data for each INSERT will come from the $_POST array with names that correspond to those numbers. That means that your INSERT loop would look something like this:where $num comes from how many departments were requested.
That's probably not quite right for you, but it's all I have time to do at the moment. Maybe you can work with that concept and adapt it for your needs.
A couple of comments: your code has several extraneous and unnecessary lines, such as the repeated mysql_select_db() statements. And you must avoid directly inserting data that comes from a Form into any database. Read up on "SQL injection"! This isn't the only way to protect yourself, but it's one way.
Code: Select all
for ($i=1; $i<=$num; $i++) {
$dept = mysql_real_escape_string($_POST['dept'.$i]);
$text = mysql_real_escape_string($_POST['text'.$i]);
$insertSQL = "INSERT INTO test (dept1, quantity) VALUES ($dept, $text)";
mysql_query($insertSQL, $conn_login);
}That's probably not quite right for you, but it's all I have time to do at the moment. Maybe you can work with that concept and adapt it for your needs.
A couple of comments: your code has several extraneous and unnecessary lines, such as the repeated mysql_select_db() statements. And you must avoid directly inserting data that comes from a Form into any database. Read up on "SQL injection"! This isn't the only way to protect yourself, but it's one way.
Last edited by califdon on Wed Apr 11, 2012 4:20 pm, edited 1 time in total.
Reason: Fixed some extraneous quote marks.
Reason: Fixed some extraneous quote marks.