Develop Reference

how to dynamically add REQUIRED attribute to input tags based on output of select tag using jquery?

I have a select tag with two options 'new' and 'edit'
when someone selects the 'new' option all the input tags in that form should be marked required and when someone selects 'edit' only a few should be marked required.
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>
Now I tried some functions but they don't seem to work
<script>
var todo = $('#todo option:selected').text();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
</script>
and
<script>
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectBox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
</script>
where
<select name="todo" id="todo" onchange="return req();" required></select>
just to be sure if it works I put a alert() method in the if condition, but that alert is never fired.
PS. one of the input tags is
<input type="text" id="Name" name="Name">
Thank you for your time in advance...
EDIT
As pointed out by #Maximillian Laumeister in second snippet there was a typo error (which I have corrected here). (sorry for that)

This should be ebough to get you going.
onchange detects whenever a different selection is made. Then based on what option is selected you perform the different instructions.
jQuery(document).ready(function(){
jQuery('#todo').on('change', function(event){
alert(this.value);
if(this.value === 'edit'){
}
else if(this.value === 'new'){
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>

In your script here you have a typo that throws a console error:
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectbox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
Where it says
selectBox.options[selectbox.selectedIndex].value
selectBox needs a capitalization like this:
selectBox.options[selectBox.selectedIndex].value
It seems to be working for me with that one change.
Also, since you asked, your first script isn't working because it needs to be bound to run when the select changes, just like with the first one. In addition, you need to use jQuery's val instead of text to get the value of an option tag. Here is a working version of your second script:
$("#todo").change(function () {
var todo = $('#todo option:selected').val();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
});

Try this:
$("select").change(function(){
if($(this).val() === "new")
$("#Name").attr("required","required");
});
You used the option text which is "Add" but in your if statement you compared it to the string "new". That's the reason your code didnt work as expected.

Hide Element with JS due to two conditions

I'm not that familiar with JavaScript. What I was doing so far was to hide a part of my form (see below: "Memo"), when someone changed an input-text-field via onchange (field-name: "ordernumber").
Therefore I'm using this funktion:
<script language="JavaScript" type="text/javascript">
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true) dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Meno").style.display = "inline";}
}
</script>
This works pretty fine, but now I'd like to add another condition from a dropdown (select option). In other words: When you change ordernumber AND select a certain option, "Memo" should disappear. I tried a lot, but I can't get it to work properly. This was my latest try:
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true && document.getElementById("system").value == "sys1") dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Memo").style.display = "inline";}
Two things are not working right with this one: It performs when only one of the conditions is true (although I used &&) and it seems to be unrelevant which option from the dropdown ist selected. Right now it performs with every option, but it should only perform with "sys1".
BTW: I added onchange="javascript:takeawayfield()" to both of the affected form-elements (input text and select option). I guess that's right?
What am I doing wrong?
Thanks in advance!
EDIT:
Here are the html-tags:
<input type="text" name="ordernumber" id="ordernumber" value="<?php echo htmlspecialchars($ordernumber); ?>" onchange="javascript:takeawayfield()">
<select name="system" id="system" onchange="javascript:takeawayfield()">
<option value="sys1">System 1</option>
<option value="sys2">System 2</option>
<option value="sys3">System 3</option>
</select>

Try this:
var dok = 0,
initialValue = "",
ordernumber = null,
system = null,
memo = null;
window.onload = function() {
// get dom objects
ordernumber = document.getElementById("ordernumber");
system = document.getElementById("system");
memo = document.getElementById("Memo");
// set initial value
initialValue = ordernumber.value;
};
function takeawayfield() {
if (ordernumber.value != initialValue && system.value == "sys1") {
dok = 0;
memo.style.display = "none";
} else {
dok = 1;
memo.style.display = "inline";
}
};
jsFiddle

If you want to react to changes by the user after the page has loaded you could listen to the keyup event of the input box and the dropdown.
Here's an example:
window.onload = function() {
document.getElementById("ordernumber").addEventListener('keyup', takeawayfield, false);
document.getElementById("system").addEventListener('change', takeawayfield, false);
function takeawayfield()
{
if (document.getElementById("system").value == "sys1") {
toggleMemo(false);
}
else {
toggleMemo(true);
}
}
function toggleMemo(show) {
var memo = document.getElementById("Memo");
if (show) {
memo.style.display = "inline";
}
else {
memo.style.display = "none";
}
}
};
http://jsfiddle.net/je5a7/

If your dropdown (select/option) have values in the option tag then the code below should be work fine. (after the user selects)
The select for example:
<select id="system">
<option value="sys1">system 1</option>
</select>
Your code
document.getElementById("system").value == "sys1"
OR you change your code:
if (document.getElementById("ordernumber").changed == true) dok=1;
else dok=0;
if (document.getElementById("system").value == "sys1") dok=1
else dok=0;

Run a js function onchange()

This seems like a simple problem, but I don't get why it's not working for me. I have a dropdown menu and image. The image changes based on what is selected in the dropdown menu, but I don't understand why my function isn't being triggered.
<select onchange="changeImage()" id="samples">
<option value="Cpp">C++ Example</option>
<option value="Mobile">Mobile Applications Example</option>
</select>
and the javascript
<script>
function changeImage()
{
var selection = document.getElementById("samples");
var image = document.getElementById("shown");
if(selection.value == "Cpp")
{
image.src="images/CppCoursesCapture.JPG";
}
else if(selection.value == "Mobile")
{
image.src="images/MobileQuizCapture.JPG";
}
}
</script>
The function doesn't change the image though
EDIT: missed some perenthesis

A lovely jsbin.com demo
You should take a less obtrusive approach
<select id="samples">
<option value="Cpp" data-image="images/CppCoursesCapture.JPG">C++ Example</option>
<option value="Mobile" data-image="images/MobileQuizCapture.JPG">Mobile Applications Example</option>
</select>
Then in JavaScript
// implementation
function updateImage() {
var selected = this.options[this.selectedIndex];
var image = document.getElementById("shown");
image.src = selected.getAttribute("data-image");
}
// target SELECT
var elem = document.getElementById("samples");
// change event
elem.addEventListener("change", function(event){
updateImage.call(this);
});
// initialization
updateImage.call(elem);

You need to wrap your conditions in parenthesis:
if (selection.value == "Cpp")
..and...
else if (selection.value == "Mobile")
If you run your developer tools, it will pick up that your syntax is incorrect.. and breaking the script.

function changeImage()
{
alert("Function Called");
var selection = document.getElementById("samples");
var image = document.getElementById("shown");
if (selection.value == "Cpp")
{
image.src="images/CppCoursesCapture.JPG";
}
else if( selection.value == "Mobile")
{
image.src="images/MobileQuizCapture.JPG";
}
}
forgot brackets ?

Thanks for the help guys, my issue was the->
if selection.value = cpp
instead I missed the parenthesis and quotations
if(selection.value = "cpp")

I suggest storing the path to the image as the value for the option and using that to change the image src. The following shows how to do this for a background image but it can be easily adapted for an image tag.
The advantage of doing it this way is that you can simply add more options to the select and they will work without needing to modify the javascript.
set background image from dropdown menu - javascript
<select id="samples">
<option>Select an image</option>
<option value="http://t2.gstatic.com/images?q=tbn:ANd9GcT-wQk0CTwl93EmiaUaoIjpMVmwHDNBz_7hN0UNpAz5DCWq66Sp-w">C++ Example</option>
<option value="http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg">Mobile Applications Example</option>
</select>
<img id="image" />
$(document).ready(function()
{
var image = $('#image');
$('#samples').bind('change', function(event){
var img = $(this).val();
if(img == null || typeof img === 'undefined' || $.trim(img) === '')
image.removeAttr('src');
else
image.attr('src', img);
});
});
Here is a JS fiddle illustrating how to do this for your purposes:
http://jsfiddle.net/hKBtp/5/

Try this fiddle:
http://jsfiddle.net/yQBz7/1/
<script>
function changeImage()
{
var selection = document.getElementById("samples");
var image = document.getElementById("shown");
if(selection.value == "Cpp")
{
image.innerHTML="<img src='http://www.techiesin.com/wp-content/uploads/2013/07/c-logo.jpg' />";
}
else if(selection.value == "Mobile")
{
image.innerHTML="<img src='http://www.truste.com/blog/wp-content/uploads/MobileAppDevelopments1.jpeg' />";
}
}
</script>

How to HIDE element based on IF statement when onClick is used

I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value="some_url" inside the option, then I want the image to show.
I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value="".
Here is the Javascript I'm using:
function showImage() {
document.getElementById('openimg').style.display = 'block';
Here is the html:
<select name="" >
<option value="url" onclick="showImage();">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to "show if" or "hide if" along with the onClick command within each option.

this is how I would do it:
<script type="text/javascript">
function showImage()
{
var choice = document.getElementById('myDropDown').value;
if(choice.length > 0)
{
document.getElementById('openimg').style.display = 'block';
}
else
{
document.getElementById('openimg').style.display = 'none';
}
}
</script>
<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>

Um, are you asking how to use an if or how to determine what is selected?
First of all, use onchange event in the dropdown.
This is the LONGHAND way of doing it for illustration purposes.
function onChange(){
var mySelect = document.getElementById("my-select");
var selectedValue = "";
for( var i = 0; i < mySelect.length;i++){
if( mySelect[i].selected)
selectedValue = mySelect[i].value;
}
if( selectedValue == "whatever")
{
//do something
}
if( selectedValue == "ugh")
// do something else
}

How do can I have a dropdown list(select HTML) where i want to have one of the options where i allow the user to enter a user specif entery?

I want to have a drop down menu where a user can select from several predefined options but i also want to give him the option of inserting a user specific value, i was thinking having one of the options as "user specific" which will in turn allow the user to insert a user specif entry in a text box that appears or is editable when user selects the "user specific" option. any one have any ideas how i can implement this is HTML and Javascript?
thank you

Attach an onchange event to the select and when he selects "Custom" or something like that, make some input visible below the select. This input should be initially hidden (css display:none). When the user selects "custom" make it display:inline.

Jukka wrote an article on how to create a combobox-like effect. I've only skimmed it, but it looks accessible and his content is usually of very high quality.

You can go about like:
<select id="myid" onchange="doIt(this);">
optons...
</select>
<script type="text/javascript">
function doIt(field) {
if (field.value === 'user specific')
{
var tbox = document.createElement('input');
tbox.setAttribute('type', 'text');
document.form_name.appendChild(tbox);
}
}
</script>

See here: http://jsfiddle.net/EscRV/
html
<select id="mySelect">
<option>value 1</option>
<option value="[new]">new</option>
</select>
js
// get a cross-browser function for adding events, place this in [global] or somewhere you can access it
var on = (function(){
if (window.addEventListener) {
return function(target, type, listener){
target.addEventListener(type, listener, false);
};
}
else {
return function(object, sEvent, fpNotify){
object.attachEvent("on" + sEvent, fpNotify);
};
}
}());
var mySelect = document.getElementById("mySelect");
on(mySelect, "change", function(){
if (this.value === "[new]") {
var newOptionName = prompt("input new option");
if (newOptionName){
mySelect.options[mySelect.options.length] = new Option(newOptionName);
this.value= newOptionName;
}
}
}); ​

Following code will help to solve your problem.
<html>
<head></head>
<body>
<select id="sbox">
<option value="1" onclick="hideUserOption();">First option</option>
<option value="2" onclick="hideUserOption();">second option</option>
<option value="3" onclick="showUserOption();">User Specific</option>
</select>
<div id="userOptions" style="display:none">
<input type="text" />
<input type="submit" value="Save"/>
</div>
<script type="text/javascript">
function showUserOption() {
var userOptions = document.getElementById("userOptions");
userOptions.style.display = "block";
}
function hideUserOption() {
var userOptions = document.getElementById("userOptions");
userOptions.style.display = "none";
}
</script>
</body>
</html>