i have a form in html with two submit buttons either one is enabled. if user is filling the form submit is enabled and the other button is diasbled.
when user clicks submit button other button gets enabled and displays all the field values with read only .when the 2nd button is clicked values are enterd in databse, using jquery or javascript
is it possible
$('input[type="text"]').each(function(){
$(this).attr('readonly','readonly');
});
If I read your question correctly, the first button does not actually submit the form?
$("#firstbutton").click(function() {
$("#myForm input").attr("readonly", "readonly"); //this makes the input fields readonly
$("#secondbutton").attr("disabled","disabled"; //this enable the second button
$(this).removeAttr('disabled'); //this disables the #firstbutton
}
Make sure that:
On page load, the second button is already disabled.
If you have dropdownlists in your form, you'll have to set those readonly as well, as they are not <input> but <select> items.
the firstbutton should not be of type="submit", it should either be of type="button" or be a <button> tag instead.
Your secondbutton can be a regular submit button, nothing fancy required. As long as your form posts to the correct actionlink, the form will be submitted fine.
Never use disabled attribute on your input fields. If you do, the form submit will ignore these fields and not post them as intended. You're already doing it right by using readonly.
$(document).ready(function(){
$('#myForm').submit(function(e){
e.preventDefault();
$myForm = $(this);
$myForm.find('input[type=submit]').attr('disabled','disabled');
$myForm.find('input#other-button').attr('enabled','enabled');
//do a $.post request
$.post('/path/to/my-file.php',
$myForm.serialize(),
function(data){
// make something after the post is complete
$myForm.find("input[type=text]").attr('readonly','readonly');
},
'json');
});
});
Related
In my Drupal 7 site I have some checkout pages where I need to check if a field value is changed or not after a form is submitted. If it is not changed I want to show a message to remind the customer to fill in the field. In some few cases it might happen that the field should remain empty or unchanged, so I need to take that into account too.
This is what I got so far:
function extracheck(){
var checkfield = document.querySelector("#edit-continue") !== null;
if (checkfield){
document.getElementById("edit-continue").addEventListener("click", function(event) {
var alertfield = document.getElementById('edit-customer-profile-kompl-info-field-ert-ordernummer-und-0-value');
if (alertfield.value == alertfield.defaultValue) {
event.preventDefault();
$('#edit-customer-profile-kompl-info-field-ert-ordernummer-und-0-value').css("background-color", "#FFFF33");
$('#output-box').addClass('output-box-style');
document.getElementById("output-box").innerHTML = "The highlighted field is empty. Do you really want to continue?<br><br><div class='button tiny' id='btn1'>YES, continue</div><div class='button tiny' id='btn2'>NO, I want to edit the field</div>";
btn1.addEventListener("click", yesfunction, false);
btn2.addEventListener("click", nofunction, false);
return false;
}
}, false);
}
}
extracheck();
function yesfunction(){
document.getElementById('commerce-checkout-form-checkout').submit();
}
function nofunction(){
$('#output-box').css("display","none");
// here I need to "undo" the preventDefault set above
}
First I need to check if this specific submit button exists on the page (with the id #edit-continue).
Then by using value and defaultValue I compare the initial state of the field's value with the current state. If the field is unchanged i bind a preventDefault action to the submit button, so the form isn't submitted. I then highlight the field and show a DIV box with the question "The highlighted field is empty. Do you really want to continue?" and 2 buttons: "Yes, I want to continue" and "No, I want to edit the field".
I then bind 2 eventlisteners to the buttons and assign them to the external functions nofunction() and yesfunction(). If the customer clicks yes, the form is submitted. If he clicks no, I hide the message box. I could have just reloaded the page, but then all values filled in in all other fields would be cleared.
So I need to just hide the box and then undo or reset the preventDefault action on the submit button, so the form can be submitted the normal way.
I am banging my head and have tried all I can think of. Does anyone have an idea on how I can let the form be submitted normallly after hiding the message box? I have tried to use removeEventListener and to use a function that returns true on the submit button element.
Everything works fine otherwise, if the field is unchanged the box opens, if the field is changed the form is submitted normally. If the field is unchanged and the user decides to continue all the same and clicks Yes, the form is also submitted.
I have a form that I'm using whereby I would like to require a checkbox ('terms') to be checked in order to toggle the Submit button ('checkout-submit') on. I have it working just fine once you check the checkbox and then uncheck, etc.
But, by default the Submit button is showing. I'm unsure in my code how to ensure that the Submit button is toggled off when the page loads.
$('#terms').click(function() {
$("#checkout-submit").toggle(this.checked);
});
Another approach is to put the boolean attribute required on the checkbox, like so
<input type="checkbox" required>
Then if the user attempts to submit without checking the box, a native html5 dialog (which looks quite nice) appears, saying you have to check the box to proceed. The user can hit submit as many times as they like, but nothing will happen until the checkbox is checked. Note that all of this has to be inside a form element.
You can do something like this:
$('#your_checkbox').click(function() {
if ($(this).is(':checked')) {
$('#your_button').removeAttr('disabled');
} else {
$('#your_button').attr('disabled', 'disabled');
}
});
//set it to disabled at load
$('#your_button').attr('disabled', 'disabled');
Fiddle http://jsfiddle.net/t70cc43o/1/
I am working on a form with multiple fields and of course, a submit button.
How do I cancel the form submission if some fields are empty?
I tried putting a validation of javascript, input type="submit" onclick="check()" on the submit button.
But what I actually want is that, the page won't load so that, all other information in the text fields won't go away.
Like, what if the form has 100 fields and the user forgot to input one field and click the submit, it will show him an error message and all other fields will be cleared so he has to type it again.
I'm trying to prevent that.
I have multiple options to create this effect but I am currently trying to find a way on doing this.
Any other ways would be appreciated (like disabling the button when all mandatory fields are not filled, then enabling it at when everything is complete)
if the condition will be false click(event) returns false and nothing will happend
function check(){
if(validate === false)
return false;
}
Enjoy :)
You can simply return false from inside your check function to prevent the form from submitting.
I have two submit buttons namely "Approve" and "Reject". Both of them go to one controller file so I set the controller file on the action tag of the form.
What I want is that when I click Approve, it sets the value of the hidden field named 'Decision' with 'Approved' and when I click 'Reject', the value of the hidden field will be 'Rejected' then the form will continue to submit to the designated controller.
However, the form continues to the controller but the decision field is empty.
Also, when I tried to put an 'alert' on the javascript function, it is not showing everytime I click the submit buttons eventhough I used the onClick tag.
Can someone suggest a working code for this? Thank you. :)
So I believe form actions have precedence over javascript and other stuff like animations.
To answer your question: you can make the submit buttons just normal buttons like so:
<input id='accept-button' type='button' name='accept' value='Accept' />
and add an event listener to it that changes the value of the hidden field when clicked then submits the form:
document.getElementById('accept-button').addEventListener("click", function () {
var hiddenid = document.getElementById('hidden');
var formid = document.getElementById('form-id');
hiddenid.value = 'Accepted';
formid.submit();
});
After a quick search I found a better solution from this question's accepted answer. It uses jquery though.
I have an html form and within the form I have a <button> element. I am using jquery to redirect the page upon clicking the button (essentially I wanted to nest form elements but since its not valid xhtml I used a javascript workaround).
Furthermore, clicking the button grabs text from an input field, appends it to the query string then redirects the page (note that both the input field and the button are inside of the html form).
Now for what I want to do: I also want to have the same functionality when the user hits the 'enter' key from within the previously mentioned input field (i.e. same functionality as if the <button> was pressed. I have already written code that binds to the enter key (when I press enter in the input field I can get an alert to pop up). The problem is that since this input field is within <form> tags, I cannot seem to override the default action which is: upon pressing enter trigger the submit button. Is it even possible to override this and have the pressing enter event redirect the page to something other than whatever <form action is set to? Thanks.
Try
$('form').submit(function () {
return false;
});
This would really go against accessibility, but I think you could cancel the default action which is on the 'submit' event, with:
$('form#foo').submit(function(e) { e.preventDefault(); });
If I'm understanding correctly... or program that function to be dynamic and have it submit or not submit depending on a factor/flag.