Chosen js append search term to the drop down value - javascript

I am newbie in javascript and html5. I am trying to achieve the following:
I have a drop down with the below values:
Everything:
From:
To:
User will have a text box to enter the search term. When the user enters a text like "blah" and selects "From:" in the drop down and hits enter, the text in the text box should say
"From: blah" and searches all the messages from Blah.
This is a feature in Outlook that i am trying to implement. I have tried to use chosen js but could not proceed much. Could anyone provide any pointers?

Assume this is your html:
<select id="cmbClause">
<option value="1">Everything:</option>
<option value="2">From:</option>
<option value="3">To:</option>
</select>
<input type="text" id="txtSearch" />
<input type="text" id="txtResult" />
Then try jQuery script below:
$(function(){
$('#txtSearch').keypress(function(e) {
// if user press "Enter" on txtSearch and txtSearch not empty
if(e.keyCode==13 && $('#txtSearch').val().trim()!="") {
$('#txtResult').val(setClause($('#cmbClause').val()) + $('#txtSearch').val());
}
});
function setClause(val) {// Get select (dropdown) value and return string
var clause;
switch(val) {
case '1': clause = "Everything "; break;
case '2': clause = "From "; break;
case '3': clause = "To "; break;
}
return clause;
}
});

Related

How do I populate an html text input field based on an html select option

I'm working on an html page that will allow users to get pre-populated text filled into the text input field, based on the option they select. I'm trying to do this via javascript but I can't get the function to "fire" when I do an onchange within the select input field.
Trying to figure out what I'm doing wrong, either with the function, the innerHTML, or both.
Example code I'm working on below:
HTML
<label for='accountg'>Goal</label>
<select id="accountg" name="accountg" style="border-radius:1px;border:1px solid #003399;font-size:14px;width:50px;" onchange="accountSelect()">
<option value=''></option>
<option value='1'></option>
<option value='2'></option>
<option value='3'></option>
<option value='4'></option>
<option value='5'></option>
</select>
<input type="text" id="account1" name="account1" style="width:900px;" title="140 character maximum" />
JAVASCRIPT
function accountSelect() {
var aSelect = document.getElementById('accountg').value;
var account1 = '';
if(aSelect == '') {
} else if(aSelect == 1){
if(account1 == '')
{
var act1 = 'Outlines written policies and procedures to ensure consistent adherence by staff.';
document.getElementById('account1').innerHTML = act1;
} else {}
}
}
<input> doesn't have an inner content, it has a value though:
document.getElementById('account1').value = act1;

How do I get the value of a selected option an use it on an "if"?

I have this HTML:
<select id="categories">
<option value="category1">Category 1</option>
<option value="category2">Category 2</option>
</select>
<input type="search" id="search" placeholder="Search here" autofocus>
And this jquery:
var categories = $("#categories option:selected").val();
var search = $("#search");
if (categories = "category2") {
search.attr("placeholder", "Search for category 2");
} else {
search.attr("placeholder", "Search for category 1");
}
I'm trying to put a different placeholder according to the selected value, but no matter what is selected, it always show the first placeholder. This might seem silly, but further I want to be able to pick the value of the selected option to make the search in that specific category, kinda like the Amazon website.
I have used == to compare, but nothing happens, the placeholder stays with "Search here".
PS: With this code running, using the console on Chrome, if I type and execute categories it will always show in the console category2, no matter which one is selected, but if I type and execute $("#categories option:selected").val();, then it will show the selected value. I tried to put this directly inside the if in the code, but returned the same problem. I also tried to replace the else for if (categories = "category1"), but then it was the same problem, but this time the placeholder showed was always the second one.
//you should add an onChange event,like this:
$("#categories").change(function(e){
var categories = e.target.value;
if (categories == "category2") {
...
} else {
...
}
})

JavaScript - dynamic link depending on multiple DropDown Selections or Checkboxes

