Disable button on click but still process form - javascript

I want to disable my register button on click to prevent spam, but I don't want to prevent the form the button submits from submitting.
I'm able to disable the button on click, but can't figure out why the form still won't submit...
button:
<?= form_open("course/registerCourse", "method='post'") ?>
<input type="hidden" name="session" value="<?= $session["id"] ?>">
<button type="submit" class="btn-sm btn btn-success register">REGISTER</button>
<?= form_close() ?>
jQuery:
$('.register').on('click',function() {
$(this).prop("disabled",true);
$("form").submit();
});
register function:
public function registerCourse()
{
$user = $this->users_model->userAccountTP();
$appParticipant = $user[0]["id"];
$author_id = $this->session->userdata("ci_user_id");
$appSession = $this->input->post('session');
$this->ci_channel_entry_model->save_multiple(array(
"channel_id" => 11,
"title" => date("Y-m-d h:i:s"),
"author_id" => $author_id,
"status_id" => 7,
"date" => date("Y-m-d h:i:s"),
"data" => array(
array(
// application-session
"field_id" => 28,
"content" => $appSession
),
array(
// application-participant
"field_id" => 29,
"content" => $appParticipant
)
),
"hook" => FALSE
));
redirect($this->agent->referrer());
}

I think you might have a typo, because I dont see where you are declaring $form, so maybe this helps:
$('.register').on('click',function() {
$(this).prop("disabled",true);
$("form").submit();
});

Ended up reworking my form to align with this answer and everything worked:
https://stackoverflow.com/a/5691065/4141833

Related

I'm using YII2, I'm displaying a list of inactive users. I'm using the checkbox to select the user. I'm going to send an email to the user I tagged

$user
id
name
001
user 1
002
User 2
<ul>
<?php foreach($user as $user( { ?>
<input class="is-selected" type="checkbox" value="<?= $value->user->id ?>" />
<?php } ?>
</ul>
<button type="submit" class="btn is-primary">Send Reminder</button>
I'm using YII2, I'm displaying a list of inactive users. I'm using the checkbox to select the user. I'm going to send an email to the user I tagged.
how can i get id value from that checkbox and send data to controller?
I try to use javascript/jquery but i can't solved yet, i need some help from you guys
The above screenshot and your implementation is like you are talking 2 different things.
You would just be required a Grid View with CheckboxColumn
<?php
use yii\bootstrap\ActiveForm;
use yii\grid\GridView;
use yii\helpers\Html;
$form = ActiveForm::begin([
'action' => ['index'],
'method' => 'get',
'id' => 'user_form',
'options' => ['class' => 'lfp-listing']
]);
echo Html::submitButton('Send Reminder', ['class' => 'btn is-primary', 'name' => 'action', 'value' => 'send_reminder']);
echo GridView::widget([
'dataProvider' => $dataprovider,
'columns' => [
'id',
'name',
'email',
[
'class' => 'yii\grid\CheckboxColumn',
'checkboxOptions' =>
function ($model) {
return ['value' => $model->id, 'class' => '', 'id' => 'checkbox'];
}
],
]
]);
ActiveForm::end();
Considering your Action is actionIndex()
public function actionIndex()
{
if (isset($_REQUEST['action']) && isset($_REQUEST['selection']) && 'send_reminder' == $_REQUEST['action'] ) {
foreach ($_REQUEST['selection'] as $userIds) {
//write down the email code here....
}
}

Validate form before submit

There is a form. The submit button does not apply to ActiveForm with id = "modal-btn-register-request". In JQuery, by clicking on this button I call $("#modal-btn-register-request").submit() and the form has been validated or not sent to the action. How can I validate before clicking the button. It's all about the button, if you insert the standard Html::submitButton, if there are errors in the form, the data is not sent
rules in model
public function rules()
{
return [
[['email'], 'required'],
[['email'], 'email'],
[['password','password_confirm'], 'required'],
];
}
form in view
<?php \yii\widgets\ActiveForm::begin(['action' => '/sign-up']); ?>
<?php echo $form->field($registerForm, 'email')->textInput(['placeholder' => 'Input login', 'class' => 'modal-login__input inp-main']); ?>
<?php echo $form->field($registerForm, 'password')->passwordInput(['placeholder' => 'Input password', 'class' => 'modal-login__input inp-main']) ?>
<?php echo $form->field($registerForm, 'password_confirm')->passwordInput(['placeholder' => 'Confirm the password','class' => 'modal-login__input inp-main']) ?>
<?php \yii\widgets\ActiveForm::end(); ?>
<div class="modal-login__form-btns-cont clearfix">
<div class="modal-login__form-btn-wp modal-login__form-submit-cont text-md-right float-md-right">
<a class="modal-login__submit-btn" id="modal-btn-register-request" href="">Come in</a>
</div>
</div>
jQuery code
$("#modal-btn-register-request").click(function() {
$("#w3").submit();
});
if there is an incorrect field, do not send the form and vice versa?
or how you can send the form when clicking on an element that does not belong to ActiveForm and take into account the validation
Use event.preventDefault() and the yiiActiveForm object:
$("#modal-btn-register-request").click(function(event) {
event.preventDefault();
jQuery('#w3').yiiActiveForm().submit();
});
try this
<?php \yii\widgets\ActiveForm::begin(['action' => '/sign-up']); ?>
<?php echo $form->field($registerForm, 'email')->textInput(['placeholder' => 'Input login', 'class' => 'modal-login__input inp-main']); ?>
<?php echo $form->field($registerForm, 'password')->passwordInput(['placeholder' => 'Input password', 'class' => 'modal-login__input inp-main']) ?>
<?php echo $form->field($registerForm, 'password_confirm')->passwordInput(['placeholder' => 'Confirm the password','class' => 'modal-login__input inp-main']) ?>
<div class="modal-login__form-btns-cont clearfix">
<div class="modal-login__form-btn-wp modal-login__form-submit-cont text-md-right float-md-right">
<a class="modal-login__submit-btn" id="modal-btn-register-request" href="">Come in</a>
</div>
</div>
<?php \yii\widgets\ActiveForm::end(); ?>
At first glance seems your button in not witnin the actual form.
Edit:
I think for what you need you can go about doing in two ways:
1) use an AJAX validation or
2)Use javascript (or JQuery if you prefer) in your view to process the fields before yo call $("#modal-btn-register-request").submit()
For (1) you can do like so:
Edit your form begin like so <?php \yii\widgets\ActiveForm::begin(['action' => '/sign-up', 'enableAjaxValidation' => true]); ?>
Next add the rule you want to verify ofr example:
public function rules()
{
return [
[['email'], 'required'],
[['email'], 'email'],
['email', 'unique'], //<---for example
[['password','password_confirm'], 'required'],
];
}
Now you would need to add to your action (the one that renders the form) an if statement to catch this AJAX call in your controller like so
public function actionSignup(){ //<-- assuming its the signup action
$model = new User();
if(Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())){
Yii::$app->response->format = 'json';
return ActiveForm::validate($model);
}
return $this->render('signup',[
'model' => $model
]);
}
If you want to validate without even checking in your database then is can be doe strictly with javascript (or JQuery) and option (2) is your choice. In that case check out the question check length of input field?
Hope this helps.

