auto-send form when field is filled

Hello Forum

Can you help me with this?

I have a form with a field (‘maxlength’ => 10).

I need that when the user finishes writing the 10 characters of the field, the form auto-sends itself.

Thank you.

This is client-side trouble, to solve with jQuery.

An hint:




<?php

$this->registerJS( <<< EOT_JS


     $('#inputField').on('change', function(ev) {

             $(this).parents('form').submit();

             ev.preventDefault();

    });


EOT_JS

);

?>


<body>

<form>

<input id="inputField" type="text" />

</form>

</body>



Hello Fabrizio. Thanks for your answer.

I tried your solution but nothing happens.

This is my code if you want to review it.

<?php

$this->registerJS( <<< EOT_JS

 &#036;('#id-ticket').on('change', function(ev) {


         &#036;(this).parents('form').submit();


         ev.preventDefault();


});

EOT_JS

);

?>

<?php

use yii\helpers\Html;

use yii\widgets\ActiveForm;

/* @var $this yii\web\View */

/* @var $model app\models\VtaTrxcaja */

/* @var $form yii\widgets\ActiveForm */

?>

<div class="vta-trxcaja-formcaja">

&lt;?php &#036;form = ActiveForm::begin(); ?&gt;





&lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-sm-3&quot;&gt;


    &lt;?= &#036;form-&gt;field(&#036;model, 'ticket')-&gt;textInput(['maxlength' =&gt; 10, 'id' =&gt; 'id-ticket', 'autofocus' =&gt; 'autofocus',]) ?&gt;


&lt;/div&gt;&lt;/div&gt;





&lt;div class=&quot;form-group&quot;&gt;


    &lt;?= Html::submitButton(Yii::t('app', 'Next'), ['class' =&gt; &#036;model-&gt;isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?&gt;


&lt;/div&gt;





&lt;?php ActiveForm::end(); ?&gt;

</div>

try the following




<script type="text/javascript">

$(document).on('keyup', '#id-ticket', function() {

    	if ($(this).val().length === 10) {

        	$( "form" ).submit();

    	}

});

</script>



It will capture the user typing in the field. when the user types 10 chars. it submits the form. You can also add an id to your form if you have multiple on the same page like




<?php $form = ActiveForm::begin(['id'=>'yourFormId']); ?>

and change

$( "form" ).submit();

to

$( "#yourFormId" ).submit();



if it works you can register it like fabrizio did and you can read about it here yii’s register js function.

You might want to be careful auto submitting forms. If the user has a typo it will save the wrong data and make more work for the user.

skworden thanks for your answer … but neither works.

I do not understand why?

I doubt arises about what you say about registering the function.

Where or how should I do?

Sorry but I’m going from yii1 to yii2 and do not have much practice in js.

Thanks for your help.

check your console for js errors.

to register using yiis js register use something like




<?php

$this->registerJs("$(document).on('keyup', '#id-ticket', function() {

    	if ($(this).val().length === 10) {

            	$('form').submit();

    	}

});");

?>



It desen’t matter where in your view you put it because yii will place it at the


<?php $this->endBody(); ?>

in your layout.main file (i.e. at the end of your page). by default.

If you don’t have begin and end body in your layouts then you need to add them. here is a completely stripped layout main with just the basics


<?php $this->beginPage();?>

<!DOCTYPE html>

<html lang="<?= $app->language ?>">

  <head>

    	<meta charset="<?= $app->charset ?>"/>   	

    	<?php

    	echo yii\helpers\Html::csrfMetaTags();

    	$this->head();

    	?>

  </head>

  <body>

    	<?php 

    	$this->beginBody();

 	   echo $content;

    	$this->endBody(); 

    	?>

  </body>

</html>

<?php $this->endPage(); ?>

Install firebug in Firefox and check in console that there are not javascript error.

You could also open html source to verify that javascript code is present.

+1 for firebug…you can also right click inspect element (chrome, ff and others) will still show the errors under console tab…

Fabrizio / skworden

It worked!!!

Thank you for your help.

With guys like you, software development progresses faster.