Show a div when keyword is enter in search box - javascript

Basically what I want to do is show a div if a keyword has been entered in the search box. For example I type "Television" into the box and it will show a div an ID of Television, but I want to do this for about 5 results. Is this possible to be done with Javascript?
This is all I've got:
HTML:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>
Javascript:
function showDiv() {
document.getElementById('noresults').style.display = "block";
}
jsFiddle
Live site

You can use the onkeypress attribute to compare your text box value with predefined strings.
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeypress="checkMatch(this)">
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button>
function checkMatch(obj) {
/* get obj text and compare is to some other string */
}

Sure. your code would look something like this:
<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeyup="showDiv(this.value)">
<button type="button" name="answer" class="pure-button">Search</button>
</form> <script>
function showDiv(value) {
if (value.charAt(value.length - 1) == ' ')
document.getElementById('noresults').style.display = "block";
else
document.getElementById('noresults').style.display = "none";
}
</script>
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div>

So, as Tsikon has already answered You need to have an event defined for your text field and a JS function associated (showdiv()) with it
For eg: Onkeypress/Onchange and length of the field >0
You can probably think of displaying the div only when atleast 3 characters are entered by when you probably know what to display in div.

Related

How to get nearest previous input checkbox with name "checkthis" using queryselector on an element?

<input name="checkthis" type="checkbox">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckboxCheckthis">
How to get previous input checkbox with name "checkthis" using queryselector on an element?
function findPreviousInputcheckboxCheckthis(ev) {
checkboxCheckthis = ev.target.querySelector( "input[name='checkthis']);
}
Edit: There are many more input checkboxes with name="checkthis" before and after the snippet I posted. They are nested in other element also.
I simply want the nearest previous checkbox in the html-source starting from the target, nested or not.
Based on your below comment, I have updated the answer snippet where you need to add parent div structure and then you can find the checkthis name attribute quickly. Please check below working snippet:
function findPreviousInputcheckbdfoxCheckthis(ev) {
var selectElement = document.getElementById(ev);
selectElement.querySelector('input[name="checkthis"]').style.visibility = "hidden";
}
<div id="div1">
<input name="checkthis" type="checkbox" value="previous">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox" value="next">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckbdfoxCheckthis(this.parentElement.id)" placeholder="Previous checkbox">
</div>
Here, I have added div1 id and you can repeat the same by using using ID and rest the JavaScript will be same and it will find your first previous "name=checkthis" checkbox.
Hope this solution will be work for you!
Also, below is the link where I have used multiple repeat structure. Please refer it also:
https://jsfiddle.net/kairavthakar2016/3d8g49nm/96/

I am stuck with Checkbox Attribute

I recently start to learn JavaScript and have a question about checkbox Attribute.
I want to put Nickname feature that is if someone want to put his/her nickname, he/she can check the checkbox and it appears the text box for Nickname.
However, when the page is loaded, the text box is there even though the checkbox is not checked.
Can anyone please help me with the problem...?
<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>
<div id= "nick">
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
<script type="text/javascript">
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
document.getElementById('nick').style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
document.getElementById('nick').style.display="none";
}
}
</script>
</form>
</fieldset>
</p>
Set your initial display for the #nick div to 'none'. Your function only runs on change of the checkbox so you will need to ensure initial state on your own.
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
document.getElementById('nick').style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
document.getElementById('nick').style.display="none";
}
}
#nick {
display:none;
}
<fieldset>
<form>
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes" onchange="nicknameFunction()"/><br/>
</div>
<div id= "nick">
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
</form>
</fieldset>
You don't need JavaScript for this; in fact, you shouldn't use JS for this because accessing the dom is quite slow. CSS is more than sufficient. You can also make it animated by using width instead of display property, but for my example I only used the display property.
#yesNick:checked ~ #nickname {
display: block;
}
#nickname {
display: none;
}
<div>
<label for = "yesNick"> Nickname?:</label>
<input id="yesNick" name="yesNick" type="checkbox" value="yes"/><br/>
<label for = "nickname">Nickname:</label>
<input type="text" name="nickname" id="nickname"><br/>
</div>
<input type="submit" value="Vertify"/>
try hiding the textbox for the first time :
var nickName = document.getElementById('nick');
nickName.style.display="none";
function nicknameFunction() {
if (document.getElementById('yesNick').checked){
nickName.style.display="inline";
document.getElementById('nickname').setAttribute('required',true);
}
else{
document.getElementById('nickname').removeAttribute('required');
nickName.style.display="none";
}
}

Radio button selected shows a text box

