security: form submission vs AJAX call SOLVED with thanks in the final post

[niche]

Is it safer to send data, that starts as a value in an element, through a form submission, or an AJAX call, or does it matter if it's validated in both cases? By safer, I mean subject to hacking/re-writing? I've been told that it's easy to hack/re-write a value with firebug.

[Ingolme]

Whether you use AJAX or not, the client is capable of sending anything they want to the server. There's no security difference between AJAX and ordinary form submission.There is an accessibility difference: In the case that you're using AJAX, be sure to fall back to a normal form in the case that Javascript is disabled.

[niche]

be sure to fall back to a normal form in the case that Javascript is disabled.

How do you code that test?

[Ingolme]

Have an ordinary HTML form, then you use Javascript to prevent it from submitting and handle the inputs.

[birbal]

you can bound a submission function which will submit the form on onsubmit event with ajax and can make that function return false or also you can use event.preventDefault(). so that when js enabled it will send the submission but will prvent default action. when js disabled the function wont execute and it will sumbit normaly.

[birbal]

you can bound a submission function which will submit the form on onsubmit event with ajax and can make that function return false or also you can use event.preventDefault(). so that when js enabled it will send the submission but will prvent default action. when js disabled the function wont execute and it will sumbit normaly.

[niche]

I was in the middle of asking for more help when it occurred to me that simply adding a onsubmit for a fictitious function would simulate a user with Javascript is disabled. Right?

echo '<form onsubmit = "addBop()" action="cart.php" method="post" style="float:left;">';

[Ingolme]

The onsubmit attribute is ignored if Javascript is disabled. If you want to test your site with Javascript disabled, go to your browser options and turn Javascript off. I know where to find it in Firefox, I haven't checked other browsers.

[niche]

I added "onsubmit" to my form tag and left JS enabled...

echo '<form  action="cart.php" method="post" style="float:left;" onsubmit = "addBop()">';

... and the form executed the php instead of this JS function:

function addBop() {  alert("Here");}

Shouldn't this function have executed instead?

[Ingolme]

You have to return false to disable the form submission: onsubmit="doSomething(); return false;"

[niche]

I've moved my onsubmit from my form tag to my button tag:

echo '<button class="button3" type="submit" style="background:gold;" onsubmit = "addBop().disabled = 1;" >Delete from BOP Cart</button>';

In post 6, birbal suggests that I need to use jQuery, but I don't know it. Isn't there a way to do this with JS? If so, I'm not able to find it. What should I be looking at?

[justsomeguy]

Buttons don't have an onsubmit handler, only forms have a submit event. A button can have a click event though. You don't need jQuery for anything, it makes certain things easier but it's not necessary to do anything. It's written in Javascript, so anything you can do with jQuery you can write yourself. What Ingolme suggested will stop the form submit and run whatever function you want (not necessarily in that order): echo '<form action="cart.php" method="post" style="float:left;" onsubmit = "addBop(); return false;">';

[birbal]

birbal suggests that I need to use jQuery, but I don't know it. Isn't there a way to do this with JS? If so, I'm not able to find it.What should I be looking at?

it is not jquery function it is javascript you can find it here https://developer.mozilla.org/en/DOM/event.preventDefault it is part of DOM level 3 event handling

[niche]

Ingolme and justsomeguy, Viola! Birbal, thanks for the ref, but I'm not sure how event.preventDefault() should be used in this case?

[thescientist]

Ingolme and justsomeguy, Viola! Birbal, thanks for the ref, but I'm not sure how event.preventDefault() should be used in this case?

the whole point of returning false to keep the form from submitting automatically (in favor of AJAX doing it instead). It is in fact preventing the default action of the form element from happening (the submit event). JS has a method of the event object that can do that. event.preventDefault() (i.e. prevent the default behavior from happening)

[niche]

OK, but how's it used? The examples, in birbal's ref, showed it in a function, but that won't do when JS is disabled. There has to be a way to use event.preventDefault() in the tag for it to be useful with the JS disabled. Right? If so, how can it be used in this case?

[ShadowMage]

OK, but how's it used? The examples, in birbal's ref, showed it in a function, but that won't do when JS is disabled. There has to be a way to use event.preventDefault() in the tag for it to be useful with the JS disabled. Right? If so, should it be used in this case?

preventDefault would be used instead of returning false. It is a way to prevent the form from submitting so that you can use AJAX to submit the form rather than let the form submit itself the normal way. The whole point of all of this is to maximize usability for as many users as possible. If a user has JS enabled, they will use the AJAX interface and have their forms submitted and pages updated without refreshing the page, but if a user has JS disabled, they will have to submit the form normally (and refresh the page), but the form will still function.

[niche]

I understand.  I just tried this again...

onsubmit = "addBop(); event.preventDefault();"

...and it worked this time.  I was dragging this topic out because I was under a false impression.  I must have  misused event.preventDefault(); originally.Just to be clear.

onsubmit = "addBop(); event.preventDefault();"

Is the alternative to:

onsubmit = "addBop();  return false;"

Correct?

[birbal]

return false and event.preventDefault() are not actually same. when you use return false; it also stops the event from bubbling up. there is another function event.stopPropogation() which is used specificaly to stop event bubbling. in other word return false is same as using stopPropogation() and preventDefault() together. in depth information about js event could be found herehttps://developer.mo...rg/en/DOM/event

[justsomeguy]

I doubt that's going to work in all browsers, not all browsers have standardized on "event" as the name of the event object. All browsers will correctly stop the form submission if you return false. And just to be clear, if Javascript is disabled the entire onsubmit code will not return, regardless of whether you are using preventDefault, returning false, etc. If Javascript is disabled the submit event does not occur and the form submits as if there were no onsubmit handler.

[justsomeguy]

In case you haven't read it yet, there's a good writeup of events here: http://www.quirksmode.org/js/introevents.html

[niche]

Thanks for your last posts birbal and justsomeguy. I never heard of bubbling before or experienced it until now.

onsubmit = "addBop(); event.stopPropogation();event.preventDefault();

produced bubbling (JS executed & form submited with JS enabled) and...

onsubmit = "addBop(); event.preventDefault();event.stopPropogation(); "

Only allowed the JS to execute. I reduced by two the things I didn't know, that I didn't know in this topic. Thanks again for everyone's help.

[dsonesuk]

Just to point out that as usual MS being MS decided to use a different method to stop bubbling 'event.cancelBubble = true', http://www.quirksmode.org/js/events_order.html, so if you wish for it work in IE browsers you will have to use code that will apply the specific code depending on what the browser supports.

onsubmit = "addBop(); if (!event) var event = window.event;event.cancelBubble = true;if (event.stopPropagation) event.stopPropagation();"

obviously it would be better/cleaner to use a function to apply this

function stopPropBubble(e){if (!e) var e = window.event;e.cancelBubble = true;if (e.stopPropagation) e.stopPropagation();}

onsubmit = "addBop(); stopPropBubble(event);"

[niche]

Per usual, the best help for coders is found here. Thanks dsonesuk!