I tried to make a validation using javascript but I had some trouble if I leave the field empty it shows the message, then select an item in the list but it now shows an empty message and the action isn't executed. If I click the button twice, it will go trough
I put some code :
html :
<select name="condition[]" class="search_test col-sm-6 form-control condition" style="line-height: 34px;" oninput="InvalidCondition(this)" oninvalid="InvalidCondition(this)" required>
<option value="" selected="selected" disabled>Select Condition...</option>
<?php foreach ($condition as $c) : ?>
<option value="<?= $c; ?>"><?= $c; ?></option>
<?php endforeach ?>
</select>
Javascript :
function InvalidCondition(select) {
if (select.value === "") {
select.setCustomValidity("Please select an item");
} else {
select.setCustomValidity("");
}
}
pictures :
Do you need the else condition there?
Without seeing context, will this work:
function InvalidCondition(select) {
if (select.value === "") {
select.setCustomValidity("Please select an item");
}
}
edit:
It would help if you provided a link, or perhaps more code, maybe Codepan.
In the meantime, does this work for you:
function InvalidCondition(select) {
if (select.value === "") {
select.setCustomValidity("Please select an item");
} else {
select.setCustomValidity(`${select.value}`);
}
}
Related
i need to uncheck a checkbox when a value is chosen from multi dropdown. The problem is the value is a php value which is generate from foreach.
below is the code of the javascript
$("#multi_search_filter").on('change', function () {
var val = $(this).val();
if (val === <?php"'.$row['batch_name'].'" ?>) {
$('#checkUncheckAll').prop('checked', false);
return;
}
$('#checkbox1').prop('checked', true);
});
this is the code of the PHP and HTML
<select name="multi_search_filter" id="multi_search_filter" multiple class="form-control selectpicker">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["batch_id"].'">'.$row["batch_name"].'</option>';
}
?>
</select>
this is the input checkbox
<input type="checkbox" id="checkUncheckAll">
I tried to search for solution but failed to do so. Appreciate any help
I know that it's a mainstream question but i already search a lot and i didn't found any answer for this.
I just need to reset my fields.
So I have a php class (classMenu.php) who geneate an html form for my main page.
To get last selected options, i past $_POST as argument when i call my classMenu.php like this :
mainPage.php
new menu("mainPage.php", $_POST);
classMenu.php
<select class="selectpicker" id="eventType" title="Event Type" name="eventType" data-width="150px" data-live-search="true" data-actions-box="true">
<option value="workshop"
<?php
$this->isSelected("eventType", "workshop")
?>
>Workshop</option>
<option value="master" <?php $this->isSelected("eventType", "master") ?>>Master</option>
<option value="webinar" <?php $this->isSelected("eventType", "webinar") ?>>Webinar</option>
</select>
And here is my isSelected function ($setValues = $_POST parameter):
private function isSelected($field, $value){
if(isset($this->setValues[$field]) && $this->setValues[$field] == $value){
echo "selected";
}
}
I already tried those options for my javascript code :
function resetSelect() {
$('#eventType').prop('selectedIndex', 0);
};
function resetSelect() {
document.getElementById('eventType')[0].selectedIndex = 0;
};
function resetSelect() {
$("#eventType").val('');
};
function resetSelect() {
$('select').each(function(){
$(this).find('option:selected').prop('selected', false);
});
};
function resetSelect() {
$('select').each(function(){
$(this).find('option:selected').removeAttr('selected');
});
};
I hope that my question is clear for you.
Thanks
As I see it I would use :
$('option:selected').removeAttr('selected');
If you have multiple select then :
$('.selectpicker').each(function(){
$(this).find('option:selected').removeAttr('selected');
});
$('.selectpicker').prop('selectedIndex', 0);
$('.selectpicker').selectpicker('refresh');
You could use as well
$('option:selected').prop('selected', false)
jQuery: Prop selectedIndex to 0:
$('#eventType').prop('selectedIndex', 0);
If use javascript:
document.getElementsById('eventType')[0].selectedIndex = 0
This code is working for me.
$('.multiselect-ui option').prop('selected', false).trigger('chosen:updated');
Using print_media_templates i add some settings into wordpress gallery creator that allow me to chose gallery shortcode output (default gallery, masonry, slider) based on additional shortcode parameters.
My code so far :
<?php
add_action('print_media_templates', function(){ ?>
<script type="text/html" id="tmpl-custom-gallery-setting">
<label class="setting">
<span>Gallery Type</span>
<select name="type" data-setting="type" onchange="getval(this);">
<option value="default">Default</option>
<option value="masonry">Masonry</option>
<option value="slider">Slider</option>
</select>
</label>
<div id="slider-settings">
<label class="setting">
<span>Animation</span>
<select id="gallery-type" name="animation" data-settings="animation">
<option value=""></option>
<option value="fade">Fade</option>
<option value="slide">Slide</option>
</select>
</label>
</div>
</script>
<script>
jQuery(document).ready(function() {
wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
template: function(view){
return wp.media.template('gallery-settings')(view)
+ wp.media.template('custom-gallery-setting')(view);
}
});
});
</script>
<?php
});
?>
It's only small part as example since there's much more options to each gallery type. Since there's lot of options i want to display only one corresponding to selected gallery type. In this example i want to display #slider-settings only when #gallery-type select value == "slider".
As for checking select value i found this code:
<script>
function getval(sel) {
if (sel.value == "slider") {
alert(sel.value);
}
}
</script>
with return selected type value (along with onchange="" on #gallery-type select) and display it if it's set to "slider".
But when i want to hide #slider-settings like :
function getval(sel) {
if (sel.value != "slider") {
$('#slider-settings').hide();
}
}
it's not hiding at all.
You have to handle native update function. Update function is fired for each label when a single change is made. (media-views.js line 7232)
var oldUpdate = wp.media.view.Settings.Gallery.prototype.update;
wp.media.view.Settings.Gallery.prototype.update = function(key) {
if( key === "type" ) {
var value = this.model.get( key );
if ( value === "slider" ) {
setTimeout(function(){
jQuery("#slider-settings").css({"display":"block"});
});
} else {
setTimeout(function(){
jQuery("#slider-settings").css({"display":"none"});
});
}
}
// Initialize native code.
oldUpdate.apply(this, arguments);
};
Somehow i managed to get it work by hiding #slider-settings using not jQuery but javascript :
<script>
function getval(sel) {
if (sel.value != "slider") {
document.getElementById('slider-settings').style.display = 'none';
} else {
document.getElementById('slider-settings').style.display = 'block';
}
}
</script>
But to get value it's has to change (since it's onselect=) so first time i display settings it's not hiding. And as i searched there's seems to be not anything like onload= i can use with .
Or is there a way to just reselect it on load ?
So the code below works for this particular example, and I would like to make it work in scenario where the amount of forms select + input type is dynamic determined by user on previous page. So now we have in php array of $champion[] = ("Aatrox", "somethingelse", "somethingelse2"); so now we loop the amount of select and input fields. Every champion has different spells so now when you choose Q for first champion AAtrox in input you will see "Spell1" below in somethingelse input user might want to choose E and he will see the name of the spell for that champion in the input form
<?php
$champion = "Aatrox"
?>
<select id="spell" name="spell" onchange="val()">
<option value="Passive">Passive</option>
<option value="Q" selected>Q</option>
<option value="W">W</option>
<option value="E">E</option>
<option value="R">R</option>
</select>
<input type="text" id="spellname" disabled>
<script>
var champions = {
"Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
"Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
};
function change(x){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
return x;
}
function val(d) {
if(typeof d === "undefined"){
d = document.getElementById("spell").value;}
var spellname = document.getElementById("spellname");
spellname.value=champions["<?php echo $champion; ?>"][change(d)];
}
val("Q");
</script>
I can't really figure out dynamic how to check dynamic array from PHP in this javascript script
Not sure if I fully understand what you're trying to accomplish here, but here's a go at it.
<?php
$champions = array("Aatrox","Ahri");
foreach($champions as $champion){
?>
<select id="spell-<?php echo $champion ?>"
name="spell" onchange="val('<?php echo $champion ?>')">
<option value="Passive">Passive</option>
<option value="Q" selected>Q</option>
<option value="W">W</option>
<option value="E">E</option>
<option value="R">R</option>
</select>
<input type="text" id="spellname-<?php echo $champion ?>" disabled>
<?php } //end foreach ?>
<script>
var champions = {
"Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
"Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
};
function change(x){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
return x;
}
function val(championName) {
d = document.getElementById("spell-" + championName).value;
var spellname = document.getElementById("spellname-" + championName);
spellname.value=champions[championName][change(d)];
}
<?php foreach($champions as $champion) {
echo "val(" . $champion . ");";
} ?>
</script>
Keep in mind it is generally bad practice to mix server side code with client side code. Although, at this point it would require a restructure of how you're handling everything (using AJAX to load JSON for example). I highly encourage you to research the topic.
I'm very new to this, so this may not the best way to go about solving this problem. Basically, I am trying to run one of three .php files upon a form submit. Which .php file I run should depend on what value the user chooses from the select field with id="periodDisplay". Would really appreciate some help.
<script>
function onSubmitForm(){
if(document.getElementById("periodDisplayed").selectedIndex == 'This Week')
{
return document.selectDisplay.action ="thisWeek.php";
}
else if(document.getElementById("periodDisplayed").selectedIndex == 'This Month')
{
return document.selectDisplay.action ="thisMonth.php";
}
else if(document.getElementById("periodDisplayed").selectedIndex == 'All Workouts')
{
return document.selectDisplay.action ="allWorkouts.php";
}
else
{
return document.selectDisplay.action = "index.html";
}
return true;
}
</script>
<form id="selectDisplay" onsubmit="return onSubmitForm();">
I want to see
<select id="unitDisplayed">
<option>Distance</option>
<option>Time</option>
</select>
for
<select id="periodDisplayed">
<option>This Week</option>
<option>This Month</option>
<option>All Workouts</option>
</select>
<input type="submit"></input>
</form>
Did you debug to see what selectedIndex returns? It returns an INTEGER, not the value/text of the selected option.
Why make it so complicated. Set the value to the page you want to go to and reference it. All of the code is reduced to one line.
HTML
<select id="periodDisplayed">
<option value="thisWeek.php">This Week</option>
<option value="thisMonth.php">This Month</option>
<option value="all.php">All Workouts</option>
</select>
JavaScript
function onSubmitForm() {
document.selectDisplay.action = document.getElementById("periodDisplayed").value;
return true;
}
Should be
function onSubmitForm(){
if(document.getElementById("periodDisplayed").value == 'This Week')
{
document.selectDisplay.action ="thisWeek.php";
return true;
}
....
document.selectDisplay.action = "index.html";
return true;
}