Solved

dropdown generation

Posted on 2013-06-25
5
178 Views
Last Modified: 2013-06-26
I need some help in making the html pages in php in the attachements. Design I can manipulate. I want this in php/javascript basically scripts that can pass information from dropdowns and create new dropdowns accordingly.
dropdown.png
0
Comment
Question by:Moizsaif123
  • 3
  • 2
5 Comments
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 39276830
I'm sorry, you want some help, or you want us to do it for you? What is your question?
0
 
LVL 4

Author Comment

by:Moizsaif123
ID: 39276938
help in the sense, say if i have a dropdown and those values as you can see, if i hit submit how can i generate dropdowns depending on that value selected. i need some logic basically, if you can provide me with 1 dropdown and an example on submit how do i generate these further dropdowns...hope being clear...
0
 
LVL 4

Author Comment

by:Moizsaif123
ID: 39277000
basically my php is not so strong...although does it make sense to do this in javascript or php
0
 
LVL 4

Author Comment

by:Moizsaif123
ID: 39280129
I've requested that this question be deleted for the following reason:

No one knows the solution to my query so closing the question
0
 
LVL 75

Accepted Solution

by:
käµfm³d   👽 earned 500 total points
ID: 39280029
This is more a JQuery question than a PHP one, though you can certainly do this in PHP if you prefer. Here is a crude JQuery example:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <style>
        #traveler-count span, #traveler-details span {
          display: block;
        }
        #traveler-details div {
            margin: .5em auto;
        }
        #traveler-details div div {
            margin: auto;
        }
    </style>
  </head>
  <body>
    <div id="traveler-count">
        <span>
          <select id="selAdults" name="adults">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>
          <label for="adults">Adults</label>
        </span>
        <span>
          <select id="selChildren" name="children">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>
          <label for="children">Children</label>
        </span>
        <span>
          <select id="selInfants" name="infants">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
          </select>
          <label for="infants">Infants</label>
        </span>
    </div>
    <div id="traveler-summary">
      <span>Total Travelers:</span>
      <span id="sumAdult">Adults: 0</span>
      <span id="sumChild">Children: 0</span>
      <span id="sumInfant">Infants: 0</span>
    </div>
    <div id="traveler-details">
      <div id="detAdult"></div>
      <div id="detChild"></div>
      <div id="detInfant"></div>
    </div>
    <script>
      var rowTemplate = '<div></div>';
      var selAdultTemplate = '<select><option selected>Adult</option><option>Child</option><option>Infant</option></select>';
      var selChildTemplate = '<select><option>Adult</option><option selected>Child</option><option>Infant</option></select>';
      var selInfantTemplate = '<select><option>Adult</option><option>Child</option><option selected>Infant</option></select>';
      var selPrefixTemplate = '<select><option>Mr.</option><option>Mrs.</option><option>Ms.</option></select>';
      var txtFirstNameTemplate = '<input type="text" />';
      var txtLastNameTemplate = '<input type="text" />';
      var selLocationTemplate = '<select><option>London</option><option>Madrid</option><option>Athens</option></select>';

      function setItems(containerId, itemCount, travelerTemplate) {
        var container = $(containerId);

        container.empty();

        for (var i = 0; i < itemCount; i++) {
          var row = $(rowTemplate);

          row.append($(travelerTemplate));
          row.append($(selPrefixTemplate));
          row.append($(txtFirstNameTemplate));
          row.append($(txtLastNameTemplate));
          row.append($(selLocationTemplate));

          container.append(row);
        }
      }

      $(document).ready(function() {
        $('#selAdults').change(function() {
          $('#sumAdult').text('Adults: ' + $(this).val());
          setItems('#detAdult', $(this).val(), selAdultTemplate);
        });

        $('#selChildren').change(function() {
          $('#sumChild').text('Children: ' + $(this).val());
          setItems('#detChild', $(this).val(), selChildTemplate);
        });

        $('#selInfants').change(function() {
          $('#sumInfant').text('Infants: ' + $(this).val());
          setItems('#detInfant', $(this).val(), selInfantTemplate);
        });
      });
    </script>
  </body>
</html>

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question