I've seen similar questions here, but none have helped. So here's what I'm trying to do.
I have a DIV pertaining to a textbox for a contact email if a user wants to receive a read receipt. I don't want that box to show unless they check the box.
Checkbox:
<p id="notifycheck" class="notify">
<input id="id_notify" type="checkbox" class="checkbox" name="notify"/>
<label for="id_notify">Enable Read Receipts</label>
</p>
<div id="notify" class="notify">
<div id="email_errors">
</div>
Textbox:
<div class="left">
<p>
<label for="email_sender">Contact email (suggest Anonmail address)</label>: <br>
<input id="email_sender" type="text" name="sender_email" size="35" rows="4" maxlength="100"/>
</p>
</div>
You could use a simple jquery function that detects changes of the input state like this:
$('#id_notify').on('change',function(){
$('.left').toggleClass('hidden');
});
});
and add in your stylesheet a class of hidden with display:none
Hope this will do
Related
I have the following form (using Forminator plugin) and I want to style it.
<form id="forminator-module-4712" class="forminator-ui forminator-custom-form forminator-custom-form-4712 forminator-design--default forminator_ajax" method="post" data-forminator-render="0" data-form-id="4712" novalidate="novalidate">
<div class="forminator-row">
<div id="email-1" class="forminator-col forminator-col-12 popup-email-field">
<div class="forminator-field"><input type="email" name="email-1" value="" placeholder="Email address" id="forminator-field-email-1" class="forminator-input forminator-email--field" data-required="true" aria-required="true">
</div>
</div>
</div>
<div class="forminator-row">
<div id="checkbox-1" class="forminator-col forminator-col-12 popup-checkbox">
<div role="group" class="forminator-field" aria-labelledby="forminator-checkbox-group-62f1212b1309c-label">
<label for="forminator-field-checkbox-1-1-62f1212b1309c" class="forminator-checkbox" title="I'd like my free gift!"><input type="checkbox" name="checkbox-1[]" value="TRUE" id="forminator-field-checkbox-1-1-62f1212b1309c" data-calculation="0" checked="checked"><span class="forminator-checkbox-box" aria-hidden="true"></span><span class="forminator-checkbox-label">I'd like my free gift!</span></label>
</div>
</div>
</div>
<input type="hidden" name="referer_url" value="">
<div class="forminator-row forminator-row-last">
<div class="forminator-col">
<div class="forminator-field">
<button class="forminator-button forminator-button-submit popup-submit">Sign Up</button>
</div>
</div>
</div>
</form>
The problem is, that I have another forminator form on the same site which I styled already.
I want to style the above form differently, but the element names (for buttons and inputs) are not unique.
Is there any way to select specific elements using CSS but in a unique way, so the styles are only applied to this specific form? How would I select email/submit button/etc on this form in a unique way?
I tried the following (but I'm missing something):
#forminator-module-4712 input.forminator-input[type="text"]
#forminator-module-4712 input#forminator-field-email-1
And other combinations.
I just needed element element selectors, this works:
#forminator-module-4712 input{}
Source: https://www.w3schools.com/cssref/sel_element_element.asp
I wanted to try and verify input before being submitted therefore I used the required attribute at the end of input, but it's not working and I've already tried some of the recommended solution like wrapping the input in form tag or trying to close the tag of input () but when i submit my form with an empty input it stills submited normally and doesn't declare a required field .
I would appreciate any help, thank you!!
this is a part of my code
<form id="form" style="background-color:honeydew ;" class="container text-center">
<div><br><h2> Contact Us </h2></div>
<div id="contact">
<div>
<label> Name</label>
<input type="text" placeholder="Your name " name="name" required/>
</div>
<br>
<div>
<label> Email</label>
<input type="email" placeholder="name#gmail.com" name="email" name="email">
</div>
<br>
<div>
<label> Message</label>
<input type="text" style="height:50px;" name="message">
</div>
<br>
<div><input type="button" value="submit" name="submit"><br></div>
<br>
</div>
<br>
</form>
and this is the javascript file linked to it :
//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
contactForm=document.getElementById('contact'),
submitButton=contactForm.children[6].children[0];
var processForm= function(){
name=document.getElementsByName('name')[0].value,
email=document.getElementsByName('email')[0].value,
sitereplyText=document.createTextNode('this is a initialiazing value'),
sitereplyEl=document.createElement('p');
mytext= 'Hey '+name+'! Thanks for your message :) We will email you back at '+email;
sitereplyText.nodeValue=mytext;
sitereplyEl.appendChild(sitereplyText);
form.replaceChild(sitereplyEl,contactForm);
}
submitButton.addEventListener('click',processForm);
So i firstly corrected the input type into submit
<input type="submit" value="submit" name="submit">
then in the javascript file i changed
submitButton.addEventListener('click',processForm);
to
submitButton.addEventListener('form.submit()',processForm);
and it seems to work :)
In a page in Wordpress (A sign-up form) I have a check box for a subscription to Mailchimp newsletter:
<div class="um-field um-field-b um-field-mailchimp" data-key="um_mailchimp_8_7">
<div class="um-field-area">
<label class="um-field-checkbox">
<input type="checkbox" name="um-mailchimp[8adb6373b1]" value="1">
<span class="um-field-checkbox-state"><i class="um-icon-android-checkbox-outline-blank"></i></span>
<span class="um-field-checkbox-option">Daily Newsletter Registration - MailChimp</span>
</label>
<div class="um-clear"></div>
</div>
</div>
The checkbox (name="um-mailchimp[8adb6373b1]") is not ticked/checked by default...
I was actually doings a bit of research and I have found out that a simple jQuery will do the magic...
My questions are:
what jQuery should I write?
where should I put the code? (front end/back end, in a plugin etc)
You do not need jQuery for this. You could add the checked attribute to the input.
$(document).ready(function() {
$("#demo").click(function(){ // Remove the click listener to automatiacally do it with when the page is loaded.
$('[name="um-mailchimp[8adb6373b1]"]').prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" name="um-mailchimp[8adb6373b1]" checked value="1">
<span>Daily Newsletter Registration - MailChimp</span>
</label>
<br>
<label>
<input type="checkbox" name="um-mailchimp[8adb6373b1]" value="1">
<span>Daily Newsletter Registration - MailChimp</span>
</label>
<button id="demo" type="button">Check the checkbox with jQuery!</button>
Edit: Added a snippet with a jQuery exemple.
I am having trouble getting the reset button to clear checkboxes on a Foundation 4 custom form. I haven't found anything specifically talking about this issue so far. I found this post (which is Foundation 5): http://foundation.zurb.com/forum/posts/3317-refresh-form-on-click-of-cancel-button , which is slightly similar to my issue.
I modified the Codepen in the zurb forum above to help troubleshoot the issue to demonstrate my problem. As you can see, the reset button does not clear the checkbox. If I remove the "custom" class, the reset works. However, the look and functionality of the form relies on the custom class, so that's not an option.
http://codepen.io/jdkoelsch/pen/jzLgB
Here is the code from Codepen (stack overflow wants me to include code if I link to codepen.io)
<form class="custom" data-abide>
<div class="row">
<div class="small-12 medium-6 columns field1">
<label for="field1">Field1 <span class="required">Required</span>
<input id="field1" maxlength="20" name="field1" type="text" required pattern="alpha" placeholder="Field1">
<small class="error">Please enter something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field2">
<label for="field2">Field2 <span class="required">Required</span>
<input id="surname" maxlength="20" name="field2" type="text" required pattern="alpha" placeholder="Field2">
<small class="error">Please something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field3">
<label for="field3">Field23 <span class="required">Required</span>
<input id="chkbox" name="field3" type="checkbox">
<small class="error">Please something valid.</small>
</label>
</div>
</div>
</form>
<div class="row">
<button class="clear">Clear</button>
</div>
Is there anything I can do (besides updating to Foundation 5) to get the reset button to work?
Looks like in your codepen example your not choosing the right selector, try "form div label". Also set the focus_on_invalid:false. Try the js below -
$(document).foundation({
abide : {
live_validate : true,
focus_on_invalid : false
}
});
$(".clear").on("click",function(){
$("form")[0].reset();
$("form div label").removeClass("error");
});
I'm trying to fill in my username and password on a certain web page and then the press the "sign-in" button, all automatically via Powershell.
The problem is that I cannot find the ID of the sign-in button in the html source code.
I have tried to use the command:
$link = $ie.Document.getElementsByTagName('A') | where-object {$_.innerText -match 'sign in'}
but this didn't worked either.
Any thoughts which PS command to use if I want to press the 'sign in' button?
The HTML code is as follows:
<div class="login">
<div class="content">
<div class="subsection-1">Sign in or create a <a id="ctl00_HeaderUserControl_LoginUserControl_hypNewAccount" href="/authentication/registerprovider.aspx?">new account</a></div>
<div class="subsection-2">
<span class="navy bold">What is your email address?</span>
<div class="indent">
<span class="bold">Email:</span>
<input id="loginEmail" class="text-box" type="text" maxlength="100" tabindex="1" />
<img class="ajax-loader" src="/content/images/research/global/transparent.gif" alt="" />
</div>
<div class="invalid-email"></div>
</div>
<div class="subsection-3">
<span class="navy bold">Do you know your password?</span>
<div>
<input id="passwordNotKnown" name="passwordSwitch" type="radio" checked="checked" />
<label for="noPassword">No, I don't know my password or I'm new .</label>
</div>
<div>
<input id="passwordKnown" name="passwordSwitch" type="radio" />
<label for="noPassword">Yes, my password is:</label>
<input id="loginPassword" class="text-box" type="password" maxlength="50" tabindex="2" />
</div>
<div class="invalid-password"></div>
<div class="error"></div>
</div>
<div class="subsection-4">
<button type="button" class="login-button greenButton" tabindex="4">Sign in</button>
Cancel
<input id="stayLoggedIn" type="checkbox" tabindex="3" />
<label for="stayLoggedIn">Stay signed in</label>
</div>
</div>
<div class="reset-password">
<div class="subsection-1">Would you like to reset your password?</div>
<div class="subsection-2">Choosing <span class="bold">yes</span> will reset your password and email a temporary password to: <span class="repeat-email"></span></div>
<div class="subsection-3">
<div class="center">
<button class="reset-password-button" type="button">Yes</button>
<button class="do-not-reset-password-button" type="button">No</button>
</div>
</div>
</div>
</div>
I came here looking for a similar answer and figured out how to get this done. Posting here for any future searchers. As noted by Szymon, getElementsByClassName returns an array, and you will need to select the item you need before the click. In my case the classname was button and I was able to click it using the following:
$submitButton = $doc.documentElement.getElementsByClassName('button') | Select-Object -First 1
$submitButton.click()
This works for me because there is only the one item with the classname button, so your results my vary if you have more than one with the same name. Just change what you grab using select-object if need be.
As #Jamie-Taylor mentioned the login button is in fact a button.
You can access it not only by the id but also by the class name using document.documentElement.getElementsByClassName. Please notice this function will return list of elements as more than one element on page can have the same class.
EDIT
I was wrong: in order to have getElementsByClassName you have to call it on document.documentElement instead of document