New to Javascript. Here is the story:
I need to create a dynamic link to redirect to one of the 6 different courses, depending on the options chosen by the user. This can be done via 3 dropdown menus or via 3 sets of checkboxes:
img. 1: http://i.imgur.com/oi8WYYv.png
or
img. 2: http://i.imgur.com/tRIdxBv.png
I tried to combine codes from several examples from stackoverflow, but it's a mess... Any idea is highly appreciated.
[edit 06.04.2015]
Thanks for your suggestions, but the story is a little more complicated:
The links are fixed, i.e. they are quite complicated to write it via a "generate" function (they are something like: base_url + id_1 + base_url_2 + id_2 + base_url_3)
There are 6 different courses, each one with its own link:
a) regular user - in English b) regular user - in German c) user with access to confidential data - in English d) user with access to confidential data - in German e) user manager - in English f) user manager - in German
To select the proper course, you would need to meet criteria from more than one form. I think there should be a lot of "if" statements in place in order to select the proper course via the questions. Or the questions are not the correct ones...
This is fairly trivial; all you have to do is check the values of each select tag, and set the href of the anchor accordingly.
Here's a tiny mockup:
window.onload = function(){
var select = document.getElementById('language');
var anchor = document.getElementById('next');
select.onchange = function(){
anchor.href = select.value;
}
}
Which is your preferred language?
<select id="language">
<option value="#">--------------</option>
<option value="http://stackoverflow.com/questions/tagged/javascript">JavaScript</option>
<option value="http://stackoverflow.com/questions/tagged/python">Python</option>
<option value="http://stackoverflow.com/questions/tagged/c%2b%2b">C++</option>
</select>
<br>
<a id ="next" href="#">Next</a>
Basically, I'm listening to onchange on the select element, and can therefore update the link whenever the chosen option changes.
If you aren't using an <a> anchor tag, but something else, for the Next page button, you can always just check the values before redirecting the user:
window.onload = function(){
var select = document.getElementById('color');
var next = document.getElementById('next');
next.onclick = function(){
switch (select.value){
case '1':
window.location.href = "http://blog.xkcd.com/2010/05/03/color-survey-results/";
break;
case '2':
window.location.href = "http://www.omglasergunspewpewpew.com/";
break;
default:
break;
}
}
}
What is your least favourite colour?
<select id="color">
<option value="1">puke</option>
<option value="2">The best color in the world!</option>
</select><br>
<button id="next">Next</button>
Basically, whatever you're doing, you can just check select.value, and perform an action accordingly.
first draft, not working but that's the best I got so far:
<script type="text/javascript">
window.onload = function(){
var language = document.getElementById('lang');
var confidential = document.getElementById('conf');
var manager = document.getElementById('mgr');
var next = document.getElementById('next');
next.onclick = function(){
switch (true){
case language === "isEnglish":
window.open('link/regular_user_in_English', '_blank');
break;
case language === "isGerman":
window.open('link/regular_user_in_German', '_blank');
break;
case language === "isGerman" && confidential === "isConf":
window.open('link/conf_in_German', '_blank');
break;
default:
break;
}
}
</script>
Which language would you prefer to do the training in?
<select id="lang">
<option value="isEnglish">English</option>
<option value="isGerman">German</option>
</select><br />
Are you a confidential data handler?
<select id="conf">
<option value="notConf">No</option>
<option value="isConf">Yes</option>
</select><br />
Are you a people manager?
<select id="mgr">
<option value="notManager">No</option>
<option value="isManager">Yes</option>
</select>
<br />
<button id="next">Next</button>

Read variable from dropdown

Im having trouble with a contact form and reading a variable from a drop down.
The code I have is this for the drop down:
<label for="Cttl">Title :</label>
<select name="Cttl" onchange='CheckCttl(this.value);'>
<option>Choose your title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="other">other</option>
</select>
<input type="text" name="Cttl" id="Cttl" placeholder="Please specifiy" style='display:none;'/>
When the other option is selected and the user enters something in the input box , the email sent from the form contains what they have typed, eg:
Title : What I typed
If they choose another option such as Mr or Mrs , the email comes back blank like this :
Title :
Is there any what to solve this?
Other code used in contact form:
the php for actually sending the email (works for inputs):
$title= $_POST["Cttl"] ;
The js used to save the user inputs for a summary:
Ctitle = _("Cttl").value;
I believe it has to do with the fact that both the select field and input field have the same name. You could always check the form in PHP with something like this to make sure the title has been filled in properly or one was chosen from your dropdown.
<?php
// Check if they selected other for the title
if($_POST['select-title'] == 'other') {
if(!empty($_POST['input-title'])) {
$title = $_POST['input-title'];
} else {
echo 'Your title is empty!'; // The input was empty
}
} else {
$title = $_POST['select-title']
}

Reply output to an input

I'm new to Javascript, but I understand this is possible in Python as well (which I know a little of)
Say someone inputs ‘Hi’
How do you output a ‘reply’ back.
But a different reply if something different is entered i.e.
If Hi is inputted 'Hello there' is outputted
If How are you is inputted 'fine thanks' is outputted
etc.
I'd also like for those (Hi, how are you, what are you doing) to be selected from a dropdown menu (this will be on an HTML page)
Thank you very much!!
Well, you would have a select menu (obviously):
<select id="greeting">
<option value="0">Select a greeting</option>
<option value="1">Hi</option>
<option value="2">Hello there</option>
<option value="3">How are you</option>
</select>
Then you'd attach an event listener to do something when the value of the select menu changes:
var sel = document.getElementById("greeting");
sel.onchange = function(){
...
}
Within the event handler you can then use the value of the selected option element to look up which greeting was entered and alert an appropriate response.
var greetings = {
"1": "How are you?",
"2": "Hello back!",
"3": "Not bad"
},
sel = document.getElementById("greeting");
sel.onchange = function(){
if(this.value !== "0"){
alert(greetings[this.value]);
}
}
fiddle

Categories

Resources