have this optgroup select it is possible to use a javascript for this and if yes can show me an example how can do that i have look around but i do not find something?
Choose a city:
<select name="city">
<optgroup label="color_1">
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</optgroup>
<optgroup label="Colors 2">
<option value="Yellow">Yellow</option>
<option value="Grey">Grey</option>
<option value="White">White</option>
</optgroup>
</select>
But i want use group for div class for example
<div class="categories">
<span class="optgroup" id="color_1">
<div class="category">Colors 1</div>
<label class="color_1">Blue</label>
<label class="color_1">Red</label>
<label class="color_1">Green</label>
</span>
<span class="optgroup" id="color_2">
<div class="category">Colors 2</label >
<label class="color_2">Yellow</label>
<label class="color_2">Grey</label>
<label class="color_2">White</label>
</span>
</div>
Related
is there a chance to search with evoSearch with 3 items? I would like the search results page to show the result only if the page meets all 3 conditions? TVs added to the document will be checkboxes with the possibility of multiple selection
Below is a screen that should help
https://imgur.com/a/1uKN2N0#t9hgC5x
Search page code
<form action="[~24~]" id="praca" method="get">
<div>
<label for="language">Language:</label>
<select type="text" name="language" id="language" class="form">
<option selected="" value="english">english</option>
<option value="spanish">spanish</option>
<option value="german">german</option>
<option value="polish">polish</option>
</select>
</div>
<div>
<label for="localisation">Localisation:</label>
<select type="text" name="localisation" id="localisation" class="form">
<option selected="" value="italy">Italy</option>
<option value="Greece">Greece</option>
<option value="Spain">Spain</option>
<option value="Portugese">Portugese</option>
</select>
</div>
<div>
<label for="category">Category:</label>
<select type="text" name="category" id="category" class="form">
<option selected="" value="it-service">IT service</option>
<option value="helpdesk">Helpdesk</option>
<option value="callcenter">Call center</option>
<option value="support">Support</option>
</select>
</div>
<button type="submit">Search</button>
</form>
Search results page
[!evoSearch?
&display=`10`
&filters=`AND(
content:c.template:notin:27,28;
content:c.id:notin:23,88;
)`
&tvPrefix=``
&tvList=`language,localisation,category`
&renderTV=`language,localisation,category`
&ownerTPL=`#CODE:[+dl.wrap+]`
&tpl=`evoSearch`
&statTpl=`<p>Showing results [+stat_from+] - [+stat_to+] of [+stat_total+] for "[+stat_request+]"</p>`
&noResult=`<p>Nothing was found for "[+stat_request+]"</p>`
!]
It can also be AjaxSearch, I have code like below, but unfortunately it searches for one criteria.
Adding advSearch = 'allwords' causes it to find nothing
[!AjaxSearch?
&clearDefault=`1`
&showResults=`0`
&landingPage=`12`
&showMoreResults=`1`
&moreResultsPage=`12`
&output=`0`
&whereSearch=`tv`
&withTvs=`category,language,localisation`
&tvPhx=`category,language,localisation`
&tplInput=`#FILE:assets/snippets/ajaxSearch/templates/inputTemplates/input3.tpl.html`
!]
input3.tpl.html code
[+as.showInputForm:is=`1`:then=`
<form id="[+as.formId+]" action="[+as.formAction+]" method="post">
<fieldset>
<div>
<label for="language">Language:</label>
<select name="search[]" id="ajaxSearch_select" class="form">
<option value="english">english</option>
<option value="spanish">spanish</option>
<option value="german">german</option>
<option value="polish">polish</option>
</select>
</div>
<div>
<label for="localisation">Localisation:</label>
<select name="search[]" id="ajaxSearch_select2" class="form">
<option selected="" value="italy">Italy</option>
<option value="Greece">Greece</option>
<option value="Spain">Spain</option>
<option value="Portugese">Portugese</option>
</select>
</div>
<div>
<label for="category">Category:</label>
<select name="search[]" id="ajaxSearch_select3" class="form">
<option selected="" value="it-service">IT service</option>
<option value="helpdesk">Helpdesk</option>
<option value="callcenter">Call center</option>
<option value="support">Support</option>
</select>
</div>
[+as.showAsId:is=`1`:then=`<input type="hidden" name="[+as.asName+]" value="[+as.asId+]" />`+]
<input type="hidden" name="advsearch" value="[+as.advSearch+]" />
<label>
<input id="[+as.submitId+]" type="submit" name="sub" value="[+as.submitText+]" />
</label>
</fieldset>
</form>
[+as.showIntro:is=`1`:then=`
<p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>
`+]
`+]
Im having an issue with Netlify forms. I have created a multistep form with HTML and Javascript to show and hide the separate sections in the form. All the steps are in separate <div>'s and are all inside the <form>
The issue that I'm having is that in the Netlify UI where you can see the form data, all fields are showing up, but on the email notification only half the fields are being emailed.
<form
action="/"
class="form-page p-lg-5"
name="HelloVet Form"
method="POST"
data-netlify="true"
>
<input type="hidden" name="HelloVet Form" value="HelloVet Form" />
<!-- Pet 1 information form -->
<div class="p-2 p-md-5 step step1 active">
<h2 class="border-bottom">Client Information</h2>
<div class="row pt-2">
<div class="col">
<label for="FirstName" class="form-label">Name:</label>
<input
name="FirstName"
type="text"
class="form-control"
id="FirstName"
placeholder="Jane Doe"
name="FirstName"
/>
<label for="emailAddress" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="emailAddress"
placeholder="name#example.com"
name="email"
/>
<label for="street-address" class="form-label">Street:</label>
<input
type="text"
class="form-control"
id="street-address"
placeholder="123 Main Street"
name="street-address"
/>
<label for="state" class="form-label">State:</label>
<input
type="text"
class="form-control"
id="state"
placeholder="State"
name="state"
/>
</div>
<div class="col">
<label for="petReferredBy">Referred by:</label>
<select
class="form-select"
id="petReferredBy"
name="petReferredBy"
required
>
<option selected>Select One</option>
<option value="facebook">Facebook</option>
<option value="google">Google</option>
<option value="nextdoor">NextDoor</option>
<option value="internet">Internet Search</option>
<option value="instagram">Instagram</option>
<option value="grommer">Mobile Groomer</option>
<option value="instagram">Previous Client</option>
<option value="friend">Referred by Friend</option>
<option value="vet">Vet Hospital</option>
<option value="yelp">Yelp</option>
</select>
<label for="phoneNumber" class="form-label">Phone</label>
<input
type="tel"
class="form-control"
id="phoneNumber"
placeholder="(555) 555-1234"
name="phoneNumber"
/>
<label for="city" class="form-label">City:</label>
<input
type="text"
class="form-control"
id="city"
placeholder="City"
name="city"
/>
<label for="zip" class="form-label">Zip:</label>
<input
type="text"
class="form-control"
id="zip"
placeholder="Zip"
name="zip"
/>
</div>
</div>
<!-- Pet 1 information form -->
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName">Pets Name:</label>
<input
type="text"
class="form-control"
id="petName"
placeholder="Pets Name"
name="petName"
/>
</div>
<div class="col">
<label for="breed">Breed:</label>
<input
type="text"
class="form-control"
id="breed"
placeholder="Breed"
name="breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species">Species:</label>
<select class="form-select" id="species" name="species">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender">Gender:</label>
<select class="form-select" id="gender" name="gender">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay">Neutered/Spayed:</label>
<select class="form-select" id="spay" name="spay">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight"
name="weight"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age"
name="age"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday"
name="birthday"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet"
name="pastVet"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords">Can we request records?:</label>
<select class="form-select" id="medRecords" name="medRecords">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile"
id="formFile"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason"
name="reason"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly"
id="isFriendly"
value="Checked"
/>
<label class="form-check-label" for="isFriendly">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite"
id="willBite"
value="Checked"
/>
<label class="form-check-label" for="willBite">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide"
id="willHide"
value="Checked"
/>
<label class="form-check-label" for="willHide">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle"
id="needsMuzzle"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive"
id="aggressive"
value="Checked"
/>
<label class="form-check-label" for="aggressive">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation"
id="sedation"
value="Checked"
/>
<label class="form-check-label" for="sedation">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands"
id="extraHands"
value="Checked"
/>
<label class="form-check-label" for="extraHands">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto"
name="petPhoto"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share"
name="share"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-add-pet">Add Pet</p>
</div>
</div>
<!-- Pet 2 information form -->
<div class="p-2 p-md-5 step step2">
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName2">Pets Name:</label>
<input
name="petName2"
type="text"
class="form-control"
id="petName2"
placeholder="Pets Name"
/>
</div>
<div class="col">
<label for="breed2">Breed:</label>
<input
name="breed2"
type="text"
class="form-control"
id="breed2"
placeholder="Breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species2">Species:</label>
<select class="form-select" name="species2" id="species2">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender2">Gender:</label>
<select class="form-select" name="gender2" id="gender2">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay2">Neutered/Spayed:</label>
<select class="form-select" name="spay2" id="spay2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight2" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight2"
name="weight2"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age2" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age2"
name="age2"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday2" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday2"
name="birthday2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet2">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet2"
name="pastVet2"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords2">Can we request records?:</label>
<select class="form-select" id="medRecords2" name="medRecords2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile2" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile2"
id="formFile2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason2">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason2"
name="reason2"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly2"
id="isFriendly2"
value="Checked"
/>
<label class="form-check-label" for="isFriendly2">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite2"
id="willBite2"
value="Checked"
/>
<label class="form-check-label" for="willBite2">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide2"
id="willHide2"
value="Checked"
/>
<label class="form-check-label" for="willHide2">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle2"
id="needsMuzzle2"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle2">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive2"
id="aggressive2"
value="Checked"
/>
<label class="form-check-label" for="aggressive2">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation2"
id="sedation2"
value="Checked"
/>
<label class="form-check-label" for="sedation2">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands2"
id="extraHands2"
value="Checked"
/>
<label class="form-check-label" for="extraHands2">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto2" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto2"
name="petPhoto2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share2">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share2"
name="share2"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-prev-pet">Previous Pet</p>
<p class="btn btn-primary full-width btn-add-pet">Next Pet</p>
</div>
</div>
<!-- Pet 3 information form -->
<!-- Pet 4 information form -->
<!-- submit button -->
<div class="row p-md-5">
<div class="col">
<div class="row p-3">
<button
type="submit"
class="btn btn-primary full-width"
id="btn-submit"
>
Submit
</button>
</div>
</div>
</div>
</form>
const steps = Array.from(document.querySelectorAll('form .step'))
const addPetBtn = document.querySelectorAll('form .btn-add-pet')
const prevPetBtn = document.querySelectorAll('form .btn-prev-pet')
const form = document.getElementsByClassName('form-page ')
addPetBtn.forEach((button) => {
button.addEventListener('click', (e) => {
changeStep('next')
scrollTo(0, 0)
})
})
prevPetBtn.forEach((button) => {
button.addEventListener('click', () => {
changeStep('prev')
scrollTo(0, 0)
})
})
function changeStep(btn) {
let index = 0
const active = document.querySelector('form .step.active')
index = steps.indexOf(active)
steps[index].classList.remove('active')
if (btn === 'next') {
index++
} else if (btn == 'prev') {
index--
}
steps[index].classList.add('active')
scrollTo(0, 0)
}
I am trying to insert the attribute "selected" into the first option (volvo) with Jekyll without writing anything in the form.
I guess I should do it with capture but don't get how it works for passing attributes.
cars.html
<html>
<body>
...
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
...
</body>
</html>
I have a sweetalert2 like this:
When I want to pick something it looks like that:
My code inside the sweetalert2 is:
<div className={'col-12 course-item-modal'}>
<div className="row">
<div className="form-group col-12">
<div className="row">
<label htmlFor="form_4_course">Kurs</label>
<select id="form_4_course" name="form[4][course]" className="selectize form-control">
<option value=""></option>
<option value="60"> GTS</option>
<option value="62">Sprechstunde</option>
<option value="59">BesF 1c</option>
<option value="58">BesF 3c</option>
<option value="53" selected="selected">D 1a</option>
<option value="56">D 1b</option>
<option value="57">W T/X 1a</option>
</select>
</div>
</div>
<div className="form-group col-12">
<div className="row">
<label className="" htmlFor="form_4_rooms">Räume</label>
<select id="form_4_rooms" name="form[4][rooms][]" className="selectize form-control"
multiple="multiple">
<option value="1">Info I</option>
<option value="2">Info I</option>
</select>
</div>
</div>
</div>
</div>
I use selectize.js in this react.js application.
I played around with z-index of the sweetalert2 .swal2-actions and the .
Also I increased the z-index of the selectize containers. I tried everything possible with z-index - I guess. Nothing works at all.
Can someone help?
The solution is:
.swal2-content {
z-index: 2 !important;
}
The z-index for swal2-header, swal2-body, swal2-actions and swal2-footer are 1.
So setting the swal2-content class to z-index: 1 !important; solves the problem.
When i am changing my option value of select it's ng-model value is not being changed.
Is this happening because of value is being changed by Jquery?
Because i read a line about angularjs from w3school that The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.
And i want to clarify that option value is being changed by j query.
Please suggest me proper solution or tell me error in the code.
Here is my html
<div class="row" ng-app="myapp" ng-controller="mycontroller" id="mainController">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<p>Rooms
<% no_of_rooms %>
</p>
<select ng-init="no_of_rooms='1'" autocomplete="off" ng-model="no_of_rooms" class="form-control" id="no_of_rooms" style='display:none' name="no_of_room" style="height: 39px !important;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" ng-repeat="i in getNumber(no_of_rooms) track by $index">
<div class="form-group">
<p>Adult (12+ YRS)</p>
<select autocomplete="off" class="form-control" style='display:none' name="no_of_adults[]" style="height: 39px !important;">
<option value="0">0</option>
<option value="1" Selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
Here is my script.
var app = angular.module('myapp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('mycontroller', function($scope , $filter) {
$scope.getNumber = function(num) {
return new Array(parseInt(num));
}
});