• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Autocomplete Plugin

root22

Coder
Hi there. I'm trying to use this autocomplete script to run on my websites contact form under the Subject area. I posted the javascript with <script></script> but it doesnt seem to work. I have no coding knowledge.


so maybe someone could paste all the parts of the code required to run in a blank html page

https://material.angular.io/components/autocomplete/examples

Im mainly interested in the Assignee example.

Heres the code.

HTML:
<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Assignee</mat-label>
    <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

and The CSS

CSS:
.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

And TS
Code:
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

export interface User {
  name: string;
}

/**
 * @title Display value autocomplete
 */
@Component({
  selector: 'autocomplete-display-example',
  templateUrl: 'autocomplete-display-example.html',
  styleUrls: ['autocomplete-display-example.css'],
})
export class AutocompleteDisplayExample implements OnInit {
  myControl = new FormControl<string | User>('');
  options: User[] = [{name: 'Mary'}, {name: 'Shelley'}, {name: 'Igor'}];
  filteredOptions: Observable<User[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => {
        const name = typeof value === 'string' ? value : value?.name;
        return name ? this._filter(name as string) : this.options.slice();
      }),
    );
  }

  displayFn(user: User): string {
    return user && user.name ? user.name : '';
  }

  private _filter(name: string): User[] {
    const filterValue = name.toLowerCase();

    return this.options.filter(option => option.name.toLowerCase().includes(filterValue));
  }
}

Also this is the Html from my site where I want to add it to.

HTML:
  <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="subject" name="subject" class="materialize-textarea" class="validate" ></textarea>
                                    <label for="subject">Subject</label>
                                </div>
                            </div>

Thanks for any help.
 
Last edited:

Johna

Frontend developer
Staff Team
Guardian
You don't need a JS plugin for that, you just use the <datalist> element.

Kind of like this:
HTML:
<input list="subject"> <!--the value of the list attribute must match the id of the datalist-->
<datalist id="subject">
  <option value="General Enquiries">
  <option value="Silver Package">
  <option value="Gold Package">
  <option value="Platinum Package">
  <option value="Other">
</datalist>

Here's a live example: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist
 

root22

Coder
You don't need a JS plugin for that, you just use the <datalist> element.

Kind of like this:
HTML:
<input list="subject"> <!--the value of the list attribute must match the id of the datalist-->
<datalist id="subject">
  <option value="General Enquiries">
  <option value="Silver Package">
  <option value="Gold Package">
  <option value="Platinum Package">
  <option value="Other">
</datalist>

Here's a live example: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist
I tried that and it looks nice on my form but It doesn't email the option chosen. Ive used it on this page as the Subject.

I don't understand code but heres the handler.php file
PHP:
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
/*
Tested working with PHP5.4 and above (including PHP 7 )

 */
require_once './vendor/autoload.php';

use FormGuide\Handlx\FormHandler;


$pp = new FormHandler();

$validator = $pp->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);




$pp->sendEmailTo('[email protected]'); // ← Your email here

echo $pp->process($_POST);

Heres the Javascript from the header of the document.

JavaScript:
<script>
$(function()
{
    function after_form_submitted(data)
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

            //reverse the response on the button
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' );
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });

        }//else
    }

    $('#reused_form').submit(function(e)
      {
        e.preventDefault();

        $form = $(this);
        //show some response on the button
        $('button[type="submit"]', $form).each(function()
        {
            $btn = $(this);
            $btn.prop('type','button' );
            $btn.prop('orig_label',$btn.text());
            $btn.text('Sending ...');
        });


                    $.ajax({
                type: "POST",
                url: 'handler.php',
                data: $form.serialize(),
                success: after_form_submitted,
                dataType: 'json'
            });

      });
});
</script>

Any ideas for making the chosen subject to show in the email?

Thanks.
 

root22

Coder
Not too sure there's a lot of code in the vendor folder. I have a copy of it here https://lmbc.me/php-contact-form-template.zip
Also this is the site where I originally saw it and downloaded. http://reusableforms.com/d/o1/php-contact-form-template

Found the sendemailto here
PHP:
$pp = new FormHandler();

$validator = $pp->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000);




$pp->sendEmailTo('[email protected]'); // ← Your email here

echo $pp->process($_POST);
 
Last edited:
Top