Autofill the title of website via link in a form - php

Question

<form method="POST" action="{{ route('storeCompany') }}">
#csrf
<label>{{ __('Website URL') }}</label>
<input type="text" name="url" value="{{ old('url') }}" placeholder="{{ __('http://example.com') }}" class="form-control" required="required">
<label>{{ __('Website Title') }}</label>
<input type="text" name="name" value="{{ old('name') }}" placeholder="{{ __('Example Ltd') }}" class="form-control" required="required">
<input type="submit" name="sbNewReviewItem" class="btn btn-block btn-primary" value="{{ __('Submit New Company') }}">
</form>
I want the "Website Title" field to be auto-filled when the user types the "Website URL" also "Website Title" must be editable if the user want to. How can I do this? Please help :(
Example: When the user enters https://stackoverflow.com/ URL in the "Website URL" field "Website Title" filed must auto-filled as Stack Overflow - Where Developers Learn, Share, & Build Careers

Answer 1

You have a change event on the url-field element which does a fetch request to an api website that returns the html contents of that website, and then it uses regex to extract the html title and then it adds it to the name field.
Also while the fetching is executing we show a Fetching text to let the user know what's going on. And the form submit event has been stopped with the preventDefault() function. Here you can do what ever you want after the user submits the form.
Instead of using https://api.codetabs.com/v1/proxy/?quest= which will limit your requests and show you a Too many requests error, you should use your own code that fetches the website contents and then return the response. To optimize this you can return just the website title, to save on bandwidth and cpu cycles.
The reason you need an api to fetch the website content is because of CORS. You can't just use fetch resources from any website you want. You can only do this from the current website or from websites that have allowed you to do so.
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>

Answer 2

Because you're example look like Laravel.
I found it appropriate to write an answer in 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);
}
}

Answer 3

As soon as user has entered the data.
Get the value using $("#text_field").val();
Have an ajax call and get the value using the below function, pass the url to 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');
this code will output the title, set it to the div where you want to show the title, something like this
var ajaxCallResponse = ""//store the response here
$("#title_div").val(ajaxCallResponse);

Answer 4

Here is how to:
Read the website url.
Send an ajax request to codetabs api to get full html.
Get the title from the html.
Do whatever you need with the title.
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>