form submission differences?

[Ixonal]

long story short, I ran into a weird difference between input type submit and using the javascript form submit function. when I use the regular input element to submit, post data goes through fine, but not when I use the javascript function. I'm usin the javascript for form validation so I can't really just drop that. any thoughts?

<input type="button" name="trackSubmit" value="Add Song" onclick="javascript:submitTrackForm()"/>
vs
<input type="submit" name="Submit" value="Add Song"/>

with

function submitTrackForm() {
  var trackForm = document.forms["trackManager"];

  if(validateForm(trackForm)) {
    lockForm(trackForm);
    loadingDiv.style.visibility = "visible";
    trackForm.submit();
  }
  
}

 

[callumacrae]

"loadingDiv.style.visibility = "visible";"

I don't think that's js - try document.getElementById("loadingDiv").styl...

~Callum

 

[essellar]

A bigger question is why you seem to think that JavaScript validation would prevent you from using <input type="submit" />. JavaScript form validation (a mere user convenience) should be called from the form's onsubmit event, returning false on failure and true otherwise, and should be backed up by server-side (true) validation. Your page should work just as well with JavaScript disabled as it does with everything working as planned.

 

[Ixonal]

"loadingDiv.style.visibility = "visible";"

I don't think that's js - try document.getElementById("loadingDiv").styl...

~Callum

it is JS, I have loadingDiv defined as a global for that element (multiple forms can load, so I just re-use that div)

A bigger question is why you seem to think that JavaScript validation would prevent you from using <input type="submit" />. JavaScript form validation (a mere user convenience) should be called from the form's onsubmit event, returning false on failure and true otherwise, and should be backed up by server-side (true) validation. Your page should work just as well with JavaScript disabled as it does with everything working as planned.

as for your comment, essellar, the site is based on AJAX, so it doesn't run at all without JS. I also want to do at least minor validation up front, as there are some things I don't even want getting to the server (there's validation there too).

but my question still remains. they should be referencing the exact same browser function. so why is one sending post data and one not?

 

[descalzo]

Are you saying the form is submitted but there is no data sent?

Does the page leave or is it an AJAX submission?

 

[Ixonal]

Are you saying the form is submitted but there is no data sent?

Does the page leave or is it an AJAX submission?

yeah, when I print out the $_POST array in php, it prints out an empty array if I use trackForm.submit(), but is populated properly if I use a regular submit input field.
I have the target of the form as an iframe so it won't reload the whole page, but can still use the post method.

 

[descalzo]

Let me guess.... lockForm() disables the text inputs, etc, right?

 

[essellar]

The onsubmit event is quite capable of doing "minor validation up front", and it is the ONLY correct way of calling validation on a form submission (that would not include a back-end POST request through XMLHttpRequest). You are aware that there are many more ways of submitting an HTML form than clicking your button, right? (If not, then you haven't done a lot of testing.) And no, calling the form's submit() method is not necessarily doing the same thing as using an <input type="submit">. For one thing, ALL buttons are submit buttons by default, so if you are not returning false to the button's onclick event on failure, the form will submit anyway and if your code passes, you get two competing calls to submit, one from your code and one from the button default event. Ooops!

And if AJAX is the only way to use your site, you're doing it wrong.

 

[Ixonal]

and you have lost all credibility essellar, congrats.

and yeah, lockform is there to disable all elements of the given form, so that you don't mess with it while it does its thing

 

[descalzo]

Hint: disabled elements are not submitted.

If you insist on disabling the input elements, you should try (don't know if it would work) disabling them immediately after submitting. Otherwise, use hidden elements.

He is right on some things. A <button> will submit the form by default (at least in Firefox). Hitting [ENTER] will too. The validation/etc should come on the onsubmit of the form.

 

[Ixonal]

ah-hah, that solved it... yeah, I suppose I can call lockForm after calling submit and it should solve the problem. if not, I can just take that out. thanks descalzo!

---------- Post added at 08:03 PM ---------- Previous post was at 07:53 PM ----------

as I've never used onsubmit in general, does the form submit no matter the return of onsubmit, or will it not actually submit the form if it returns false?

I mainly dislike that basing a site on ajax for content is "doing it wrong".

 

[descalzo]

<form onsubmit="return submitTrackForm();" >

The form will not submit if the function returns false.

Please note: if you submit the form via myform.submit() like you did in your code , the onsubmit handler is not called.

 

[Ixonal]

ok, that's handy dandy to know, thanks