I am trying to read someone else's code (they're on vacation), and they're using HTML 5 which I am less familiar with.
For some reason, when I click the checkboxes, they aren't selecting.
Here's the code:
<fieldset>
<legend>I would like a quote on the following products:</legend>
<div class="divider">
<h3 style="cursor: pointer;">
<input type="checkbox" value="Selective Pallet Rack – Roll Formed" name="Quote_on_Products[]">
Roll Formed Selective Pallet
</h3>
<h3 style="cursor: pointer;">
<input type="checkbox" value="Selective pallet Rack – Structural" name="Quote_on_Products[]">
Structural Selective Pallet
</h3>
<h3 style="cursor: pointer;">
<input type="checkbox" value="Drive In / Drive Thru Rack" name="Quote_on_Products[]">
Drive In / Drive Thru Rack
</h3>
<h3 style="cursor: pointer;">Other</h3>
<textarea name="Other_Products"></textarea>
</div>
<div class="divider">
<h3 style="cursor: pointer;">
<input type="checkbox" value="Push Back Rack" name="Quote_on_Products[]">
Push Back Rack
</h3>
<h3 style="cursor: pointer;">
<input type="checkbox" value="Pallet Flow Rack" name="Quote_on_Products[]">
Pallet Flow Rack
</h3>
<h3 style="cursor: pointer;">
<input type="checkbox" value="Cantilever Rack" name="Quote_on_Products[]">
Cantilever Rack
</h3>
<h3 style="cursor: pointer;">
<input type="checkbox" value="Safety Products" name="Quote_on_Products[]">
Safety Products
</h3>
</div>
</fieldset>
Could it be the h3 tag? The values containing odd characters? I'm at a loss as to why it wouldn't allow me to click a checkbox.
It's hard to debug code you didn't write and have never seen before. You might want to check any relevant javascript files that could be preventing the checkboxes from being checked. Click event handlers can be added dynamically on page load from a js file, and those handlers could be doing almost anything, including messing with your checkboxes.
Nothing wrong with the Html. I have created JSFiddle with your Html and I am able to check checkboxes. Here is the JsFiddle http://jsfiddle.net/zDwkH/
As ean5533 rightly pointed out, check if there is any javascript that is preventing these checkboxes from being checked.
If button events are not working, find out what's happening. Use either firebug, or IE (believe it or not) to find out what the current onclick event is. If it the code has return false at the end of it, this is why it is apparently 'doing nothing'.
But, also consider that it could be a rendering issue. For instance if there's a layer sitting above it with higher z-index that you can't see, the buttons may not be firing their onclick functions!
I just had this problem as well and noticed this rule in the CSS
input { -webkit-appearance:none; }
Its purpose is to prevent iOS from applying its own styling to buttons. It also prevented the tick appearing so I moved the rule into input[type=submit], button. Problem solved.
Related
I have a WordPress website with a bar at the top that I can add custom code to.
I'm trying to add an Infusionsoft email signup form to this bar and I want everything to be on the same line. Currently it's showing the field label on the first line, then the email field on the second line and then the submit button on the third line.
I can add whatever code I need to this form and this custom code box and I can also add custom CSS to the theme options themselves.
I've tried a bunch of things and some of them almost work but I can't figure this out.
Any help would be greatly appreciated.
Here's my form code:
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text">
</div>
<div>
<div> </div>
</div>
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
I moved the infusion submit div inside the infusion field div. I used display flex and flex-direction row to achieve them on the same row.
I know you're using word press and probably just copy and pasting code. If you plan to do web design work it would be well worth it to study up on HTML and CSS. It's actually not that complicated and you'll have so much control over how things look on your site!
*Edit to center content
<form accept-charset="UTF-8" action="https://ca383.infusionsoft.com/app/form/process/647e604918a3f0a0c52cd6b907f9d7d3" class="infusion-form" id="inf_form_647e604918a3f0a0c52cd6b907f9d7d3" method="POST">
<input name="inf_form_xid" type="hidden" value="647e604918a3f0a0c52cd6b907f9d7d3">
<input name="inf_form_name" type="hidden" value="Web Form submitted">
<input name="infusionsoft_version" type="hidden" value="1.70.0.80421">
<div class="infusion-field" style="display:flex; flex-direction: row; justify-content: center;">
<label for="inf_field_Email">Sign Up For Weekly Tips and Specials Offers!</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" style="margin-right: 10px;">
<div class="infusion-submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
I am using Protractor, and trying to find the content of tooltips on the page. These tooltips are generated by Angular-UI, and fading in with moveMouse over them like below. Those tooltips are similar with ng-bind, but I cannot use binding to find them. Also, I tried to getAttribute of this tooltip, but it also didn't work for me, maybe cause protractor cannot detect this element name. Do you have any idea of how to read the content of those tooltips? Many thanks.
<div class="col-md-2">
<div class="form-group">
<label class="control-label" id="label_Merchant_Number" translate>merchant_NUM</label>
<input ng-model='searchCriteria.MERCHANT_NUMBER' tooltip="{{'merNumber_tooltip'|translate}}" class='form-control input-sm' type='text' id='MERCHANT_NUMBER' name='MERCHANT_NUMBER' maxlength='16' erng-validations>
</div>
</div>
we are using getAttribute('tooltip'), works how it should be ...
element(by.model('searchCriteria.MERCHANT_NUMBER')).getAttribute('tooltip');
I'm currently implementing accessibility website to meet the Level AA Conformance
One of the things that I do not meet the correct labeling of the elements on the forms.
Currently my HTML structure is this:
<label for="edit-title">Text</label>
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
I would change the structure to this other.
<div class="views-widget">
<div class="form-item" id="edit-title-wrapper">
<label for="edit-title">Text</label>
<input type="text" id="edit-title" size="30" value="" class="form-text">
</div>
</div>
Order to have the "input" tag after the label tag.
My question is if there is any possible way to make this change easily in Drupal.
Thanks.
Best Regards.
Yo can edit template archive .tpl or create one in theme options in views module. In this template you can add and modify elements.
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.
I'm doing this HTML5 form, but when I check it on the browser (running it locally) it displays the label next to the input space next to le label and so.
heres the code:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Ingresa tu Nombre" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ingresa tu e-mail " required />
<label for="message">Mensage:</label>
<textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
<input type="submit" value="Envia tu mensage" >
</form>
should I use <br />? I already checked on other web pages and they dont use it
thank you.
As Kolink pointed out, the form displays inline as all the elements inside it are inline.
You shouldn't be using <br/> or <p> as they are not intended for that purpose (You shouldn't be using a toothbrush to clean a toilet). Better use a <ul> with <li> for each field. This makes sense as the form is nothing but a list of fields.
The mark-up would be like this:
<form>
<ul>
<li>
<label for="something">some label</label>
<input id="something" />
</li>
</ul>
</form>
Alternatively, you can go ahead and use <div> as well (but not <p>).
Well, <label> is inline, <input> is inline, <textarea> is inline...
If all your elements are inline, of course your overall form will be.
Try using the <br /> tag, or maybe <p>...</p>.
Kolink is correct. Another way to address this is to add
display: block;
to all input and label elements using CSS.