Run custom code after clicking submit form

Steffen_Dobritz

I'm trying to run some custom code after form is submited by click-event

$("button > div:contains('Save')").on("click",function(e){...

But it does not work. Is it possible to edit some user input inside custom-click event for the submit-form-button and save the value to the ViewModel in a proper way? For example I can change the text of a input-field/textarea by trigger the keyup event. But it looks messy to simulate user behavior to change the content of the model.

var fieldId = $("label:contains('MyTextarea')").parent().find("textarea").attr('id');
$("#" + fieldId).val("newText");//edit the field
$("#" + fieldId).keyup();//trigger change event to ensure the value is saved in pageForm.ViewModel by clicking submit

Justin_Workman

I didn't realize you were on a request offering. You could bind to the mouseover event instead of click? That way it happens before submission. It might happen more than once, but that shouldn't matter as the result will be the same.

Justin_Workman

@Steffen_Dobritz - I wonder if your event handler isn't binding because the save button isn't rendered when the code is running. There are different ways to accommodate the timing of the page rendering. One I've been doing recently is binding to the ajaxSuccess event on the document and checking for my element. In your case it might look like this:

$(document).bind('ajaxSuccess', function() {

if ($("button > div:contains('Save')").length) {

pageForm.viewModel.set('MyTextarea', 'newText');

$(document).unbind('ajaxSuccess'); //so it doesn't continue running after your element is found

}

})

Also, I would suggest just changing the viewModel directly as I did above. Please bear in mind that I wrote the above on the fly without testing, but hopefully it gives you somewhere to start....

Steffen_Dobritz

because the save button isn't rendered when the code is running...

You are right. There for I used the waitForEl-function, which I found somewhere in the past.

var waitForEl = function(selector, callback) {
 if (jQuery(selector).length) {
   callback();
 } else {
   setTimeout(function() {
     waitForEl(selector, callback);
   }, 100);
 }
};

Also, I would suggest just changing the viewModel directly as I did above.

This is exactly what I was asking for. My textarea is mapped to the description field by definition of the requestoffering. And if I try to modify the user input for this field programmatically after clicking submit, it has no effect. There are two approaches I know to change the model:

1. access viewModel properties via dot notation, see the commented line below. Useing dot notation because I can't find a setter-function as you mentioned.
2. set the value of the textfield and simulate a key stroke.

waitForEl("button > div:contains('Speichern')",function(){
   $("button > div:contains('Speichern')").on("click",function(e){
      $("#textArea2db1b507-2f35-4ab2-a56f-e299957576b4").val("6543");
      $("#textArea2db1b507-2f35-4ab2-a56f-e299957576b4").keyup();
      //pageForm.ViewModel.Description = "54321";   
   });
});

Justin_Workman

I didn't realize you were on a request offering. You could bind to the mouseover event instead of click? That way it happens before submission. It might happen more than once, but that shouldn't matter as the result will be the same.

Steffen_Dobritz

You could bind to the mouseover event instead of click?

Maybe but not in that two cases I described above, because the model will be overridden after submit with the value of the textarea. And the user get confused, when I change their input before submit.

A workaround could be, to create another text field (independent of the RO definition) for user input. And hide the textarea. So I can do the changes to the textarea invisible for the user, based on their inputs.