Checkbox to trigger an email

[TheFearful]

Hey guys, I am trying to figure out a few things right now.
1. Is it possible to do a nested checkbox where there is the main checkbox and then two tabbed checkboxes that are related to the main one and when the main one is checked, the other subcheckboxes are checked as well? And can it be repeated for a bigger checklist?

1. Is it possible to have a checkbox trigger an email so that when it is checked, an email will be sent out?

I'm wondering these things because I was asked to do something like this and have it connect to a database and pull user information automatically from the users browswer, so that the page already recognizes who is visiting it. It seems like a really complex project and I don't know where to start other than start with the basic things first such as creating a database, making a page that connects and pulls information from that database, and edit things and generate letters based off that information. From what I have, I don't know if I have to start entirely from the beginning or if I can modify a few things that I already have to work with the new task that was asked of me.

Thank you to anyone who can help give me insight on this. I'm a little perplexed by this situation.

[broj1]

Is it possible to do a nested checkbox

It is, but you will have to code. Use Javascript or even better jQuery to listen to the click event and to check related checkboxes upon clicking the main one. It is easier if you put related checkboxes in a container (such as div), to simplify finding elements. The question is what to do when the checkbox is cleared. Do you clear all the related checkboxes too? What if some of them were clicked before. In that case it would be a good idea to save the state of checkboxes first.

Is it possible to have a checkbox trigger an email

Sure it is. I would use Ajax for that (again jQuery or something similar). Clicking a checkbox would trigger another PHP script that would do the mailing (without reloading the original page, so user is not disrupted). But there might also be a problem. Many users (include myself) click on checkboxes without any intention of doing something (it is so tempting to click on checkbox and then click again on it to return it ot the original state). You have to prevent a posibility of too many emails being sent just because of hyperactive users. You could either implement an additional check ("Do you really want to send an email") or implement a timer so emails get sent only if there is a big enough time difference.

[TheFearful]

@broj1 Thank you! I have never used Ajax before. I am using a linux environment. Would you happen to know any Ajax packages that I may have to install to have it run on my http/php server?

[broj1]

Ajax is actually an approach or a concept where you use existing technologies. The main advantage is that you do not reload the page when you do a new HTTP request. Typical example is a shopping cart. When you add a product to it you do not want to reload the whole page just to update the cart information. In your particular example you would process a click (request a php script that takes care of sending an email) while user keeps on browsing on your page without a disturbing reload.

This is what the acronym stands for:

A - Asynchronous means that another (asynchronous) HTTP request is triggered from the browser without disrupting the user experience
J - Javascript is used to fire and handle the request
A - is just 'and'
X - XML is used as a data transfer format but this is not strictly true since you can also transfer HTML, JSON or plaintext

Much better explanation can be found on Wikipedia.

So you do not need to install any new software, everything is already there. All you need is a decent browser (basically all browsers have been supporting ajax for last ten or so years), javascript and your code. It also does not matter if your environment is Linux or Windows or anything else.

