I have couple linked dropdowns and want to prevent form submit on change event if linked dropdown is empty.
<form id="foo">
<select name="first" on="change:AMP.setState({settings: {first: event.value}}),foo.submit" >
...
</select>
<select name="second" on="change:AMP.setState({settings: {second: event.value}}),foo.submit" >
<option value=0> Please select </option>
...
</select>
</form>
Can i check state and then submit form if the value is appropriate? Something like:
<select name="first" on="change:AMP.setState({settings: {first: event.value}}),settings.second ? foo.submit : nothing to do" >
for the first dropdown to avoid form submit when I select new value, because second not welected yet.
Tried make it with validation, but it not work with dropdown, input works fine.
<input type="text"
id="show-first-on-submit-name"
name="name"
placeholder="Digit..."
required
on="change:AMP.setState({settings: {testing: event.value}}),requirements-form.submit"
pattern="^([1-9][0-9]*)$">
<span visible-when-invalid="valueMissing"
validation-for="show-first-on-submit-name"></span>
<span visible-when-invalid="patternMismatch"
validation-for="show-first-on-submit-name">
Please enter not '0'
</span>
<select name="purpose"
id="purpose"
pattern="^([1-9][0-9]*)$"
required
on="change:AMP.setState({settings: {purpose: event.value}}),requirements-form.submit">
<option value="0">Please select</option>
<option value="1">One</option>
</select>
<span visible-when-invalid="valueMissing"
validation-for="purpose">missing</span>
<span visible-when-invalid="patternMismatch"
validation-for="purpose">wrong</span>
Validating form by converting input status into an amp-state object and checking them when change event occurs is a little circuitous.
In my opinion it would be more easier to use HTML5 Form validation API (AMP use it as well) to handle input validation works. All you need to do is add required attribute to your <select> element and remove onChange validation logic.
Here is a simple example:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<form target="_blank" action="/">
<select name="tier1" required>
<option value="">Please select</option>
<option value="opt1">tier1 - opt1</option>
<option value="opt2">tier1 - opt2</option>
</select>
<select name="tier2" required>
<option value="">Please select</option>
<option value="opt1">tier2 - opt1</option>
<option value="opt2">tier2 - opt2</option>
</select>
<input type="submit" value="submit" />
</form>
</body>
</html>
Example screenshot:
Related
I'm creating an Object in GET method and initialize it with nulls. Then I set some values and send it to the POST method, but after this process all of values that I set earlier are nulls. How could I repair it? I've tried to use hidden fields, but it didn't help.
HTML code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="#{/styles.css}" />
</head>
<body>
<form method="POST" th:action="#{sendorder}" th:object="${details}">
<label for="name">Name: </label>
<input type="text" th:field="*{name}"/>
<br/>
<input type="hidden" th:field="*{order}" id="order"><label for="surname">Surname: </label>
<input type="text" th:field="*{surname}"/>
<br/><label for="room">Room: </label>
<input type="text" th:field="*{room}"/>
<br/>
<br/>
<h2>Please, choose your company:</h2>
<select th:field="*{company}">
<option th:each="i : ${companies}" th:value="${i.id}" th:text="${i.name}">
</option>
</select>
</div>
</div>
<input type="submit" value="Submit Order"/>
</form>
</body>
</html>
so i have a web page displaying a Kendo MultiSelectFor tag. all works fine.
The user's data is unfortunately very long so the drop-down selection items get wrapped. the users do not like this.
Is there a way to override the size of the drop down list so that is wider than the selected items listbox (which sits above)?
The html snippet below is what I have - (but won't run pretty)
So far I have been trying to override some styles using something like this:
#accommodationsMultiselect .k-valid {
left:-100px; width: 600px
}
i have not been able to affect any change so far. thanks in advance
JB
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<div class="form-group">
<label for="AccommodationIDs">Accommodations</label>
<div>
<div class="k-widget k-multiselect k-header" deselectable="on" title="" style="">
<div class="k-multiselect-wrap k-floatwrap" deselectable="on">
<ul role="listbox" deselectable="on" class="k-reset" id="accommodationsMultiselect_taglist">
<li class="k-button" deselectable="on">
<div>
<span deselectable="on">
<span class="k-state-default">Calculator - provided by family</span>
</span>
</div>
</li>
<li class="k-button" deselectable="on">
<div>
<span deselectable="on">
<span class="k-state-default">Computer for Essay</span>
</span>
</div>
</li>
<li class="k-button" deselectable="on">
<div>
<span deselectable="on">
<span class="k-state-default">Extended Time - Time and a half (1.5x)</span>
</span>
</div>
</li>
</ul>
<input class="k-input k-valid" style="width: 25px;" accesskey="" autocomplete="off" role="listbox" title=""
aria-expanded="false" tabindex="0" aria-owns="accommodationsMultiselect_taglist accommodationsMultiselect_listbox"
aria-disabled="false" aria-busy="false" aria-activedescendant="bd81cf39-1dbe-431d-985c-57c3d3a11027" />
</div>
<select id="accommodationsMultiselect" multiple="multiple" name="accommodationsMultiselect" data-role="multiselect"
style="display: none;" aria-disabled="false" class="k-valid">
<option value="b08e686b-01bb-4cce-8aaa-fe836741c98e" selected="selected">Extended Time - Time and a half
(1.5x)</option>
<option value="b9812a54-fc87-494b-8bc3-453318143ee5">Double Time (2x)</option>
<option value="aa562f06-0c72-4bf8-9cd9-3e0b0c9d56df">Mark Answers in Test Booklet</option>
<option value="79795988-8722-4970-9c20-55cc90c3d732">Large Print Test and Circle Answers in Test Booklet</option>
<option value="dc4018db-a800-40d6-adbd-1afaefd72ddb" selected="selected">Calculator - provided by family</option>
<option value="03696d5b-65a9-4f1a-b548-1559ac5bceaf" selected="selected">Computer for Essay</option>
<option value="d08d568a-4861-4fae-a2e0-cde6f7f9ecec">Computer with Spell Check for Essay</option>
<option value="81a57096-847c-48c2-a217-eac0ca43eca7">Computer for Essay - provided by family</option>
<option value="e7eee91c-25a1-471c-9c0e-e1d454061834">Computer with Spell Check for Essay - provided by family</option>
<option value="f90a8609-6d65-4164-9652-883fbfce4c52">Computer for Essay - computer and printer provided by
family</option>
<option value="d25c1216-86e4-4c6b-b4a4-716ccc2ec41f">Computer with Spell Check for Essay - computer and printer
provided by family</option>
<option value="b4245a2b-a556-4481-b782-f704ca60bc14">Reader (may have limited availability at select ISEE test
locations)</option>
<option value="13fc2384-fa03-4a8a-b883-ffd484961c1e">Scribe (may have limited availability at select ISEE test
locations)</option>
<option value="23c68259-6137-4ddf-8208-8d433df65fa2">Scribe for Essay only (may have limited availability at select
ISEE test locations)</option>
<option value="1c7347d6-2d59-4670-aecc-cbca9b493d3b">Other (may have limited availability for "Other"
accommodations requested)</option>
</select>
</div>
</div>
</div>
</body>
</html>
Get a reference to the multiselect and simply set the .width() of it's .list.
var multiSelect = $("#multiselect").kendoMultiSelect({
animation: false
}).getKendoMultiSelect();
multiSelect.list.width(500);
// Or even:
// multiSelect.list.width("auto");
Check you http://dojo.telerik.com/#Stephen/uLAbU for a working example.
This technique works for DropDownLists and ComboBoxes as well, possibly other "dropdown" type controls.
In Peoplesoft ERP, there are many Processes which need to be run manually, once you login into PeopleSoft. We intend to automate this process, using VBS, since it justs involves a few clicks. However, we stuck at the very first step, Login into the Peoplesoft. Below is the code as of now which we have tried. This opens the login page, but nothing further happens. Can someone help to log us in?
EDIT : We are in IE11
WScript.Quit Main
Function Main
Set IE = WScript.CreateObject("InternetExplorer.Application", "IE_")
IE.Visible = True
IE.Navigate "our URl"
Wait IE
Set Helem = IE.document.getElementByID("userid")
Helem.Value = "username"
Set Helem = IE.document.getElementByID("pwd")
Helem.Value = "password"
Set Helem = IE.document.Forms(0)
Helem.Submit
End Function
Sub Wait(IE)
Do
WScript.Sleep 500
Loop While IE.ReadyState < 4 And IE.Busy
Do
WScript.Sleep 500
Loop While IE.ReadyState < 4 And IE.Busy
End Sub
Sub IE_OnQuit
On Error Resume Next
WScript.StdErr.WriteLine "IE closed before script finished."
WScript.Quit
End Sub
Please find below the HTML code:
<html dir=ltr lang=en>
<head>
<title>Oracle PeopleSoft Sign-in</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script language="JavaScript">
var sDomain = ";
try {
document.domain = ";
}
catch (err) {; }
</script>
<style id="ptfb" type="text/css">body{display:none;}</style>
<script type="text/javascript">
if (self === top) {
var fb = document.getElementById("ptfb");
fb.parentNode.removeChild(fb);
} else {
try {
top.location = self.location;
} catch(ex) {}
}
</script>
<link type="text/css" href="/PMXFGL01/signin.css" rel="stylesheet">
<script type="text/javascript" src="/PMXFGL01/signin.js"></script>
</head>
<body onload="ptSignon().login();">
<div id="pswrapper">
<form id="login" name="login" method="post" action="?&cmd=login&languageCd=ENG" autocomplete="off">
<input type="hidden" id="timezoneOffset" name="timezoneOffset" value="0">
<input type="hidden" id="ptmode" name="ptmode" value="f">
<input type="hidden" id="ptlangcd" name="ptlangcd" value="ENG">
<input type="hidden" id="ptinstalledlang" name="ptinstalledlang" value="GER,UKE,DAN,HUN,CFR,SLK,ENG,CZE,FRA,NOR,CRO,POR,ARA,ZHT,JPN,ZHS,RUS,POL,T HA,ITA,GRK,ROM,KOR,TUR,SER,SVE,ESP,DUT,MAY,BUL,HEB,FIN,VIE,SLV">
<div class="signonMain">
<img src="/PMXFGL01/images/Header.png" class="ps-staticimg" alt="Oracle PeopleSoft Sign-in" title="Oracle PeopleSoft Sign-in" >
<div class="ps_signinentry" >
<div id="ptloginerrorcont" class="ps_login_error" >
<div class="ps_login_error_inner" role="heading" aria-level="2">
<a id="error_link" name="error_link" tabindex="1"><img src="/PMXFGL01/images/PT_LOGIN_ERROR.gif" alt="Error"></a>
<div class="psloginerror" id="discovery_error" name="discovery_error" role="alert" aria-live="assertive" ></div>
<span class="psloginerror" id="login_error" name="login_error" role="alert" aria-live="assertive">User ID and Password are required.</span>
</div>
<div class="ps_box-control psloginerror" id="browsercheck_error" name="browsercheck_error" aria-live="assertive" role="alert"></div>
</div>
<div>
<span class="ps_label-show" id="ptLabelUserid"><label for="userid">User ID</label></span>
</div>
<div class="ps_box-control">
<input type="text" id="userid" name="userid" value="xxx" title="User ID">
</div>
<div>
<span class="ps_label-show" id="ptLabelPassword"><label for="pwd">Password</label></span>
</div>
<div class="ps_box-control">
<input type="password" id="pwd" name="pwd" title="Password" >
</div>
<div>
<span class="ps_label-show" id="ptLabelSelect"><label for="ps_select_box">Select a Language</label></span>
</div>
<div id="ps_select_parent" >
<div id= "ps_select_box" class="ps_box-control">
<select id="ptlangsel" name="ptlangsel" title="Select a Language" class="ps_select" onChange="ptSignon().changeLangFunc(this, event)">
<option value="ENG" title="English">English</option>
<option value="UKE" title="UK English">UK English</option>
<option value="ESP" title="Spanish">Español</option>
<option value="DAN" title="Danish">Dansk</option>
<option value="GER" title="German">Deutsch</option>
<option value="FRA" title="French">Français</option>
<option value="CFR" title="Canadian French">Français du Canada</option>
<option value="ITA" title="Italian">Italiano</option>
<option value="HUN" title="Hungarian">Magyar</option>
<option value="DUT" title="Dutch">Nederlands</option>
<option value="NOR" title="Norwegian">Norsk</option>
<option value="POL" title="Polish">Polski</option>
<option value="POR" title="Portuguese">Português</option>
<option value="ROM" title="Romanian">Română</option>
<option value="FIN" title="Finnish">Suomi</option>
<option value="SVE" title="Swedish">Svenska</option>
<option value="TUR" title="Turkish">Türkçe</option>
<option value="CZE" title="Czech">Čeština</option>
<option value="JPN" title="Japanese">日本語</option>
<option value="KOR" title="Korean">한국어</option>
<option value="RUS" title="Russian">Русский</option >
<option value="THA" title="Thai">ภาษาไทย</option>
<option value="ZHS" title="Simplified Chinese">简体中文</option>
<option value="ZHT" title="Traditional Chinese">繁體中文</option>
<option value="ARA" title="Arabic">العربية</option>
<option value="VIE" title="Vietnamese">Tiẽng Việt</option>
<option value="BUL" title="Bulgarian">български</option>
<option value="CRO" title="Croatian">hrvatski</option>
<option value="GRK" title="Greek">Ελληνικά</option>
<option value="HEB" title="Hebrew">עברית</option>
<option value="MAY" title="Bahasa Malay">Bahasa Melayu</option>
<option value="SER" title="Serbian">српски</option>
<option value="SLK" title="Slovak">slovenčina</option>
<option value="SLV" title="Slovenian">slovenščina</option>
</select>
</div>
</div>
<div class="ps_box-button">
<input name="Submit" type="submit" class="ps-button" value="Sign In" aria-label='To enable Accessibility mode, please check the checkbox "Enable Accessibility Mode" before you sign in. Sign In'>
</div>
<div class="ps_box-button">
<input type="checkbox" name="accessible" id="accessible">
<label for="accessible">Enable Accessibility Mode</label>
</div>
</div>
<div class="ps_box-link">
<span class="ps-link"></span>
</div>
<img src="/PMXFGL01/images/Footer.png" width="100%" alt="">
<footer id="ptfooter" class="ps_footer_text ">Copyright © 2000, 2015, Oracle and/or its affiliates. All rights reserved. </footer>
</div>
</form>
</div>
</body>
</html>
the following is working for me on IE11:
Function Main
Set IE = WScript.CreateObject("InternetExplorer.Application", "IE_")
IE.Visible = True
IE.Navigate "http://mysite/psp/myenvironment/?cmd=login"
Wait IE
With IE.Document
.getElementByID("userid").value = "myUsername"
.getElementByID("pwd").value ="myPassword"
.getElementsByName("Submit")(0).click
End With
End Function
I want t o use Multiple select boxes for tags and head section i put:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
My view:
<div>
{!! Form::label('tags','Select Tags:') !!}
<select class="form-control select2-multi" multiple="multiple" name="tags">
#foreach ($tags as $tag)
<option value='{{ $tag->id }}'>{{ $tag->name }}</option>
#endforeach
</select>
<script type="text/javascript">
$(.select2-multi).select2();
And in the browser i get this:
enter image description here
$(document).ready(function() {
$(".js-example-basic-single").select2();
$(".js-example-basic-multiple").select2();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<br>
<strong>Single Select</strong>
<select class="js-example-basic-single form-control">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<br><br>
<strong>Multi Select</strong>
<select class="js-example-basic-multiple form-control" multiple>
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
It's working perfectly fine.
make sure you've included all the required css and js plugins
NOTE:
Add this class for single select js-example-basic-single option
js-example-basic-multiple for multi-select option
Is there any way to use Bootstrap's form field validation states/classes (warning, error, info, success) on form-inline fields (without using control-group)?
I'm using Bootstrap, and I have a large form that uses the form-horizontal class for layout. However, there are areas within the form where the fields need to be inline (for example, City/State/Zip). I'm using form-inline for this, which works fine. Here's the basic markup:
<form id="account-form" class="form-horizontal" method="post" action="" novalidate>
<!-- Address -->
<div class="control-group">
<label class="control-label">Address</label>
<div class="controls">
<input type="text" name="address" />
</div>
</div>
<!-- City, State, Zip -->
<div class="control-group">
<label class="control-label">City</label>
<div class="controls form-inline">
<input type="text" name="city" />
<label>State</label>
<input type="text" name="state" />
<label>Zip Code</label>
<input type="text" name="zipcode" />
</div>
</div>
</form>
In my particular situation I need to handle validation manually. Unfortunately, it seems Bootstrap's validation state classes must be applied to the control-group; as you can see in the example above, the control-group in my case contains multiple fields. I tried wrapping individual fields within control-group spans or divs, but control-group does not play nicely at all when used with both a form-inline and form-horizontal together!
Is there a CSS class or other rule I can attach to a field directly (or an otherwise-innocent field wrapper) to apply these styles to individual fields, without having to completely redeclare all the standard bootstrap styles??
You could create some custom less code and recompile bootstrap:
Add #import "_custom.less"; to less/bootstrap.less
create less/_custom.less:
// Mixin for inline form field states
.inlineformFieldState(#warning: success,#textColor: #555, #borderColor: #ccc, #backgroundColor: #f5f5f5) {
// Set the text color
label.#{warning},
.help-block .#{warning},
.help-inline .#{warning}{
color: #textColor;
}
// Style inputs accordingly
.checkbox .#{warning},
.radio .#{warning},
input.#{warning},
select.#{warning},
textarea.#{warning} {
color: #textColor;
}
input.#{warning},
select.#{warning},
textarea.#{warning} {
border-color: #borderColor;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(#borderColor, 10%);
#shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(#borderColor, 20%);
.box-shadow(#shadow);
}
}
// Give a small background color for input-prepend/-append
.input-prepend .add-on .#{warning},
.input-append .add-on .#{warning} {
color: #textColor;
background-color: #backgroundColor;
border-color: #textColor;
}
}
.form-inline{
.inlineformFieldState(success, #successText, #successText, #successBackground);
.inlineformFieldState(warning, #warningText, #warningText, #warningBackground);
.inlineformFieldState(info, #infoText, #infoText, #infoBackground);
.inlineformFieldState(error, #errorText, #errorText, #errorBackground);
}
This mixin is based on .formFieldState in less/mixins.less. After recompile bootstrap you could use (see also: http://jsfiddle.net/bassjobsen/K3RE3/):
<form>
<div class="container">
<div class="control-group">
<div class="controls form-inline">
<label class="error">City</label>
<input class="error" type="text" name="city" />
<label class="warning">State</label>
<input class="warning" type="text" name="state" />
<label class="success">Zip Code</label>
<input class="success" type="text" name="zipcode" />
<label class="info">Street</label>
<input class="info" type="text" name="street" />
</div>
</div>
</div>
</form>
I do this, remove control-group from div container and use form-group instead, but put this in each input div, I do not secure that works with control-group.
This url maybe can help you http://formvalidation.io/examples/complex-form/, this not work for me ^_^!.I hope help you.
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4 form-group" >
<select class="form-control" name="pais">
<option value="" selected disabled>Pais</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="col-lg-4 form-group" >
<select class="form-control" name="estado">
<option value="" selected disabled>Estado</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="">C</option>
</select>
</div>
<div class="col-lg-4 form-group">
<select class="form-control" name="ciudad">
<option value="" selected disabled>Ciudad</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
</div>
something like this will work.
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
//******** added custom code.
$('input[type="radio"]').closest('.col-sm-9').find('.invalid-feedback').hide();
$('input[type="radio"]:invalid').closest('.col-sm-9').find('.invalid-feedback').show();
}, false);
//******** added custom code.
});
}, false);
})();
</script>
code above is almost of document, added custom code at the end of submit event listener.
#read
https://getbootstrap.com/docs/4.0/components/forms/#validation