Автозаполнение названия сайта по ссылке в форме

У вас есть событие change в элементе url-field, которое отправляет запрос на выборку веб-сайту API, который возвращает html-содержимое этого веб-сайта, а затем использует регулярное выражение для извлечения заголовка html, а затем добавляет его в поле имени.

Кроме того, во время выполнения выборки мы показываем текст Fetching, чтобы пользователь знал, что происходит. И событие отправки формы было остановлено функцией preventDefault(). Здесь вы можете делать все, что захотите, после того, как пользователь отправит форму.

Вместо использования https://api.codetabs.com/v1/proxy/?quest=, который ограничит ваши запросы и покажет вам ошибку Too many requests, вы должны использовать свой собственный код, который извлекает содержимое веб-сайта, а затем возвращает ответ. Чтобы оптимизировать это, вы можете вернуть только название веб-сайта, чтобы сэкономить на пропускной способности и циклах процессора.

Причина, по которой вам нужен API для получения содержимого веб-сайта, связана с CORS. Вы не можете просто использовать ресурсы для извлечения с любого веб-сайта, который вы хотите. Вы можете сделать это только с текущего веб-сайта или с веб-сайтов, которые позволили вам это сделать.

document.addEventListener('submit', event => {
  event.preventDefault()
})

document.addEventListener('change', async (event) => {
  if (event.target.classList.contains('url-field')) {
    await changeUrl(event.target.closest('form').elements)
  }
})

async function changeUrl (fields) {
  try {
    if (!fields.url.value) return
    fields.output.removeAttribute('hidden')
    const response = await fetch('https://api.codetabs.com/v1/proxy/?quest=' + encodeURI(fields.url.value))
    const html = await response.text()
    const match = /<title[\s\S]*?>([\s\S]*?)<\/title>/gi.exec(html)
    if (!match || !match[1]) throw new Error('No title found')
    fields.name.value = match[1].trim()
    fields.output.setAttribute('hidden', '')
  } catch (error) {
    console.error(error)
  }
}

<form method="POST" action="">
<p>
  <label>Website URL</label>
  <input type="url" name="url" value="" placeholder="http://example.com" class="form-control url-field" required>
  <output name="output" hidden>Fetching</output>
</p>
<p>
  <label>Website Title</label>
  <input type="text" name="name" value="" placeholder="Example Ltd" class="form-control">
</p>
<input type="submit" name="sbNewReviewItem" class="btn btn-block btn-primary" value="Submit New Company">
</form>

Потому что вы, например, похожи на Laravel. Я счел уместным написать ответ на PHP.

example.blade.php

<title>{{ $title ?? 'Default title' }}</title>
<form method="POST" action="{{ route('storeCompany') }}">
    @csrf
    <label>{{ __('Website URL') }}</label>
    <input type="text" name="url" value="{{ $url ?? old('url') }}" placeholder="{{ __('http://example.com') }}" class="form-control" required="required">
    <label>{{ __('Website Title') }} <small>(Leave blank to retrieve from URL)</small></label>
    <input type="text" name="name" value="{{ $title ?? old('name') }}" placeholder="{{ __('Example Ltd') }}" class="form-control">
    <input type="submit" name="sbNewReviewItem" class="btn btn-block btn-primary" value="{{ __('Submit New Company') }}">
</form>

CompanyController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class CompanyController extends Controller
{
    public function index(){
        
        return view('example');
    }
    
    public function storeCompany(Request $request){
        
        $title = $request->name;

        if (empty($title) && filter_var($request->url, FILTER_VALIDATE_URL)){
            $response = HTTP::get($request->url);
            if ($response->ok()){
                preg_match('/<title>(.*)<\/title>/i', $response->body(), $matches);
                $title = $matches[1] ?? null;
            }
        }

        $data = [
            'url' => $request->url,
            'title' => $title
        ];
        
        return view('example', $data);
    }
}

Как только пользователь ввел данные.

Получите значение, используя $("#text_field").val();

Сделайте вызов ajax и получите значение, используя приведенную ниже функцию, передайте URL-адрес t

require 'simple_html_dom.php';
function dataParser($url){
    $html = new simple_html_dom();
    $html->load_file($url); 
    $title = $html->find('title',0)->innertext;
    return $title;
}
// something like $_GET['user_url'];
echo  $title = dataParser('https://stackoverflow.com');

этот код выведет заголовок, установите его в div, где вы хотите показать заголовок, что-то вроде этого

var ajaxCallResponse = ""//store the response here
$("#title_div").val(ajaxCallResponse);

Вот как:

1. Прочтите адрес веб-сайта.
2. Отправьте ajax-запрос к codetabs api, чтобы получить полный html.
3. Получить заголовок из html.
4. Делайте с заголовком все, что вам нужно.

function gettitle(website) {
  if(website.trim() == ''){
   return false;
  }
  var url = 'https://api.codetabs.com/v1/proxy/?quest=' + website;
  $.ajax({
    url: url,
    success: function(responseHtml) {
      var newTitle = $(responseHtml).filter('title').text();
      document.getElementById('title').innerHTML = 'Title: ' + newTitle
    },
    error: function() {
      document.getElementById('title').innerHTML = newTitle = 'Sorry that page doesn\'t';
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input placeholder='Website' oninput='gettitle(this.value)' type='url' id='url'>
<div id='title'></div>