Solved

dropdown generation

Posted on 2013-06-25
5
176 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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

This article will explain how to display the first page of your Microsoft Word documents (e.g. .doc, .docx, etc...) as images in a web page programatically. I have scoured the web on a way to do this unsuccessfully. The goal is to produce something …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

822 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