This is my website link, Here i have been trying it using jquery code to enable/disable the button but could not succeed to achieve. You could inspect element to see the code please and output is off course there
Tushar's solution is working perfectly. But I would recommend you to use formal/standard approach for validation.
Do not disable submit button. Just use required attribute for each radio button either in html like
<input id="input_5_0_1" class="form-radio" type="radio" required="required"
name="customer_appointment" value="Good" />
or using js (its short cut way) like
$(document).ready(function () {
$('form input').attr('required','required');
});
Demo on Fiddle
This way you will not be able to submit until you fill all fields, though your button is not disabled.
However if you have to use button disable approach you can follow the above answer of #Tushar
Edit This solution works only with modern browsers who support html5.
Browsers other than mentioned in this link http://html5readiness.com/ (e.g internet explorer 4,5,6) do not support HTML5
Try following code:
$(document).ready(function () {
var noOfRadio = 0;
var names = [];
$('form :radio').each(function () {
if (!names[$(this).attr('name')]) {
names[$(this).attr('name')] = 1;
noOfRadio++;
}
});
console.log(noOfRadio);
$('form').on('change', ':radio', function () {
console.log($('form').find('input[type="radio"]:checked').length);
if ($('form').find('input[type="radio"]:checked').length === noOfRadio) {
console.log('Enable');
$('#input_2').prop('disabled', false);
} else {
$('#input_2').prop('disabled', true);
}
});
});
Demo: https://jsfiddle.net/tusharj/u0mLLo3L/
Why your Submit button is disabled or render as disabled. I checked in firebug and get this. Via firebug if I remove disable="disabled", it will work means post.
<div class="form-buttons-wrapper" style="text-align:left">
<button id="input_2" class="form-submit-button form-submit-button-light_rounded" name="submit" type="submit"> Submit </button>
</div>
Related
Im working with formvalidation.io and have created a form and want to submit the form with a button that is not contained within the form element. Quick example below:
<form id="form1">
<input name="test" type="text" required />
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
Pressing the button will validate the form, but will not continue to submit the form. Including the same button inside the form element will work perfectly fine. I'm assuming this is a bug in the formvalidation.io library, but I want to post here to make sure I'm not doing something stupid first.
Any thoughts?
whoops, thought i already answered this. i had it confirmed on the formvalidation.io forums that this is a work in progress with their library so this is the workaround i came up with.
// select all buttons which have the form attribute
$('[form=' + $(this).attr('id') + ']').click(function (e) {
// prevent default functionality
e.preventDefault();
// execute form validation if necessary
if (form.data('formValidation') != null) {
$('#' + $(this).attr('form')).data('formValidation').resetForm();
$('#' + $(this).attr('form')).data('formValidation').validate();
}
// submit your form however you normally submit it
form.ajaxSubmit(options);
});
Whats the best way to disable a HTML Form Submit button when it is clicked and also change the text value on it?
Someone recommended a Javascript onclick event, but I would instead recommend using onsubmit. This will be on the form itself rather than the button, and this encompasses the real event that you want to disable the button with (submission), as well as other events that could possibly trigger submit.
document.getElementById('FormId').addEventListener('submit',function(){
var button = document.getElementById('buttonId');
button.innerText = 'Something new!';
button.disabled = true;
});
Edited my answer to include the extra changes you were looking for (text of button, disabled as well).
Edit again: lets be super cross browser!
var form = document.getElementById('FormId');
function submitForm(){
var button = document.getElementById('ButtonId');
button.innerText = 'Something new!';
button.disabled = true;
}
if(form.addEventListener){
form.addEventListener('submit',submitForm,false);
} else {
form.attachEvent('onsubmit',submitForm);
}
This covers versions of IE prior to IE9. Obviously if you have more than one form you would try to make this a little more reusable, but this is the general gist.
The best way to achieve this is via JQuery.
Let say your form submit button has an id="submitButton". So add this script to you page head and refer the place where you put your downloaded JQuery and JQuery-UI script.
<script type="text/javascript" src="Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>
<script>
function submitButton_OnClick() {
$("#submitButton").text("New Text");
$("#submitButton").attr("disabled", "disabled");
}
$(document).ready(function() {
$("#submitButton").click(submitButton_OnClick);
});
</script>
and this to your html
<button id="submitButton">test</button>
Check it work!
You can add an onclick event and implement a javascript function to do what you want. You can have a look here to see how to disable a button from javascript. Also take a look here for an example how to change the text of the button using javascript.
You have to use JavaScript and set on click event for example it should be:
HTML:
input type="button" value="value" id="1" onClick="OnClick(this.id)"/>
JavaScript:
function OnClick(id)
{
//some stuff...
}
Also you can use jQuery and catch on submit, for example:
$("form").on('submit',function(event)
{
event.preventDefault();
//some stuff...
}
You can use to onclick attribute to set the disabled attribute. Note that I don't cover how to reenable the button when form submission is complete.
<button type="submit" onclick="this.setAttribute('disabled', 'disabled');">Submit</button>
See the live example here at this fiddle:
http://jsfiddle.net/yinkadet/DPJGw/
I hope this helps
Here is my example of providing this functionality using Ruby on Rails and jQuery - it is an implementation example of the jQuery answer which i found very useful! (so there, haters):
<div class="col s12">
<div class="actions">
<%= f.submit nil, class: "waves-effect waves-light btn green darken-3", id: "gsb" %>
<script>
function submitButton_OnClick() {
$("#gsb").val("***CREATING***");
$("#gsb").attr("disabled", "disabled");
$("#new_group").submit();
}
$(document).ready(function() {
$("#gsb").click(submitButton_OnClick);
});
</script>
</div>
</div>
I am using the dropbox chooser (https://www.dropbox.com/developers/dropins/chooser/js) as part of a form. Once the user has selected a file, I would like to display that file name next to the chooser button.
It would also be nice to include a 'remove' link to clear the selection.
i assume that this will be done using javascript/jquery. Any help would be greatly appreciated.
EDIT: An earlier answer used e.files[0].link.split('/').pop(), but there's a field for this already! It's called name. Updated below.
The file name is one of the things returned, so you can just do this:
var url = e.files[0].link;
var name = e.files[0].name;
As to how to display it on the page, I would suggest adding a span somewhere and setting its text. Try this code, which does that and a couple other nice things (like handle the submit button's disabled state and resetting the Chooser button to its "unused" state):
<form>
<input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" style="visibility: hidden;"/>
<p id="chosen" style="display:none">Chosen file: <span id="filename"></span> (<a id="remove" href="#">remove</a>)</p>
<input type="submit" id="submit" disabled />
</form>
<script>
$(function () {
$('#chooser').on('DbxChooserSuccess', function (e) {
var url = e.originalEvent.files[0].link;
var filename = e.originalEvent.files[0].name;
$('#chosen').show();
$('#filename').text(filename);
$('#submit').prop('disabled', false);
});
$('#remove').click(function (e) {
e.preventDefault();
$('#chosen').hide();
$('.dropbox-chooser').removeClass('dropbox-chooser-used');
$('#submit').prop('disabled', true);
});
});
</script>
EDIT
I should point out that the dropbox-chooser-used class is just something I noticed. Since it's not documented, that may change in a future version of the library. The rest should be fine.
I got this code here:
It works fine as far as disabling and replacing the Submit button goes, but it will not submit the form. My form uses the 'get' method and submits data to another page.
<script type="text/JavaScript">
$('.button').click(function() {
$('.button').remove();
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('.form').submit();
});
</script>
I have tried most things, including changing .form to the id of my form, still no joy, any ideas would be helpful.
HTML code
<form action="liftingConfirm.asp" method="get" id="frmArchiveConfirm">
<input name="con_id" type="hidden" id="con_id" value="<%=request.querystring("con_id")%>" />
<input name="sub_id" type="hidden" id="sub_id" value="1" />
<input name="liftingDate" type="hidden" id="liftingDate" value="<%=Session("currentUSDate")%>" />
<div class="holder"><input name="btnConfirm" type="submit" class="button" id="btnConfirm" value="Start New Lifting Gear Examination" /></div>
You're using the wrong selector, the .form is looking for a <form> with a class of form. Furthermore you should be using the on() syntax:
$('form').on('click', '.button', function() {
$('.holder').append("DONT DOUBLE CLICK ANYTHING IN A BROWSER");
$('#frmArchiveConfirm').submit();
$('.button').remove();
});
For your jQuery code to work you should include the frmArchiveConfirm to your jQuery code as below.
Replace $('.form').submit(); with $('#frmArchiveConfirm').submit();
else if you only having one form in the page just use $('form').submit();
When you come across bug like this don't forget to make use of the firebug or the browser development tools. You can easily figure out the bug and what's wrong in your code.
I've got a form on a page where the user types something in and then a result is returned and displayed on the page. Is it possible for me to have a button that will both, clear the search results and the form simultaneously?
I know that you can use the <input type="reset" value="Reset"/> button on the form to reset the form and also use the following code, to reload the page.
<input type="button" value="Clear Results" onClick="window.location.reload()">
Is it possible to have the button do both things i.e. clear the search results and reset the form? Can it be done using JavaScript, if so how?
Thanks
If you want the functionality of both of the snippets you posted, you can simply combine them.
<input type="reset" value="Reset" onClick="window.location.reload()">
I'm a fan of #MikeyHogarth's suggestion since it's called regardless of how the page is refreshed. This is one of those rare times that I find straight javascript to be simpler than jquery so I just wanted to add the code for that.
$(document).ready(function () {
resetForms();
});
function resetForms() {
document.forms['myFormName'].reset();
}
This uses the form name attribute, and if you'd prefer using the form id attribute use this instead:
document.getElementById('myFormId').reset();
using JQuery, do something like this on the page;
$(document).ready(function () {
resetForms();
});
function resetForms() {
for (i = 0; i < document.forms.length; i++) {
document.forms[i].reset();
}
}
and then just use your second input, forms will auto refresh when the page loads back up.
you can simply redirect page to current location with this code:
$('[data-command="reset"]').click(function () {
window.location.href = window.location.href;
}
<input type="button" value="Clear Results" data-command="reset">