submitting a form from a LOAD component - request.post_vars is empty

[Vlad]

I am loading a component with LOAD. the component has the form on it. the form is submitting via post method. 

request.post_vars is empty. the variables don't go through. 

when I copy the same very code and pasting it in the view (i.e. instead of the LOAD component - while taking the LOAD line out) - with not even a single change, just copy and paste - 

request.post_vars is correct - filled with whichever parameters are coming from the form. 

is this a feature or a bug? :) 

is there something subtle I am missing about those components? I've tried both - loading the component with ajax true and ajax false - same thing. And the same thing happens when I tried to submit with get method. 

Other than not having vars set - everything else functions right. The form is submitted... 

Any ideas? 

[Vlad]

I've narrowed down what's going on, but still stuck...

this is how the form is being submitted (from inside of the component): 

function stripeTokenHandler(token) {

  var form = document.getElementById('payment-form');

  var hiddenInput = document.createElement('input');

  hiddenInput.setAttribute('type', 'hidden');

  hiddenInput.setAttribute('name', 'stripeToken');

  hiddenInput.setAttribute('value', token.id);

  form.appendChild(hiddenInput);  

  form.submit();

}        

it seems to me that document.createElement('input') doesn't create an element under the topmost document (I don't really understand this well, but when this code is in the main html - not in the component- it works correctly and submits the proper data to the form action url)

I just can't think of anything else here - those variables that are hardcoded in the form, i.e. not submitted via created on the fly in input fields - are passed over correctly. 

Greatly appreciate some help... 

[Vlad]

sorry for keeping posting about this. I am just totally stuck. I am sure that I am missing something very basic. Here is the complete code: 

<form action="{{=URL('credit_card_saved')}}" method="post" id="payment-form2">
       <button>Submit</button>
</form>


<script>


function CustomizeFormSubmission2(event) {
  event.preventDefault();
  var form = document.getElementById('payment-form2');
  var element = document.createElement('input');
  element.setAttribute('type', 'hidden');
  element.setAttribute('name', 'stripeToken');
  element.setAttribute('value', "THIS_IS_TOKEN");
  form.appendChild(element);  
  form.submit();
}


var form = document.getElementById('payment-form2');
form.addEventListener('submit', CustomizeFormSubmission2);

So when this is placed in the view straight - it's perfect. Behaves as expected. 

However, if it's placed into the component via LOAD, it grossly malfunctions. Not only the post_vars is empty, but even 

event.preventDefault();

doesn't work either (if I remove form.submit, it's still immediately submitting the form). 

What am I missing about how LOAD is expected to operate?? How do I make it work?? 

[Dave S]

On Friday, May 31, 2019 at 1:57:50 PM UTC-7, Vlad wrote:

sorry for keeping posting about this. I am just totally stuck. I am sure that I am missing something very basic. Here is the complete code: 

<form action="{{=URL('credit_card_saved')}}" method="post" id="payment-form2">
       <button>Submit</button>
</form>


<script>


function CustomizeFormSubmission2(event) {
  event.preventDefault();
  var form = document.getElementById('payment-form2');
  var element = document.createElement('input');
  element.setAttribute('type', 'hidden');
  element.setAttribute('name', 'stripeToken');
  element.setAttribute('value', "THIS_IS_TOKEN");
  form.appendChild(element);  
  form.submit();
}


var form = document.getElementById('payment-form2');
form.addEventListener('submit', CustomizeFormSubmission2);

So when this is placed in the view straight - it's perfect. Behaves as expected. 

However, if it's placed into the component via LOAD, it grossly malfunctions. Not only the post_vars is empty, but even 

event.preventDefault();

doesn't work either (if I remove form.submit, it's still immediately submitting the form). 

What am I missing about how LOAD is expected to operate?? How do I make it work?? 

 

I don't know about custom forms, I haven't done much (if any) with them in any context.

In one app, I use a LOAD for a form as follows:

controller/default.py

def index():
  do_prep_stuff()
  form = SQLFORM(db.mylist)
  if form.process().accepted:
    etc()
  fi
  return dict(form=form, getter=LOAD(url=URL(request,f="getstuff.load:),ajax=True))

and in the view:

topofpage
{{block left_sidebar}}
blah
{{end}}

{{=form}}
{{=getter}}

and back in controller/default.py

def getstuff():
   form = SQLFORM.factory(Field('x'), Field('y'))
   form.element("input, _id="no_table_x")['_autofocus'] = True
   if form.process().accepted:
      stuff_x = form.vars.x
      etc()
   fi
   return dict(form=form)

I hope there's some clues in there for you.

Dave
/dps

[Eliezer (Vlad) Tseytkin]

Oh, this kind of stuff does work, I've used it in this context; but t's very different in my case:

The real problem is that addEventListener clearly does not work from inside of the LOAD component (not sure if it doesn't work at all there, or there is something weird in my case, though I simplified it to just a few basic lines of code). 

Since it doesn't work - all the code that I expect to execute - doesn't. 

But dom elements are referenced correctly, I checked. So there may be something very subtle about LOAD but I can't ask "regular" JavaScript experts, since I have little clue on how LOAD ajax actually works... 

Thank you anyway, I will keep trying... I guess I have to look into the way web2py implements LOAD to understand how to ask JavaScript gurus .. 

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/dDzwFQlxl5w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/40e8b12a-a85d-4d96-8ff1-7d1839ad6634%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Anthony]

In order for web2py to submit forms inside LOAD components via Ajax, it must set up its own event handler to "trap" the form submission, so it can be intercepted -- this is done here: https://github.com/web2py/web2py/blob/master/applications/welcome/static/js/web2py.js#L307.

If you don't want web2py to trap the form, try:

<form class="no_trap" ...>

Alternatively, create the entire form via Javascript after the component has been loaded.

Anthony

[Eliezer (Vlad) Tseytkin]

got it, thank you very much ! 

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/dDzwFQlxl5w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/fab650af-3326-4a7b-a394-05eca5bb56ea%40googlegroups.com.