Template override for improved Joomla article submission form

edit.php

<?php
/**
 * @package	Article Form override for Joomla 3
 * @copyright 	Copyright (c) 2014 Sander Potjer - www.perfectwebteam.nl
 * @license 	GNU General Public License version 3 or later
 */

defined('_JEXEC') or die;

JHtml::_('behavior.keepalive');
JHtml::_('behavior.calendar');
JHtml::_('behavior.formvalidation');
JHtml::_('formbehavior.chosen', 'select');

// Create shortcut to parameters.
$params = $this->state->get('params');

// Get Category ID
if($this->item->catid)
{
	// Existing article
	$catid = $this->item->catid;
}
else
{
	// New Article
	$catid = $params->get('catid');
}

// Get Article ID
if($this->item->id)
{
	// Existing article
	$id = $this->item->id;
}
else
{
	// New Article
	$id = '00';
}

// Generate preview URL to article
$url = JRoute::_(ContentHelperRoute::getCategoryRoute($catid));

?>
<script type="text/javascript">
	Joomla.submitbutton = function(task)
	{
		if (task == 'article.cancel' || document.formvalidator.isValid(document.getElementById('adminForm')))
		{
			<?php echo $this->form->getField('articletext')->save(); ?>
			Joomla.submitform(task);
		}
	}
</script>

<style>
#jform_title {
	display: block;
	width: 100%;
	min-height: 40px;
	font-size: 18px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.toggle-editor {
    display: none;
}

.chzn-container {
	width: 100% !important;
}

.btn-group {
	width: 49%;
}

.btn-group .btn {
	width: 100%;
}
</style>

<div class="edit item-page<?php echo $this->pageclass_sfx; ?>">
	<?php if ($params->get('show_page_heading', 1)) : ?>
	<div class="page-header">
		<h1>
			<?php echo $this->escape($params->get('page_heading')); ?>
		</h1>
	</div>
	<?php endif; ?>

	<form action="<?php echo JRoute::_('index.php?option=com_content&a_id='.(int) $this->item->id); ?>" method="post" name="adminForm" id="adminForm" class="form-validate form-vertical">
		<!-- Visible fieldset -->
		<fieldset>
			<div class="row-fluid">
				<!-- Left column -->
				<div class="span8">
					<div class="tab-content">
						<div class="tab-pane active" id="editor">
							<div class="control-group">
								<div class="controls">
									<?php echo $this->form->getInput('title'); ?>
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<p><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATION') ?> <?php echo $url; ?>/<?php echo $id; ?>-<strong id="alias"><?php echo $this->item->alias; ?></strong></p>
								</div>
							</div>
							<div class="control-group">
								<div class="controls">
									<?php echo $this->form->getInput('articletext'); ?>
								</div>
							</div>
							<div class="alert alert-info">
								<?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_READMOREDESC') ?>
							</div>
						</div>
					</div>
				</div><!-- End Left column -->

				<!-- Right column -->
				<div class="span4">
					<div class="well">
						<h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS') ?></h3>
						<?php echo $this->form->renderField('state'); ?>
						<?php echo $this->form->renderField('access'); ?>
						<?php echo $this->form->renderField('publish_up'); ?>
						<div class="btn-toolbar">
							<div class="btn-group">
								<button type="button" class="btn" onclick="Joomla.submitbutton('article.cancel')">
									<span class="icon-cancel"></span>&#160;<?php echo JText::_('JCANCEL') ?>
								</button>
							</div>
							<div class="btn-group">
								<button type="button" class="btn btn-success" onclick="Joomla.submitbutton('article.save')">
									<span class="icon-ok"></span>&#160;<?php echo JText::_('JSAVE') ?>
								</button>
							</div>
						</div>
					</div>
					<div class="well">
						<h3 class="page-header"><?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_IMAGE') ?></h3>
						<div class="control-group">
							<div class="controls">
								<?php echo $this->form->getInput('image_intro', 'images'); ?>
							</div>
						</div>
					</div>
					<div class="well">
						<h3 class="page-header"><?php echo JText::_('JTAG') ?></h3>
						<div class="control-group">
							<div class="controls">
								<?php echo $this->form->getInput('tags'); ?>
							</div>
						</div>
					</div>
				</div><!-- Right column -->
			</div>
		</fieldset><!-- End Visible fieldset -->

		<!-- Hidden fieldset -->
		<fieldset class="hidden">
			<?php echo $this->form->getInput('catid'); ?>
			<?php echo $this->form->getInput('alias'); ?>
			<?php echo JHtml::_('form.token'); ?>
			<input type="hidden" name="task" value="" />
			<input type="hidden" name="return" value="<?php echo $this->return_page; ?>" />
			<?php if ($this->params->get('enable_category', 0) == 1) :?>
				<input type="hidden" name="jform[catid]" value="<?php echo $this->params->get('catid', 1); ?>" />
			<?php endif; ?>
		</fieldset><!-- End Hidden fieldset -->
	</form>
