How to set required field in contact form 7 wordpress - wordpress

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'); }
});

Related

show thankyou message on submit

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;}

How to find the default tab index of controls?

I want to find the default tab index of the form.
I have not given but still all the control has the tab index. I want to find that default tab index through the j query. How can i find that?
Jquery and tab-index
The way tabindexing works is that it goes trough your html markup and looks for tabable elements.
So say you have this code:
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The text input will be tabbed first, and then the submit input.
Yes i know this how do it get the tabbing?
$(function() {
$firstinput = $("form").find("input")
console.log($firstinput.first()); //prints the first element thats an input.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The code above will only work if you only have input elemtns and add not trickery to the markup like hiding your elements etc.
In the code below im using the jquery UI :focusable selector.
With this you should get the first tabbable element in your form
//:focus selector from jquery UI
$.extend($.expr[':'], {
focusable: function(element) {
var nodeName = element.nodeName.toLowerCase(),
tabIndex = $.attr(element, 'tabindex');
return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' == nodeName || 'area' == nodeName ? element.href || !isNaN(tabIndex) : !isNaN(tabIndex))
// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
}
});
//actual code
$(function() {
$form = $("form");
$first = $form.find(":focusable").first();
console.log($first);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label tab-index="0">Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
You can search for 'tabindex' attribute with jquery.
var tabindexVal = $('selector').attr('tabindex');

Is it possible to change input value using CSS?

Can I change an input field value using CSS when user clicks it?
Like:
<input type=text name=username>
<input type=password name=password>
So, when the user click into this field, the text will go away and he will be able to write something.
I have tried:
input[value="Input desired username here"] {
styles...
}
Any clues?
There's no need to use css for this. You can use placeholder attribute for your input tag, it will show a default value in input boxes:
<input type="text" name="username" placeholder="Username" />
Please consider that placeholder attribute is not supported in all browsers and if you want to make it cross-browser you can write a javascript code to put a default value in your input-boxes or use this simple and quick fix:
<input type="text" name="username" onFocus="if(this.value=='Username') this.value='';" onBlur="if(this.value=='') this.value='Username';" value="Username" />
This is called a placeholder. Modern browsers will allow you to use a placeholder attribute like this:
<input type="text" name="username" placeholder="Input desired username here" />
and it will appear as you would like. Then you will need to utilize Modernizr to back port that functionality to older browsers. Something like this JavaScript will help:
$(document).ready(function () {
if(!Modernizr.input.placeholder) {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}).blur();
$('[placeholder]').parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
})

submit button grayed out

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;
}
">

how to compare radio button values with textbox values in asp.net

i have four radio buttons and one text box..i have to check the selected radio button value equals to the textbox value.. anyone plz help me
if(radioButtonList.SelectedValue == textBox1.Text.Trim())
{
//your code goes here
}
textBox does not contain a Value property.
if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue) &&
RadioButtonList1.SelectedValue.Equals(TextBox1.Text, StringComparison.Ordinal))
{
//your code goes here
}
Well.You didn't clarify where you want to do this comparison i.e. ClientSide or ServerSide.If you want it server side you can prefer earlier posted answers otherwise for client side try this one using Jquery.
<div>
<input type='radio' name='rd' value='A'>
<input type='radio' name='rd' value='B'>
<input type='radio' name='rd' value='C'>
<br />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</div>
<script type="text/javascript" >
$(document).ready(function(){
$("input:radio[name='rd']").click(function(){
if($(this).is(":checked"))
{
if($.trim($(this).val()) == $.trim($("#txtName").val()))
alert("Yeah!I got matched value.");
else
alert("Oops!Not matched.");
}
});
});
</script>
Click on this link:
DEMO

Resources