How to check select statement choice before submission - javascript

I have a select area for the user:
<select class="span12" placeholder="Enquiry Type" name="enquiry" id="enquiry">
<option value='' selected></option>
<option value='cv'>Submit CV</option>
<option value='vacancy'>Submit Vacancy</option>
</select>
I have a hidden field in the form which allows the user to upload their cv. I now need it so that if the user selects submit cv, the field will display itself.
<input type="file" name="cv" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" style="display:none;">
I know that i would be able to check the user input of the select using an on click function. Is there a way of doing it without that (there and then)? And then if that option is selected, display the hidden file upload.

Try this:
$('#enquiry').on('change', function(e) {
if($(this).val() === "cv") {
$('input[name="cv"]').show();
}
});
This works:
http://jsfiddle.net/dL8evt33/
:)

You can achieve this by hooking to the change event of the select and checking the selected value. You can then use toggle() to hide or show the input as needed. Try this:
$('#enquiry').change(function() {
$('input[type="file"]').toggle($(this).val() == 'cv');
});
Example fiddle

remove display: none; first now do write this code.
$("[id$=fileupload]").hide();
if("[id$=enquiry]").val('cv')
{
$("[id$=fileupload]").show();
}
else
{
$("[id$=fileupload]").hide();
}

On change event you can display the input type file using its id. Give 'file' as id to hidden field -
$('#enquiry').on('change', function() {
if("cv" == this.value){
jQuery("#file").show(); // or jQuery("#file").toggle();
}
});

Related

Input boxes visible and works only on selecting a dropdown option

I created two input boxes to store some value. I have alotted a value for each inputs such that on entering those values only i should get the current button changed to a different one. Now I have two questions here-
On implementing this , I am not able to see the by default button which should be present here, instead I see the changed button which i wanted that too only when I enter the values i alotted in the input boxes. How can i fix this such that if i dont enter anything or enter wrong values in input boxes my default button should still be visible.
I want these two input boxes under a particular option lets say "XYZ" . This means when i choose "XYZ" then only these boxes should appear and work after providing values.
I am trying to use a dropdown here but not able to get the input boxes after clicking the dropdown option. They are side b y side the dropdown.
I am attaching some code to explain, cant attach whole code because of company policies.
XYZ:
<select id="xyz" name="xyz" onchange="renderxyzButton()">
<option Selected Disabled>Select</option>
<option value="XYZ">XYZ</option>
</select>
X:
<input type="text" size="50" id="x" name="x" />
Y:
<input type="text" size="50" id="y" name="y" />
document.querySelector("#xyz").addEventListener('change', function(e) {
e.somefunc();
if ($("#xyz").val() === "XYZ") {
renderxyzButton();
} else {
renderButton();
}
});
function renderxyzButton() {
if ($("#x").val() === "P") {
document.querySelector("#x").addEventListener('input', function(e) {
e.somefunc();
renderButton();
});
} else {
renderButton();
}
if ($("#y").val() === "C") {
document.querySelector("#y").addEventListener('input', function(e) {
e.somefunc();
renderButton();
});
} else {
renderButton();
}
}

How do I pass the value of drop down with form submit?

I have these 2 drop downs:
I have to provide values of Select Item drop down based on the value chosen in the Select Category drop down.
This is my PHP for Select Category drop down:
<form>
...
<select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px;font-size:18px;font-family:Roboto;" onclick="document.form.submit();">
<option value="" disabled selected>Select Category</option>
...
<input type="submit" name="submit" style="width:20%;padding:15px;" value="Update"</input>
...</form>
But nothing is happening. How do I do it?
Try onchange instead of onclick
<form>
...
<select name="category" id="category" value="category" class="form-control ddplaceholder" style="width:220px;font-size:18px;font-family:Roboto;" onchange="document.forms[0].submit();">
<option value="" disabled selected>Select Category</option>
...
<input type="submit" name="submit" style="width:20%;padding:15px;" value="Update"</input>
...</form>
Two more things you should notice
onchange="document.form.submit();" this will not work because
document doesn't have a property form it is forms so you should
use onchange="document.forms[0].submit();"
You have named your submit button as submit which will prevent the
form from submitting because submit is a javascript function so
rename your submit button to something else.
If you dont have many possible values for your dropdowns, you can use plain old javascript for that purpose. See this http://jsfiddle.net/mplungjan/65Q9L/, but it requires all values to be loaded at once on the page load like this:
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
document.form.submit(); will submit the form which is not the requirement.
Instead you need to make an ajax call with the selected value from first dropdown and the response will be use to build the options of second dropdown.
use change which will trigger on change of option
$('category').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value; // will give value of selected option
$.ajax({
url:"someUrl", // this url will return response from backend
// other methods
success:function(response){
//use this response to build the second dropdown
}
})
});

