How to use JQuery to change a button's value or url


(kawaid) #1

I have a button added to a Label template tied to a Select2 widget. Clicking the button opens a modal window. The initial value or url of the button calls the “create” function in the appropriate controller. This works fine and the modal opens etc…
What I want to be able to do is change the button’s url from create to update if a selection has been made from the list and open an update on the selected item in my modal window. The problem is that I can seem to get JQuery to modify the button’s url to update. I can change the title, class etc… but not the value.

Here is the code in my view:

<?php
	$entityLabelTemplate = '<label>Entity</label> &nbsp;&nbsp' .
        Html::button('<i id="iconEntity" class="fa fa-fw fa-plus" data-fa-transform="shrink-3"></i>',
                       ['value'=>Url::to(['entity/create']), 'title' => 'Create New Entity',
                        'class' => 'btn btn-xs btn-success showModalButtonLarge', 'id'=>'btnManageEntity']) .'{input}{hint}{error}';
?>
<?=
$form->field($model, 'entity_id',['template' => $entityLabelTemplate])
    ->widget(select2\Select2::classname(), [
        'model' => $model,
        'data' => ArrayHelper::map(Entity::find()
            ->orderBy('entity_name')
            ->all(), 'id', function ($model, $defaultValue) {
                if (is_null($model->entity_code)) {
                    return $model->entity_name;
                } else {
                        return $model->entity_name . ' - ' . $model->entity_code;
                       }
                }),
        'options' => ['placeholder' => 'Select an entity ...', 'id' => 'comboEntity'],
        'pluginOptions' => ['allowClear' => true],
        ]);
?>

I have an onChange event for my dropdown and I’m able to change some attributes of the button but not the url.

 $("#comboEntity").on("change", function(e) { 
    var entityID = $("#comboEntity").val();
       if ( entityID.trim().length == 0) {
          $("#iconEntity").removeClass().addClass('fa fa-fw fa-plus');
          $("#btnManageEntity").attr('title', 'Create New Entity');
       } else {
           $("#iconEntity").removeClass().addClass('fa fa-fw fa-pen');
           $("#btnManageEntity").attr('title', 'Update Entity');
            $("#btnManageEntity").attr('value', '/riskbond/backend/web/update');
           }
});

Any help pointing me in the right direction would be appreciated.
Thanks.


(Schanz15) #2

From http://api.jquery.com/attr/

To retrieve and change DOM properties such as the checked , selected , or disabled state of form elements, use the .prop() method.