Cake PHP change value of hidden form item by javascript

I have the below cake php form in my view:
<?php $form_id = 'message_form ' + $profile_id ?>
<?php echo $this->Form->create('Post', array('id' => $form_id, 'url' => array('app' => true, 'controller' => 'messages', 'action' => 'new', $profile_id))); ?>
<?php echo $this->Form->input('text', array('type' => 'textarea', 'class' => 'form-control', 'label' => false, 'data-validate' => 'not-empty', 'name' => 'data[Message][content]', 'placeholder' => 'Reply...')); ?>
<?php echo $this->Form->input('hidden', array('type' => 'hidden', 'class' => 'form-control', 'label' => false, 'name' => 'data[Message][parent_id]', 'value' => 1)); ?>
<div class="message-reply-options">
<i class="fa fa-camera"></i>
<i class="fa fa-paperclip"></i>
<i class="fa fa-trash"></i>
<span class="pull-right">
<?php echo $this->Form->submit('Send', array('class' => 'form-control')); ?>
</span>
</div>
<?php echo $this->Form->end(); ?>
This works fine, however I need to be able to change the hidden fields value via javascript depending on something the user does else where on the page.
Below is my current javascript I am using for this, however it does not change the value (but gives no error either).
var newestmessage = response.ChildMessage[response.ChildMessage.length-1];
var parentid = newestmessage.parent_message_id;
document.getElementsByName('data[Message][parent_id]').value = $parentid;
This would have probably been a comment, but since I don't have enough reputation...
I guess you are trying to change/assign the value to hidden field on a particular, action.
I just assume a click event.
Jquery required
$('.classNameOfClickableObjt').clilck(function(){
$('input[name="data[Message][parent_id]"]').val(parentid);
/*Another alternative, you might assign attribute, like
$('input[name="data[Message][parent_id]"]').attr('value', parentid); */
})
You can try jquery and ajax functionally to check the value of hidden input box.

yiibooster wizard validation