Binding an event handler to an HTML select.option

I want to show a warning message if a user selects a specific option, but the warning isn't appearing. How can I modify my code so that this works correctly? Here is a demo on jsFiddle which reproduces the problem?
HTML :
<input type="text" id="mail_address"/>
<select>
<option value='google.com'>google.com</option>
<option onClick="warningaa()" value=''>Don't send mail</option>
</select>
JS:
function warningaa() {
alert('If you choose this option, you can not receive any information');
}
You can not use on click action in dropdown option. One solution is to use change on select element:
html
<input type="text" id="mail_address" />
<select onchange="warningaa(this);">
<option value='google.com'>google.com</option>
<option value='error'>error</option>
</select>
js
function warningaa(obj) {
if(obj.value == "error") {
alert('If you choose this option, you can not receive any infomation');
}
}
fiddle
The option tag does not support the onclick event. Use the onchange event on the select instead.
HTML
<input type="text" id="mail_address"/>
<select id="selectbox" onchange="warning(this)">
<option value='google.com'>google.com</option>
<option value='warning'>Do not send me any kind of shit</option>
</select>
JS
function warning(obj) {
if(obj.value == 'warning') {
alert('If you choose this option, you can not receive any infomation');
}
}
You need to set an event handler on the SELECT element, and watch the "value" of select, as below:
document.getElementById('mySelect').addEventListener('change', warn, true);
function warn(e) {
e.preventDefault();
e.stopPropagation();
if (e.currentTarget.value === 'the value you want') {
// do something
} else {
return;
}
The key here is using CHANGE event vs CLICK, since you want to react to a "change in value" and if that value = something, warn the user.
using addEventListener is also a better approach overall, it clearly distinguishes your HTML from your JavaScript.
More on this here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
and here:
https://developer.mozilla.org/en/docs/Web/API/Event

How to append text to selected item in select2?

I'm trying to edit the selected value of a select2. So I did this simple code:
http://jsfiddle.net/rcky9/2/
HTML
<select id="sel" style="width: 100%">
<option value="1">Hello</option>
<option value="2">Friends</option>
<option value="3">Stackoverflow</option>
</select>
<br><br>
<button id="addok">Add OK</button>
JS
$(document).ready(function () {
$("#sel").select2();
$("#addok").click(function() {
actual_value = $("#sel").find(':selected').text();
if (actual_value.indexOf(" OK") > -1){
return
}
newtext = actual_value + " OK";
// this works.
$("#sel").find(':selected').text(newtext);
// this does not works.
$('#s2id_sel').find('.select2-choosen').text(newtext);
});
});
As you see, after pressing the button, looks like nothing had changed, but if you open the dropdown, the OK was added successfully at the current item.
The problem appears when I try to modify the actual value located in a div with select2-choosen css class. I can't access it by this way.
Do you have any idea, advice or tip to do this?
Firing the change() on select will show the appended ok, you need to trigger change() There is no element with id s2id_sel and class .select2-choosen to last statement wont change the text.
Live Demo
$("#sel").find(':selected').text(newtext).change();

Jquery add values from dropdown to text input

I'm having trouble trying to accomplishing this.. Whatever option I select from a dropdown list named programs_dropdown I want to add to a text field named programs_input and separate the options values by a comma.
e.g. php, jquery, html
Below the dropdown list I have an add div. On click, it should add what I selected from the dropdown to the text field.
$(document).ready(function(){
$('#add').click(function() {
var programs = $("#programs_dropdown").val(); //get value of selected option
$('#programs_input').val(programs.join(',')); //add to text input
});
});
HTML
<select name="programs_dropdown" id="programs_dropdown">
<option value="php">php</option>
<option value="jquery">jquery</option>
<option value="html" selected="selected">HTML</option>
</select>
<div id=add">Add</div>
<input type="text" name="programs_input" id="programs_input" />
I'm getting skill.join is not a function
The select has to multi option if you want to select multiple. Change it to
<select name="programs_dropdown" id="programs_dropdown" multiple>
Then it would start working.
Demo
EDIT:
$(document).ready(function(){
$('#add').click(function() {
var program = $("#programs_dropdown").val(); //get value of selected option
var programs = $('#programs_input').val().split(",");
if (programs[0] == "") {
programs.pop()
}
if ($.inArray(program, programs) == -1) {
programs.push(program);
}
$('#programs_input').val(programs.join(',')); //add to text input
});
});
DEMO
I think this is what you require Demo

Categories

Resources