</div>

<script type="text/javascript">
	// Add title placeholder
	jQuery("#jform_title").attr("placeholder", "<?php echo JText::_('OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER') ?>");

	// Transform title to alias while typing
	jQuery("#jform_title").keyup(function ()
	{
		var title = jQuery(this).val();
		alias = title.toLowerCase().replace(/[^a-z0-9\s]/gi, '').replace(/[_\s]/g, '-');
		jQuery("#jform_alias").val(alias);
		jQuery("#alias").html(alias);
	});

	// Allow alias editing on click
	jQuery('#alias').click(function ()
	{
		var replaceWith = jQuery('<input id="temp" name="temp" type="text"></input>');
		var connectWith = jQuery('#jform_alias');
		var elem = jQuery(this);
		elem.hide();
		elem.after(replaceWith);
		replaceWith.val(elem.text());
		replaceWith.focus();
		replaceWith.blur(function ()
		{
			if (jQuery(this).val() != "")
			{
				connectWith.val(jQuery(this).val()).change();
				elem.text(jQuery(this).val());
			}
			jQuery(this).remove();
			elem.show();
		});

		// Only allow valid alias characters
		jQuery("#temp").bind('keypress', function (event)
		{
			var regex = new RegExp("^[a-z0-9\-]+$");
			var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
			if (!regex.test(key))
			{
				event.preventDefault();
				return false;
			}
		});
	});
</script>

language_overrides_used_for_this_example.ini

JFIELD_ACCESS_LABEL="Visible for"
OVERRIDE_COM_CONTENT_FORM_IMAGE="Image"
OVERRIDE_COM_CONTENT_FORM_PUBLICATION="This article will be published on"	
OVERRIDE_COM_CONTENT_FORM_PUBLICATIONDETAILS="Publication details"	
OVERRIDE_COM_CONTENT_FORM_READMOREDESC="<strong>Read More:</strong> use the \"Read More\" button to split an article. Place the cursor in the article where the \"Read More\" button needs to be added, and click on the \"Read More\" button above."		
OVERRIDE_COM_CONTENT_FORM_TITLEPLACEHOLDER="Enter your blog post title"

Thanks for this Sander

One thing I noticed is that you are not setting the language anywhere which means that even on a monolingual web site it will then be displayed in article manager with a language of 'undefined"

If you add this line then it will be stored as ALL which is the default value
<input type="hidden" name="jform[language]" value="*" />

Just noticed the ALIAS field live-typing and edit-on-click feature. Cool idea!
It seems not to work with german special characters like äöü ÄÖÜ ß
Probably there are other languages or special characters that are not taken into acount.
I am not a JavaScript Guy, so I would appreciate any tip or help on it ;)

FYI, here is a related StackOverFlow topic with some solutions and an interesting JS Gist link in the comments:

• StackOverFlow / Replacing umlauts in JS
• Gist JS / Remove diacritics (Umlauts, Accents, Special characters) in JavaScript

Thanks for reading.
Best regards.