I have a submit button on a form that is quite important. I do not want users clicking it more than once. Is there a way to make it unclickable or grayed out after they click it. (maybe an on click event?). My simple code is below
<form method='POST' action='index.php'>
<input type='text' name='text' id='text'>
<input type ='submit' value='submit' name='submit'>
</form>
You can use an onclick event to grab the button and set its disabled property to true.
<input type ='submit' value='submit'
id="my_submit_button" name='submit'
onclick="document.getElementById('my_submit_button').disabled = 'disabled'">
The syntax of the disabled attribute is pretty stupid, why it's not boolean I don't know but it is what it is:
http://www.w3schools.com/tags/att_input_disabled.asp
Just add the following onClick attribute to your button:
<input type="submit" value="submit" name="submit"
onclick="
if(!submitted) {
this.value = 'Please wait...';
this.disabled = true;
submitted = true;
return true;
} else {
return false;
}
">
Related
Hello I'm trying to get my contact form to display a thank you message after the message has been sent.
I looked around but the stuff I find looks more complex than what I think i need.
I think it's something i'm missing about the event listener and how this form works.
Here's my code:
.thanks {
display: none;
}
<div class="form-wrap">
<form class="contact-form" action="https://getsimpleform.com/messages?form_api_token=aa0a1c58e87ea8816ba9ff7d7a71d0ef" method="post">
<!-- all your input fields here.... -->
<div class="name-email">
<input class="contact-field contactform-name" type='text' name='name' placeholder="Name" required/>
<input class="contact-field contact-form-email" type="email:" name="email" placeholder="e-mail" value="" required>
</div>
<textarea class="contact-field" name="message" rows="20" cols="80" placeholder="Your Message" required></textarea>
<input class="contact-field submit" type='submit' value='Send' />
</form>
</div>
<div class="thanks">
<h1>Thanks for the message!</h1>
</div>
<script>
function displayThanks() {
document.querySelector(".thanks").style.display = "block";
document.querySelector(".contact-form").style.display = "none";
}
document.querySelector(".submit").addEventListener("submit", displayThanks)
</script>
I could make it work on click, but that would mean that even if they don't send a message and just click submit they will get thank you (FOR WHAT!?)
Thanks!
M
You are mixing client side logic with server side logic. It's hard to answer your question because we don't know, what the action "action="https://getsimpleform.com/messages?form_api_token=aa0a1c58e87ea8816ba9ff7d7a71d0ef" in your form tag is doing.
It might be usefull to validate the form, before you consider to submit it. You can do this by using the click event of the submit button in combination with preventDefault like this (Just an Example, you could even use RegEx for emails and stuff):
document.querySelector(".submit").addEventListener('click', function(e) {
var userInputName = document.getElementsByName("name")[0].value,
userInputEmail = document.getElementsByName("email")[0].value,
userInputMessage = document.getElementsByName("message")[0].value;
if (userInputName.length > 0 && userInputEmail.length > 0 && userInputMessage.length > 0)
{
document.querySelector(".thanks").style.display = "block";
document.querySelector(".contact-form").style.display = "none";
}
else
{
e.preventDefault();
}
}, false);
I would recommend to use IDs instead of names though, because IDs are unique and don't require a node list or ambiguous jQuery. Than you can use something like this: userInputName = document.getElementById("name").value;
And don't forget to use the right CSS for your logic. Like:
.thanks {display: none;}
I have a list of multiple checkboxes in the form. The user can check all the checkboxes but at least one is required. Without selecting at least one, checkbox they should not be able to submit the form. how to make it in contact form 7?
I have added the script which is not working.
Here is my script
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
In this only write star(*) after checkbox element in the plugin form
[checkbox* checkbox "test 1" "test 2"]
[submit "Send"]
It is perfectly work.
On this set your code
$('#fm_submit').submit(function(e){
e.preventDefault();
var ck_box = $('input[type="checkbox"]:checked').length;
// return in firefox or chrome console
// the number of checkbox checked
console.log(ck_box);
if(ck_box < 1){
alert('Select any one box');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name = "frmTest[]" id="fm_submit">
<input type="checkbox" value="true" checked="true" >
<input type="checkbox" value="true" checked="true" >
<input type="checkbox" >
<input type="checkbox" >
<input type="submit" id="fm_submit" name="fm_submit" value="Submit">
</form>
<div class="container"></div>
Paste the code from above on the bottom of the form instead of the Additional Settings
$('#fm_submit').submit(function(e){
e.preventDefault();
var ck_box = $('input[type="checkbox"]:checked').length;
// return in firefox or chrome console the number of checkbox checked enter code here
console.log(ck_box);
if(ck_box < 1){ alert('Select any one box'); }
});
I have 2 asp pages.
Feedback_Administration_Update.asp
Feedback_Administration.asp
My HTML form:
<form ACTION="Feedback_Administration_Update.asp" METHOD=POST NAME="form">
<input type="button" value="Submit" onclick="javascript:Checkit();" name="btnSubmit">
<input type="reset" value="Reset" onclick="javascript:document.location=location">
<input type="button" value="Send Response to Requester" name="btnSubmit" onclick="javascript:Checkit();"/>
</form>
Code in Feedback_Administration_Update.asp file:
dim buttonPressed
buttonPressed=Request.Form("btnSubmit")
select case buttonPressed
case "Submit"
'update database code
Response.Redirect "feedback_administration.asp?ID=" & regEx.Replace((request.form("ID")), "''") & "&lstPages=" & Trim(Request("lstPages")) & "&view=" & Request("view")& "&strSuccess1=" &"Success"
case "Send Response to Requester"
'mail task code
End Select
I am not sure why they are not working on clicking any button.
When I click on submit the page, it should update the code, when I click on submit Send Response to Requester, it should send email.
The value of button inputs is not sent to the server. You need to use ordinary submit buttons, and to have validation code you can cancel their onclick event:
<input type="submit" value="Submit" onclick="return Checkit();" name="btnSubmit" />
<input type="submit" value="Send Response to Requester" name="btnSubmit" onclick="return Checkit();" />
To make it work, change your JavaScript function in two ways. First, don't make it submit the form and second have it return true upon successful validation and false otherwise, e.g.:
function Checkit() {
//validate your stuff..
if ([all is good]) {
//don't submit the form here, the submit button will do that.
return true;
}
//indicate that something was wrong, cancel form submission:
return false;
}
Having this in place will cause Request.Form("btnSubmit") to hold the desired value.
I need that when a button is clicked once it will show the message "Don't show". And when clicked twice returns to the original message "Show". The first thing I already did it, I only need help with the second thing, that being the second click.
function show()
{
document.myform.button.value ="Hide";//Changes message on button when clicked.
document.myform.button.innerHTML= "Hide";
}
<form>
<input type=button value= "Show" name="button" id= "idButton"
onClick="show()">
</form>
function show(button)
{
if(button.hidden)
button.hidden = false
document.myform.button.value ="Show";//Changes message on button when clicked.
document.myform.button.innerHTML= "Show";
else {
button.hidden = true
document.myform.button.value ="Hide";//Changes message on button when clicked.
document.myform.button.innerHTML= "Hide";
}
}
<form>
<input type=button value= "Show" name="button" id= "idButton"
onClick="show(this)">
</form>
I'm currently doing the following to compensate for boolean's not mapping well to radio buttons. I am stuck binding 1 and 0 to the value (instead of true and false) because of how the fields are read out of the observables. The value of Pref1/Pref2 come as true/false boolean values from the server. The key here is I want to not only data-bind the checked value of the radio button to match the true/false in the object, but I also want the boolean value of true/false to be written back into the GraduationClass object. My compensation code is not only ugly, but not scalable.
<input type="radio" value="1" name="radioGroup" data-bind="checked: Pref1" />Yes
<input type="radio" value="0" name="radioGroup" data-bind="checked: Pref2" />No
Save
function SiteSettingsViewModel() {
var self = this;
this.saveGraduationClass = function(graduationClass) {
// hack until i get a custom radio button binding
if (graduationClass.Pref1() == 1) {
graduationClass.Pref1(true);
} else {
graduationClass.Pref1(false);
}
if (graduationClass.Pref2() == 1) {
graduationClass.Pref2(true);
} else {
graduationClass.Pref2(false);
}
// ...ajax call to save graduationClass to the server
}
function GraduationClass(data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
}
Here is example from knockoutJs website, that demonstrate how to use radio buttons with
"checked" attribute:
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavor of spam:
<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>
<script type="text/javascript">
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
};
// ... then later ...
viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked
</script>
But I dont understand why you use two objects - "Pref1" and "Pref2" fro one radiobutton group "radioGroup"? In this case you just could use one object as in an example used "spamFlavor".
So, please, describe more ditaily what you want to bind: one radiobuttons group by one selected value, or something else.
Also you could use computed observables to calculate different values, please see example.