I have done a yiibooster wizard form, everything works perfectly BUT i want to force the customer to click in a TbExtendedGridView before he can do the next step.
In the form there are 2 TbExtendedGridView and 2 date fields.
Here is some code of the form:
<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm', array(
'id'=>'zf-contratos-form',
// Please note: When you enable ajax validation, make sure the corresponding
// controller action is handling ajax validation correctly.
// There is a call to performAjaxValidation() commented in generated controller code.
// See class documentation of CActiveForm for details on this.
'enableAjaxValidation'=>false,
'htmlOptions'=>array('class'=>'well'),
'action' => array( '/ZfContratos/create' ),
)); ?>
<div id="wizard-bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<?php $this->widget(
'bootstrap.widgets.TbWizard',
array(
'type' => 'tabs', // 'tabs' or 'pills'
'pagerContent' => '<div style="float:right">
<input type="button" class="btn button-next" name="next" value="Siguiente" />
</div>
<div style="float:left">
<input type="button" class="btn button-previous" name="previous" value="AtrĂ¡s" />
</div>
<br /><br />',
'options' => array(
'nextSelector' => '.button-next',
'previousSelector' => '.button-previous',
'onTabShow' => 'js:function(tab, navigation, index) {
var $total = navigation.find("li").length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$("#wizard-bar > .bar").css({width:$percent+"%"});
}',
'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',
),
'tabs' => array(
array(
'label' => 'Arrendatarios',
'content' => $this->renderPartial('//ZfContratos/_form_arrendatarios', array('model' => $model, 'form' => $form), true),
'active' => true
),
array('label' => 'Inmuebles', 'content' => $this->renderPartial('//ZfContratos/_form_inmuebles', array('model' => $model, 'form' => $form), true)),
array('label' => 'Fecha', 'content' => $this->renderPartial('//ZfContratos/_form_contratos', array('model' => $model, 'form' => $form), true)),
),
)
); ?>
<?php $this->endWidget(); ?>
The procedure would be, first step with "next" disable and when the customer clik on a row of the TbExtendedGridView "next" will be available and he can click on "next" to the next step.
Thank you so much.
CODE TESTED WORKING:
$cs = Yii::app()->getClientScript();
$cs->registerScript('hello', "
$(window).load(function()
{
alert('hello');
$('#next').attr('disabled',true);
});");
$cs->registerScript('button',"
$('#arrendatario').click(function()
{
$('#next').attr('disabled',false);
});");
You can do this in Jquery. First you have to set Id of TbExtendedGridView. Next Button contains class next Then you do like this
<script type="text/javascript">
window.onload=function(){
$('.next').attr('disabled',true);
}
$(document).ready(
function()
{
$('.grid-view').click(function()
{
$('.next').attr('disabled',false);
});
}
);
</script>
I have used class as selector but u can use use ID as selector as "#selector". You can also use jquery on child elements of grid-view. Above is just an example.
Here is some info about jquery selectors
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
EDIT:
try
<?php $cs = Yii::app()->getClientScript();
$cs->registerScript('hello', "
$(window).load(function()
{
alert('hello');
}
)");
?>
If this works then copy the whole code in this script.

Cakephp onChange event on select form (dropdown)

I have a form with select input. I want to auto submit the form when the dropdown list was selected.
My code:
<?php echo $this->Form->create('Product', array('controller'=>'products', 'action'=>'shipping_area'));
echo $this->Form->input('area', array('options' => array('1' => 'Within Malaysia', '2' => 'International'), 'empty' => 'choose area',
'label' => 'Choose shipping area', 'onChange'=>'javascript:this.form.submit()'));
//echo $this->Form->end('Save');
?>
I put 'onChange'=>'javascript:this.form.submit()', but it goes to http://localhost/cake/cake/products/shipping_area ( supposely http://localhost/cake/products/shipping_area )
I also tried 'onChange'=>'this.form.submit()', but got same error.
can anyone please help.
You can add an "id" attribute to the form and then every time that you get an "onchange" event in the "select" element, you have to obtain the "id" value and pass it to the javascript function "document.getElement('idValueHere')" and call to the fuction submit. More clearly, the following code:
<?php
# step 1: add an id attribute ('id' => 'anyFormName') to the array options
# step 2: add an onchange envent to the dropdown ('onChange'=>'document.getElementById("anyFormName").submit();')
echo $this->Form->create('Product', array('controller'=>'products', 'action'=>'shipping_area', 'id' => 'anyFormName'));
echo $this->Form->input('area', array('options' => array('1' => 'Within Malaysia', '2' => 'International'), 'empty' => 'choose area',
'label' => 'Choose shipping area', 'onChange'=>'document.getElementById("anyFormName").submit();'));
//echo $this->Form->end('Save');?>
Hope it helps you.
echo $this->Form->create('Product', array(
'url' => array(
'controller'=>'products', 'action'=>'shipping_area'
)
));

Categories

Resources