Member Avatar for pauld581

I have a project that I'm having a hard time figuring out an approach for, which I'll try to describe briefly:
My client has a business where salespeople input information from customers into a form. One of the things the customers decide with the salesperson is whether to accept a preselected choice of items- like package deals- or, if they like, they can make a custom package.

If they go for a custom package, my client envisions the salesperson clicking into an empty custom text field and launching a page that has a list of links of the various options available (there are over 300, organized into categories). When the salesperson clicks on a customer's choice they are redirected to the form where the choice is filled into the text field along with a hidden value that is used internally. To do it this way I am thinking querystring processing with jquery.

However, there are up to five custom choices available to the customer, and I really don't like the idea of the salesperson having to click back and forth five times, but that is acceptable to my client. What I am thinking is checkboxes next to each item in this list, and the salesperson makes all the choices and clicks a "Finished" button or somesuch and is returned to the form where the checkbox selections are all entered.

The only scripting that can be used for this project is Javascript-no PHP etc. I am okay at javascript and good enough at programming to figure out how to do it, except I really don't like either of the two ways I have thought of to do what my client wants.

I should add that the salesform for all of this is already done (by me) and I have complete access and authority to modify it anyway I want.

So I am wondering if anyone has any other ideas for this oddball project or has opinions on the two ways I have thought of,approaches, whatever. I'm kind of flummoxed!

Thanks, and sorry for the long description.

  • 2 Contributors
  • 1 Reply
  • 157 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

OK, I don't completely get the picture you are explaining, but I will give it a try.

You could hide all custom choices in different div inside one page. Also, if the div is hidden, make sure that all elements inside that you may want to pass their value to the server side are disable. You now could use Javascript to display each portion you want when the salesperson selects a certain option.

Below is a simple code just to show how it works. Not sure if it answers your question.

<html>
<head>
<style type="text/css">
.hiding {
  display: none;
}
.showing {
}
</style>

<script type="text/javascript">
function toggleDiv(divID) {
  var el = document.getElementById(divID)
  if (el) {  // ensure the element exists
    var subEls  // declare it for later use
    if (el.className.match(/hiding/)) {  // toggle to show
      subEls = el.getElementsByTagName("input")
      for (var i=subEls.length-1; i>=0; i--) {
        subEls[i].disabled = null
      }
      subEls = el.getElementsByTagName("textarea")
      for (var i=subEls.length-1; i>=0; i--) {
        subEls[i].disabled = null
      }
      el.className = "showing"
    }
    else {  // toggle to hide
      el.className = "hiding"
      subEls = el.getElementsByTagName("input")
      for (var i=subEls.length-1; i>=0; i--) {
        subEls[i].disabled = "disabled"
      }
      subEls = el.getElementsByTagName("textarea")
      for (var i=subEls.length-1; i>=0; i--) {
        subEls[i].disabled = "disabled"
      }
    }  // end toggle div
  }  // end checking el
}  // toggleDiv()
</script>
</head>

<body>

<form id="pageForm" name="pageForm">

  <div id="customChoice1">
    <input type="checkbox" value=1 onchange="toggleDiv('choice1')"> Select 1
    <div id="choice1" class="hiding">
      Text 1.1: <input type="text" disabled>
      <br />
      Text 1.2: <input type="text" disabled>
    </div>
  </div>

  <div id="customChoice2">
    <input type="checkbox" value=1 onchange="toggleDiv('choice2')"> Select 2
    <div id="choice2" class="hiding">
      Text 2.1: <input type="text" disabled>
      <br />
      Text Area 2.2: <textarea disabled rows=4 cols=60></textarea>
    </div>
  </div>

  <div id="customChoice3">
    <input type="checkbox" value=1 onchange="toggleDiv('choice3')"> Select 3
    <div id="choice3" class="hiding">
      Text 3.1: <input type="text" disabled>
      <br />
      Text 3.2: <input type="text" disabled>
    </div>
  </div>

  <div id="customChoice4">
    <input type="checkbox" value=1 onchange="toggleDiv('choice4')"> Select 4
    <div id="choice4" class="hiding">
      Text 4.1: <input type="text" disabled>
      <br />
      Text 4.2: <input type="text" disabled>
    </div>
  </div>

  <div id="customChoice5">
    <input type="checkbox" value=1 onchange="toggleDiv('choice5')"> Select 5
    <div id="choice5" class="hiding">
      Text 5.1: <input type="text" disabled>
      <br />
      Text Area 5.2: <textarea disabled row=5 cols=50></textarea>
    </div>
  </div>

  <br />
  <input type="submit" value="Submit">
</form>

</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.