I've searched a couple of questions on this site but couldn't find a helpfull one, the problem which I have is:
I have 2 radio form boxes, which are called 'Youtube' and 'Picture',I want this: When I click on the radio box of Youtube a text form shows up, I can't fix this and thats why I hope you do guys!
thank you for you time!
my Javascript:
<SCRIPT LANGUAGE="JavaScript">
$("input[type='radio']").change(function(){
if($(this).val()=="youtube")
if($(this).val()=="pic")
{
$("#youtube").show();
}
else
{
$("#youtube").hide();
}
});
</script>
My form:
echo '
<form action="post.php" method="post">
title: <input name="title" type="text" id="title"><br />';
//Picture link: <input name="pic" type="text" SIZE="80" id="pic"><br />
//Youtube link: <input name="youtube" type="text" SIZE="80" id="youtube"><br />';
echo '
<input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/> | <input type="radio" name="pic" value="pic">Picture <input style="display: none;" type="text" name="pic" id="pic"/><br />
Category game:
<select name="cat">';
while($row=mysql_fetch_array($query2)){
echo '
<option value="'.$row["nameID"].'">'.$row["name"].'</option> // here is the problem
'; }
echo '
</select>
<input type="submit" name="submit" value="submit">
</form>
';
Maybe you don't need to do the actual test. Just show the text field next to that input field.
Here's a sample:
http://jsfiddle.net/joeSaad/CTFJh/
$('input[type="radio"]').change(function(){
$('input[type="text"]').hide();
$(this).next('label').next('input[type="text"]').show(); });
Hope this helps.
I think you need do this..
$("input[type='radio']").change(function(){
if($(this).val()=="youtube")
{
$("#youtube").show();
$("#pic").hide();
}
if($(this).val()=="pic")
{
$("#pic").show();
$("#youtube").hide();
}
});
this will work fine, but you must be carefully >>look at this mate:
<input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/>
Picture
when you set a radio name, set the name of radio same..like youtube, youtube ...
also, look at a nother name in form, you use a same name for multiple elements, and this wrong mate, give another element defferant name .. to can get it on php side, without any error ...
good luck
You nested the if statements. The code would only be used if they are both true.
Your input type='radio' tags are not "closed" they should end with a slash as in:
input type="radio" name="something" value="something"/>
The text form that you complain about is already in your HTML code as
input style="display: none;" type="text" name="youtube"
id="youtube"/>
and
input style="display: none;" type="text" name="pic" id="pic"/>
By default it is not displayed hence style="display: none",
when your if statement evaluates as true, the display: none will be removed
Simplify, and un-nest your if statements as follows:
if($(this).val()=="youtube")
$("#youtube").show();
} else {
$("#youtube").hide();
}
This simply says if the radio button is the YouTube button, then show the youtube input, otherwise hide it.

how to get the value of the hidden fields in here after the radio button is clicked

Am trying to get the value of the hidden input fields on every click of a radio button. I have just posted a single div. I have a multiple div with same structure. I have successfully obtained the value of radio button but I want to get the value of hidden input now.
<div class="QA">
<h1> First Question</h1>
<input type="radio" id="check" name="q" value="A">Options 1</input>
<input type="radio" id="check" name="q" value="B">Options 2</input>
<input type="radio" id="check" name="q" value="C">Options 3</input>
<input type="radio" id="check" name="q" value="D">Options 4</input>
<input type="hidden" id="result" value="B" />
<br/>
<div id="result"></div>
</div>
<script>
$(document).ready(function() {
$("input:radio").change(function() {
checkResult(this);
});
});
function checkResult(el)
{
$this=$(el).parent("div.QA");
$this.slideUp();
}
</script>
Maybe you could try removing the hidden input entirely and indicate the correct answer using a data-* attribute. Something like:
<div class="QA" data-answer="B">
Then in your checkResult function you could retrieve this value using
function checkResult(el)
{
$this=$(el).parent("div.QA");
var answer = $this.data("answer");
$this.slideUp();
}
function checkResult(el)
{
$this = $(el).parents("div.QA");
$this.slideUp();
var x = $this.find('#result').val(); //find value of hidden field in parent div
}
Change your markup
multiple id's should not be used. Use class instead.
<input type="radio" id="check" name="q" value="A">Options 1</input>
to
<input type="radio" class="check" name="q" value="A">Options 1</input>
var $hidden=$(el).siblings("input[type='hidden']");
BTW you have lot of elements with same ID, not good
You can get the value of the hidden element by it's id.
var hiddenValue = $("#result").val();
You can use this in hidden function
function checkResult(el)
{
var hiddenValue = $("#result").val();
alert(hiddenValue);
}

setting values [jquery or javascript]

So I have an input box, and when a user types something in it I want a second textarea change its value to match that of the input's, on click. How can I do this using javascript, jquery, or something simpler, or php...
Here's my code:
This is the first input:
<form class="form1" action=../search.php method="post">
<input class="askInput" type="text" name="q" value="Search for tags and users or ask a question" onclick="if(this.value == 'Search for tags and users or ask a question') this.value='';" onblur="if(this.value.length == 0) this.value='Search for tags and users or ask a question';"></input>
<input class="searchEnter" type="image" name="submit" src="../Images/askQuestion.png"></input></form>
This is the textarea:
<div id="askCenter">
<img class="close" src="../Images/closeAsk.png"></img>
<h1><img src="../Images/askQuestionTitle.png" alt="Ask this question"></img></h1>
<textarea></textarea>
<span class="holder"><input type="text" value="add tags" onclick="if(this.value == 'add tags') this.value='';" onblur="if(this.value.length == 0) this.value='add tags';"></input>
<span class="note">∗ Tags are separated by commas</span>
</span>
<input class="askAway" type="image" src="../Images/askAway.png" alt="Ask away"/>
Without seeing your mark-up, something like this would work, albeit it's not tailored to your needs:
$('#first').keypress(
function(e){
var string = $(this).val();
$('#textarea').val(string);
});
$('form').submit(
function(){
return false;
});
JS Fiddle demo.
With your updated question, with the html from your forms:
$('input:text[name="q"]').keypress(
function(e){
$('#askCenter').find('textarea').val($(this).val());
});
TRY IT HERE
HTML MARKUP
<input type="text" id="inputField"></textarea>
<textarea id="textArea"></textarea>
JQUERY
$(document).ready(function(){
$('#inputField').keyup(function() {
$('#textArea').val($(this).val());
});
});
<input type="text" id="txt1" onkeyup="document.getElementById('txt2').value=this.value;"/>
<input type="text" id="txt2" />

Categories