How to use 'this' in javascript in repeater

Front End Components General
#1

I have a repeater that contains a form.
I want to disable the button if the form is submitted in the repeater.

I’ve tried a number of things but nothing is working.

  • Tried passing this into a javascript function - apparently it gets a handle to the flowcontrol object
  • Tried passing $index into it and it’s not running my function at all:
    dmx-on:click=“run({runJS:{function:‘disable_btn’,args:[’{{$index}}’]}})”
  • Tried creating an onsubmit event on the form passing in the index - the onsubmit event isn’t rendered in the HTML

any other suggestions?

#2

Tried this tutorial?
https://community.wappler.io/t/show-disabled-button-with-spinner-on-form-submit/5470

#3

Thanks for your reply. That didn’t work for me. I have the form in a repeater so getting a handle to the object was tricky.

Here’s what I ended up doing for anyone who finds this later:

function disable_btn(index){
  $('form_name_'+index).submit();
  document.getElementById('btn_save_' + index).disabled=true
}

Then my button it looks like this:
<button class="btn btn-primary" type="submit" dmx-bind:id="'btn_save_' + $index" dmx-on:click="run({runJS:{function:'disable_btn',args:[$index]}})">Save</button>

#4

I think $value represents the current object in repeaters.

#5

Yep - confirmed!

#6

Hi,
From what I understand, your repeat will render multiple forms and each form has their own set of controls and buttons. On submission of any 1 of the forms, you want to disable the buttons of that particular form. Is this correct?

#7

@sid Yes - this is correct.

I’m opening a modal when a button is clicked and pre-filling some hidden/regular fields. Once the form was submitted I wanted to hide the button.

I ended up passing in the index of the repeater, then used jquery to hide the button after it was saved. I was looking for a more ‘wappler-ish’ way to do this instead of the old-school jquery way but I got it solved.

#8

On save of form, you can maintain an array of completed indexes.
On the button, set dmx-hide attribute to check if array contains the current $index.