I have a form on my page that uses multiselect. Here is the relevant part of the form
<select required id="reqs2" name="reqs2[]" multiple="multiple" class="form-control">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
and at the bottom of the page I have
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#reqs2').multiselect();
});
</script>
It all works fine if the user makes at least one selection, but if they don't make a selection, the form doesn't submit and no validation error message is displayed. Validation messages show for other required input fields, but not this one.
Any ideas what changes I need to make?
Thanks in advance
Thanks for your help, but I managed to solve it by removing the "required" element from the field on the form and adding a line to my php file as follows
Instead of
$try2 = implode(', ', $_POST['reqs']);
I add this before so it now becomes
if(isset($_POST['reqs']))
$try2 = implode(', ', $_POST['reqs']);
Now client can skip the field without an error showing
This seems to check if there is an entry in the field - if there is it implodes it; if not, it ignores it.
Related
I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you
I have dropdown list in my form which used bootstrap-select to show the dropdown. I want to make if user submit the form it will check the dropdown is have value or not. I already added required inside the <select> tag but nothing happen if I leave it empty and press submit button.
This is my code :
<div class="form-group">
<label for="location">Location</label>
<select name="location" id="location-form" required>
<option value="">Choose Location</option>
<?php foreach($location as $row) : ?>
<option value="<?=$row['location_id']?>"><?=$row['location_name']?></option>
<?php endforeach; ?>
</select>
</div>
How to make my select dropdown required and can validate it must filled in if user press submit button ? Thanks before.
A select always has a value set into it. Try using a radio group instead.
Check here for more information on a radio group. HTML5: How to use the "required" attribute with a "radio" input field
There is two way that helps me will share with you below.
Using this way also problem getting solved.
<form action="whatever" method="post" novalidate>
OR using this too
please try following code.
/* For checking the drop-down contain value of not use this. */
if(jQuery('#location-form').val() == ''){
alert('Please select the option for location');
}else{
return false;
}
I hope this will help you.
Thanks.
By using default bootstrap 4.* JS validations you can simply add to sezel
<select ... required="true">
and an empty option with value=""
<option value="">Select one</option>
In this way Bootstrap JS library check if is selected
Add "disabled" in yout first option(along with required in select tag) as:
<div class="form-group"> <label for="location">Location</label> <select name="location" id="location-form" required> <option value="" disabled>Choose Location</option> <?php foreach($location as $row) : ?> <option value="<?=$row['location_id']?>"><?=$row['location_name']?></option> <?php endforeach; ?> </select> </div>
I am new to coding but I have done a lot of research on this site and I found a solution (not so efficient but works). This solution is based on the fact that the html5 "required" attribute worked at least somewhat - it prevents you from proceeding next or submitting but nothing else other than that - e.g. no error message, no alert, nothing at all.
The idea of the solution is to use the "invalid-feedback" class to show an error message, make use of the fact that it won't show until you pass in a "d-block" class. Then use a couple of functions on click of a button.
$('#button').click(function () {
$('#id-error').hide(); //if there is indeed a html5 message showing, but it looks bad, then just hide it, if you inspect the msg, html has automatically generate this "id-error" id
if ($('#id').is(':disabled')){
$('#errormsg-id').removeClass('d-block');
} else if (!$('#id').val()){
$('#errormsg-id').addClass('d-block');
};
});
$('#id').change(function () {
if($('#id').val()){
$('#errormsg-id').removeClass('d-block');
};
});
<div class="form-group ">
<select id="id" class="selectpicker" required>
<option >...</option>
</select>
<div id="errormsg-id" class="invalid-feedback ">Please make a selection.</div>
</div>
This is PHP; however, for Angular (which is what I came here looking for), you could create a custom validator that checks if the <option value="">Choose Location</option> is selected. Inside the validator, you'd check the value of the control. If the control value is '', then you fail the validation.
This would work for both template driven and reactive forms.
Custom Validators in Angular
Have you put your select in form tag?
If not try placing it inside form tag.
Please refer - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_select_required
If required is not working you can add java script validation as given below and replace "FormnameId" with your form tag id.
<script type="text/javascript">
$(document).on('submit','form#FormnameId',function(event){
event.preventDefault();
var sel = $("#location-form").val();
if(sel == ''){
alert('Please select value first');
return false;
}
});
</script>
I have a project in which I must do something like this:
when a user's page loads, he gets a personalized select box (with some options generated by PHP for him) and then, when he changes the option, I must change the rest of the content (on the same page).
for example, let the select box for a kind of user be:
Main content
Tools
Now, my idea was to have a
<form action="processing.php">
<select name="choice" onChange="submit();"> etc. which should pass the user's choice to processing.php. The problem is, I want the first option to be automatically selected and the content for that option to appear when the page loads - somehow like the first option to be automatically submitted.
Also, different kind of users should get different options, and I thought I can use a single page to process these requests. Is this achievable?
Can you please help me with an idea on how to submit that form automatically with the first generated option? Thank you.
You can use the onChange Event of the selection. In the handler you can then do the redirect
let sel = document.getElementById('yourselect');
let form = document.getElementById('yourform');
sel.onchange = function() {
form.submit()
}
You can easily bind the select change with Javascript. Here is the example with jQuery:
$('#mySelect').on('change', function(){
// Do your staff
$('#myForm').submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<select id="mySelect" method="post" action="processing.php" name="select_name">
<option value="">Select One</option>
<option value="http://google.com">Google</option>
</select>
</form>
I have a project im working on, that needs a javascript OnChange Script for a dropdown box on media upload page.
I have a drop-down box with 2 options -'Yes' and 'No'. If the user selects 'No' i don't want the form to submit and possibly display a message saying why.
Is anyone able to provide a script to do this? I have to enter this on the attribute itself (eah attribute has the ability to have a OnChange script), i can change the attribute references to the specific ones needed. More of a general 'formula' for the script is needed.
Maybe i'm too vague and its not possible to make on the information i have given you.
Thanks in advance,
T.
first, write javascript code like this
<script>
function output()
{
var input = document.getElementById('input').value;
if(input==0){
alert("WHY???");
document.getElementById("out").value="why?";
}else{
document.getElementById("out").value="Ok";
}
}
</script>
and for the html code
<form>
<select name="input" id="input" onchange="output()">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="out" name="out">
</form>
note: javascript not java
How can I get the JavaScript onChange to work with a autofill form extension. The problem is that when you click the button to autofill the form it doesn't call the onChange. Is thre a work around for this?
Example HTML:
<select onchange="$('select[name=\'zone_id\']').load('index.php?country_id=' + this.value + '&zone_id=');" name="country_id">
<option value="false"> --- Please Select --- </option>
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
</select>
I had the same problem, though with input fields rather than select. The browser form autofill feature doesn't fire any js events as far as I could see, so I ended up using setInterval to periodically validate the fields.