I have a form with three radio button options, and a "submit" button (no checkboxes, no text fields). Yet if a user clicks the submit button, without choosing an option, the form still submits it, picking the first option anyway. What's the best method to prevent a form from being submitted if the user DOES NOT check any of the radio buttons? (My CMS is ExpressionEngine, and this form is generated using the CartThrob extension, just FYI. But it's not a CT issue as far as I can tell.)
With jQuery you can return false if there is no value for that input.
$('form').submit( function() {
if ( !$('input:radio[name="myRadio"]').val() ) {
alert('Fix this!');
return false;
}
});
You may need to change ! to =='', but that's the idea.
Related
I am using <q-modal>(Quasar Framework) for a form. On clicking Add button a form will pop over. In this, I am validating each form tags, after clicking submit button. To close the modal, I am using #click="$refs.maximizedModal.close()" for submit button.
Everything works fine. Now I need to retain modal if the validation is not returning true or if validation satisfies then the modal need to be closed.
Is there any method to do conditional submit in Vue js?
You should make a custom function for the submit of the form and use it, something like this :
....
methods{
checkForm(e){
if(VALIDATION_IS_TRUE){
//Validation has passed, we submit the form OR close the modal
$refs.maximizedModal.close(); // Maybe this.$refs.maximizedModal.close()
e.target.submit();
}else{
//The form is not validated, do something to inform the user
}
}
}
and instead of using the #click for the submit button, add this to the form element :
<form #submit.prevent='checkForm($event)'>
Hope this helps!
I have one search form with search button and some field, when I put value in form field and click on search button then come back on form by clicking on link(modify search form) then form value does not reset...Please check it here(http://dev.viawebgroup.com/search/)
Thanks
Try this:
<script>
function test(){
var input = document.getElementById('search');
input.value = '';
};
</script>
Add onload to the body:
<button onclick="test()">Clear</button>
Add id to input field:
<input type="text" id="search">
Fatal flaw rests form befor data is sent
The simplest way I found is
onsubmit="this.reset()"
Just put this in the form tag and all's well, simple yet efective.
I someone wanted a button excluesivly for form reset I would use onclick and write the reset in a function like this.
function clform()
{
documentgetElementById('myform').reset();
}
The first is tried and true, the second I just wrote but should work.
The function works well used in a onbeforeunload event in the body.
I have been working on this problem my self because the page I wrote is dynamically updated and was keeping form data when back button of browser was used. I also used PHP to reload the page after submission and onfocus to reload the page when form is selected so input is on a fresh page and not the dynamically updated page.
I have a dynamic form that is to be displayed using an iPad.
This form has a couple of radio buttons and some text fields and one submit button.
In an iPad the virtual keyboard GO button is supposed to act ad the enter key, causing the first submit button in the form to be clicked and the form to be posted.
To avoid excessive involuntary postings before the form is complete we added an extra submit button higher up in the form, absolutely positioned outside of the visible area with onclick="return false;".
This hijacks the enter keystroke preventing accidental posting in every browser except Safari Mobile.
On an iPad we even tested Opera mobile and it works as expected.
But Safari Mobile apparently ignores the return false since event clicking the button causes a post that no other browser does, not even safari on PC.
My questions are
1: Why is safari mobile ignoring "return false" on submit, is there an other mechanism at play here?
2: How can I stop Safari mobile from posting the form when clicking GO?
I have made numerous searches on Google and Stackoverflow and found many examples but all requires a lot of javascript and event binding and the dynamic nature of the form along with user generated content makes this error prone and pretty complex since almost all required binding events to every textbox and textarea.
Any solution that works is good but the simpler the better, especially if it does not require to much customization of the form or events that might conflict with autocomplete or validation events.
Example testpage: http://lab.dnet.nu/ipad.php
I found a solution to my problem.
The base to the problem is that Safari mobile ignores onsubmit="return false" on buttons, it only works on forms.
Setting onsubmit="return false;" on the form, making a normal button (not submit) and setting onclick="form.submit()".
Ex.
<form method="post" onsubmit="return false;">
... //Other fields here
<input type="button" value="Send" onclick="form.submit();" />
</form>
The Go button does not trigger a normal button, only submit buttons.
Since the form has onsubmit="return false;" it will not post.
The button on the other hand, when clicked triggers the onclick="form.submit();" which overrides the onsubmit on the form.
This solution seems to work in any browser reliably.
Better answer is this. The other does not allow you to use a regular submit button. This attacks just the go button.
$("body").keydown(function(){
if(event.keyCode == 13) {
document.activeElement.blur();
return false;
}
});
Seems very unconventional, as this basically breaks general UX and expected device behaviour.
However, I think it also important to mention that this solution relies on the actual <form> DOM element. Meaning the onclick handler on the button should not use a jQuery object to submit but the DOM element.
jQuery object. Does not work:
<input type="button" value="Send" onclick="$("#myform").submit();" />
DOM element. Works:
<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />
Without jQuery. Works:
<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />
Also, here is a similar approach, using jQuery to intercept keyboard submits and only allowing clicks on a button. Credit goes to #levi: http://jsfiddle.net/RsKc7/
Here's an additional answer, in case anyone winds up chasing this issue like I did.
Provided you're using jQuery, the following snippet should prevent the "Go" button from triggering a form submission (at least it does on Nexus 7's Chrome on Android 4.2.2; YMMMV). Also, note that if you want to allow the "Enter" key to work on any of the input types below, this will prevent that from happening.
$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',
function (e) {
// Android maps the "Go" button to the Enter key => key code 13
if (e.keyCode == 13) {
return false;
}
});
Edit: It seems this bug breaks keyup/keydown in Chrome in Android > 4.3, in which case this fix will no longer work in some circumstances.
Cannot comment so i have to put a new message.
#David solution works fine if we are using an "input type button"; instead, if we are using a button tag doesn't seems to be solved by David fix.
(env: cordova, ipad mini 2)
Thanks David!
Go buttons and return buttons on mobile touch screen keyboards trigger the onclick event of your first submit button. To determine if its the user or script clicking the button, you can use the following:
$('#mybuttonId').onclick(e) {
if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) {
//This is the user clicking on the button.
} else {
//This is not the user, but a script , do nothing.
return false;
}
}
I'm a beginner when it comes to zend framework.
I created a form with a submit button, using zend_form, and zend_form_element_submit. Upon clicking submit, the code performs data manipulation based on the input. If no input is keyed in, nothing happens.
When I click the submit button, it reloads my web page even though there are no changes.
Any way I can prevent that page load? Could I use a zend_form_element_button that would trigger an event? how would I capture it?
Any help will be mostly appreciated!
Thank you.
A submit button will always cause the form to submit which generally results in a page being reloaded whether or not the data in any of the form elements are "correct" or not.
Using Zend Framework, you could add a JavaScript onsubmit event to your form that could inspect the form elements and decide if the form should be submitted or not. Or you could use Ajax to submit the form which wouldn't result in the page being reloaded.
Here is an example of using onsubmit. You would create your form on the controller, assign it to the view, and then in your view, add the onsubmit attribute and relevant code.
view.phtml
<?php
$this->form->setAttrib('onsubmit', 'return checkForm()');
echo $this->form;
?>
<script type="text/javascript">
function checkForm()
{
if (form_passes_validation) {
return true; // form will submit
} else {
return false; // form will NOT submit (if javascript is enabled)
}
}
</script>
You will have to come up with the logic for form_passes_validation, but if onsubmit returns false, then the form will not be sent.
Keep in mind, PHP is all server side. You can't do any PHP processing to determine if the form should send, this all has to be client side, or you will have to live with your form reloading the page even if no data is entered.
I am designing a checkbox for a for and I absolutely cannot have the checkbox to toggle when the user clicks on its label, as this label contains a link to open a small infobox where the user gets to know what he or she is accepting by selecting the checkbox.
How can I disable checkbox toggle when clicking on its label?
The code looks simply like this (this element is inside a FormPanel items list:)
{
xtype:'checkbox',
id: 'privacyCheck',
fieldLabel: 'I have read, understood and accepted the privacy policy of ABCDE'
}
Instead of using the boxLabel property or field label on the checkbox, create a separate label object next to the checkbox. This should make it easier to manipulate your handler for the label. Otherwise, you will need to dig through the appropriate DOM element for the boxLabel (not pretty) to get at it.
I know, this topic is rather old, but I found it, searching for a solution to the exact same problem. So I'd like to share.
I needed to modify the browsers behaviour to mimick the behaviour of a legacy site, while making said site "accessible". (The for-attribute of the label tag is needed and a label without a for-attribute can not be used.)
I don't know about ExtJS, but since the legacy site uses jQuery in the frontend, I solved the problem this way:
//[...]
$(document).ready(function () {
$('.donotToogleCheckbox').click(function (event) {
event.preventDefault();
// do other stuff like displaying a dialog or something
})
});
//[...]
<label class='donotToogleCheckbox' for='myCheckbox'>DaLabel</label>
<input id='myCheckbox' name='myCheckbox' type="checkbox">
//[...]