fields showing according to quantity selected.

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

mwaheedf
Forum Newbie
Posts: 9
Joined: Wed Mar 21, 2012 12:32 pm

fields showing according to quantity selected.

Post 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
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: fields showing according to quantity selected.

Post 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.
“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
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: fields showing according to quantity selected.

Post 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.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: fields showing according to quantity selected.

Post 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?
“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
mwaheedf
Forum Newbie
Posts: 9
Joined: Wed Mar 21, 2012 12:32 pm

Re: fields showing according to quantity selected.

Post 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
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: fields showing according to quantity selected.

Post 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!!
mwaheedf
Forum Newbie
Posts: 9
Joined: Wed Mar 21, 2012 12:32 pm

Re: fields showing according to quantity selected.

Post by mwaheedf »

Can someone point me to what i am looking for in ajax please...
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: fields showing according to quantity selected.

Post 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
“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
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: fields showing according to quantity selected.

Post 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.
mwaheedf
Forum Newbie
Posts: 9
Joined: Wed Mar 21, 2012 12:32 pm

Re: fields showing according to quantity selected.

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: fields showing according to quantity selected.

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: fields showing according to quantity selected.

Post 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>

Last edited by califdon on Mon Mar 26, 2012 4:43 pm, edited 2 times in total.
Reason: Included Form tags, cleaned up appearance.
mwaheedf
Forum Newbie
Posts: 9
Joined: Wed Mar 21, 2012 12:32 pm

Re: fields showing according to quantity selected.

Post by mwaheedf »

Thanks a lot mate, this really helped solve the problem I was having.
mwaheedf
Forum Newbie
Posts: 9
Joined: Wed Mar 21, 2012 12:32 pm

Re: fields showing according to quantity selected.

Post 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());
}
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: fields showing according to quantity selected.

Post 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.
Last edited by califdon on Wed Apr 11, 2012 4:20 pm, edited 1 time in total.
Reason: Fixed some extraneous quote marks.
Post Reply