Since HTTP request in Ajax context is implemented slightly differently in each browser (don't ask me why) you have two options: either 1. code in plain old Javascript and accomodate for all the differencies or use a Javascript framework that handles all the differencies for you and is simpler to use. I use jQuery for that and strongly recommend it to you. See http://api.jquery.com/category/ajax/ for more info and google for simple tutorials to grasp the concept.

If you post a snippet of your code I (or anyone else) can povide a guidance and code example of how to approach the thing.

[TheFearful]

Okay awesome! Well, here is the code I have so far for the check list. It's a little bit much, so I'll only share a snippet of it. It has sub-checkboxes where things check off and when they do, the parent box will check off as well.

<html>

<head>
    <meta charset='UTF-8'>

    <title>Custom and Indeterminate Checkboxes</title>

    <link rel='stylesheet' href='css/style.css'>

</head>

<body>

    <div id="page-wrap">

       <h2>Treeview with Custom Checkboxes and Indeterminate State</h2>

     <ul class="treeview">
        <li>
            <input type="checkbox" name="connectionType" id="connectionType">
            <label for="connectionType" class="custom-unchecked">Connection Type:</label>
        </li>

        <li>
            <input type="checkbox" name="DT" id="DT">
            <label for="DT" class="custom-unchecked">DT: </label>
        </li>

        <li>
            <input type="checkbox" name="BW" id="BW">
            <label for="BW" class="custom-unchecked">BW: </label>
        </li>

        <li>
            <input type="checkbox" name="checkConstruction" id="checkConstruction">
            <label for="checkConstruction" class="custom-unchecked">Check for Construction? </label>
        </li>

        <li>
            <input type="checkbox" name="completionDate" id="completionDate">
            <label for="completionDate" class="custom-unchecked">Completion Date: </label>
        </li>

        <li>
            <input type="checkbox" name="contactCustomer" id="contactCustomer">
            <label for="contactCustomer" class="custom-unchecked">Contact Customer: </label>
        </li>

        <li>
            <input type="checkbox" name="equipmentRequired" id="equipmentRequired">
            <label for="equipmentRequired" class="custom-unchecked">Equipment Required? </label>

            <ul>
                <li>
                     <input type="checkbox" name="equipmentRequired-1-1" id="equipmentRequired-1">
                     <label for="equipmentRequired-1" class="custom-unchecked">Ordered?</label>
                </li>
                <li>
                     <input type="checkbox" name="equipmentRequired-2" id="equipmentRequired-2">
                     <label for="equipmentRequired-2" class="custom-unchecked">Config?</label>
                </li>
            </ul>
        </li>

And this is the script source that I used

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="main.js"></script>

[TheFearful]

That is the javascript I used

$(function() {

  $('input[type="checkbox"]').change(checkboxChanged);

  function checkboxChanged() {
    var $this = $(this),
        checked = $this.prop("checked"),
        container = $this.parent(),
        siblings = container.siblings();

    container.find('input[type="checkbox"]')
    .prop({
        indeterminate: false,
        checked: checked
    })
    .siblings('label')
    .removeClass('custom-checked custom-unchecked custom-indeterminate')
    .addClass(checked ? 'custom-checked' : 'custom-unchecked');

    checkSiblings(container, checked);
  }

  function checkSiblings($el, checked) {
    var parent = $el.parent().parent(),
        all = true,
        indeterminate = false;

    $el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });

    if (all && checked) {
      parent.children('input[type="checkbox"]')
      .prop({
          indeterminate: false,
          checked: checked
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(checked ? 'custom-checked' : 'custom-unchecked');

      checkSiblings(parent, checked);
    } 
    else if (all && !checked) {
      indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;

      parent.children('input[type="checkbox"]')
      .prop("checked", checked)
      .prop("indeterminate", indeterminate)
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));

      checkSiblings(parent, checked);
    } 
    else {
      $el.parents("li").children('input[type="checkbox"]')
      .prop({
          indeterminate: true,
          checked: false
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass('custom-indeterminate');
    }
  }
});

[broj1]

I tested your code and checkboxes work OK. So if you check the Equipment Required? checkbox , both Ordered? and Config? checkboxes get checked. If you check either of the later two, the parent gets appropriately checked. The opposite direction also works. So this part works OK.

But you do not need Ajax for this. You need Ajax for sending an email without reloading the page. From your snippet I do not know which action should trigger the emailing. So please explain how would you like the email sending work (what triggers the email sending script, what data from the page would you like to include in the mail, what response would you like to have after sending the mail...).

[TheFearful]

Where it says "Emailed Customer" and "Email Mitch" I would like to trigger an email. And I assume that I would need to have a separate file that will have an email for both triggers?

Would I need to use a jquery to do that? Is that part of using Ajax?

[broj1]

Yes, this is where Ajax comes in. But I do not find those two triggers ("Emailed Customer" and "Email Mitch") in your code snippets. Where are they?

But the simplest basic example would be:

HTML:

<input type="checkbox" name="email-trigger" id="email-trigger">
<label for="email-trigger" class="custom-unchecked">Send email</label>

Javascript (Ajax part) - put it in the HTML file just before the closing body tag:

...
<script>
$("#email-trigger").on("click", function() { // on click event on the element with id=email-trigger
    $.post('send-email.php'); // use post method to call (request) the send-email.php script
});
</script>
</body>

The send-email.php script does the usual email creation and sending. This is very simplified example but it shows the concept. In more advanced scenario you can add data that can be part of the request (maybe the email or ID if the user) and return some data from the emailing script (like mail sent successfuly or possible errors). Returned data can be inserted into HTML or maybe logged.

[TheFearful]

@broj1 Sorry about that. I just gave a snippet of my code since the code is about the same throughout and didn't want to put too much code as it would have been redundant. And oh, okay. The code you have here makes a lot of sense! Would it be beneficial to try simpifying it more by using jQuery? Or would that just complicate things more?

[broj1]

This code already uses jquery (so do not forget to include it). This is the simplest possible version. In reality it will be more complex. But that depends on what you want ot achieve. Who do you want to send the email to? What information should be in the email. What feedback would you like when the email was successfuly sent? What feedback you want on unsuccessful sending attempt? For all these situations you have to provide some solutions.

But it is better learning in small steps if you are new to the concept. So try to run the above code in your environment and see what questions pop up. Also try to figure out what else you would need and see how to make it happen.

[TheFearful]

@Broj1 Thank you! So far, an email is all that I will need for the time-being. Eventually, they want me to have a timestamp for each task that has been completed. It's a very complex project for me. Not sure how complex it would be to more experienced programmers though.

Essentially, they want a checklist that is able to be clicked by the user where there will be a form to the right of it where it will explain the steps for that particular task and then when it's completed, have a timestamp with who completed the task. When you get to a certain task on the checklist, it will send an email from one of the set emails I have made on another PHP page. So, I think it goes like this:

checkbox task opens up instructions which allows the user to make a log and then check the task as complete where it will then be timestamped with the user ID.

After a milestone, an email will be sent from a preset of emails where only 1 will be picked based off the criteria.

I believe that is what they want in the overall project. As for me, I want to start small and then scale it little by little. I really don't know how complex this project is with respect to industry certified web developers, but it seems like it's a tough project for me since I'm learning pretty much.

However, I feel that I will learn a great deal after completing this.

[broj1]

Sure. Often a good approach is to break complex tasks into simpler problems and solve each one separately. Anyway, when you bump into problems come here for help :-)

[TheFearful]

@Broj1 Thank you! I intend to learn as much as I can about 1 task first and then move on to the next. I guess the biggest challenge will be is to learn how to integrate each new thing with what I already have. I'll toy around with the email trigger and see what things I may have to add to it.