Page 1 of 2

fields showing according to quantity selected.

Posted: Wed Mar 21, 2012 12:37 pm
by mwaheedf
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.

Posted: Wed Mar 21, 2012 5:09 pm
by social_experiment
You could use a for loop

Code: Select all

<?php
 $amount = $_POST['total'];
 
 for ($i=1;$i<=$amount;$i++) {
    // echo the field
 }
?>
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.

Re: fields showing according to quantity selected.

Posted: Wed Mar 21, 2012 5:55 pm
by califdon
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.
... 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.

Re: fields showing according to quantity selected.

Posted: Thu Mar 22, 2012 2:36 am
by social_experiment
califdon wrote:in which case you're back to AJAX.
Wouldn't disabling javascript also disable the ajax; since ajax is part javascript?

Re: fields showing according to quantity selected.

Posted: Thu Mar 22, 2012 3:19 am
by mwaheedf
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

Re: fields showing according to quantity selected.

Posted: Thu Mar 22, 2012 12:16 pm
by califdon
social_experiment wrote:
califdon wrote:in which case you're back to AJAX.
Wouldn't disabling javascript also disable the ajax; since ajax is part javascript?
:oops: Of course you're right!!

Re: fields showing according to quantity selected.

Posted: Fri Mar 23, 2012 4:29 am
by mwaheedf
Can someone point me to what i am looking for in ajax please...

Re: fields showing according to quantity selected.

Posted: Fri Mar 23, 2012 4:50 am
by social_experiment
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

Re: fields showing according to quantity selected.

Posted: Fri Mar 23, 2012 1:14 pm
by califdon
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
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.

Re: fields showing according to quantity selected.

Posted: Sun Mar 25, 2012 3:13 am
by mwaheedf
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.
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.

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.

Posted: Sun Mar 25, 2012 11:34 am
by califdon
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.

Posted: Sun Mar 25, 2012 8:57 pm
by califdon
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. &nbsp; Dept No.: <input type='text' name='num1' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam1' size='32' /></div>
         <div class='entries' id='no2' style='display=none'> 2. &nbsp; Dept No.: <input type='text' id='num2' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam2' size='32' /></div>
         <div class='entries' id='no3' style='display=none'> 3. &nbsp; Dept No.: <input type='text' id='num3' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam3' size='32' /></div>
         <div class='entries' id='no4' style='display=none'> 4. &nbsp; Dept No.: <input type='text' id='num4' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam4' size='32' /></div>
         <div class='entries' id='no5' style='display=none'> 5. &nbsp; Dept No.: <input type='text' id='num5' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam5' size='32' /></div>
         <div class='entries' id='no6' style='display=none'> 6. &nbsp; Dept No.: <input type='text' id='num6' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam6' size='32' /></div>
         <div class='entries' id='no7' style='display=none'> 7. &nbsp; Dept No.: <input type='text' id='num7' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam7' size='32' /></div>
         <div class='entries' id='no8' style='display=none'> 8. &nbsp; Dept No.: <input type='text' id='num8' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam8' size='32' /></div>
         <div class='entries' id='no9' style='display=none'> 9. &nbsp; Dept No.: <input type='text' id='num9' size='6' /> &nbsp;&nbsp;&nbsp;
         Dept Name: <input type='text' id='nam9' size='32' /></div>
         <div class='entries' id='no10' style='display=none'>10. &nbsp; Dept No.: <input type='text' id='num10' size='6' /> &nbsp;&nbsp;&nbsp;
         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>


Re: fields showing according to quantity selected.

Posted: Thu Mar 29, 2012 3:36 am
by mwaheedf
Thanks a lot mate, this really helped solve the problem I was having.

Re: fields showing according to quantity selected.

Posted: Wed Apr 11, 2012 10:44 am
by mwaheedf
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..

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.

Posted: Wed Apr 11, 2012 3:24 pm
by califdon
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:

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);
}
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.