I want to select both button (color and size) in the same time and I want it focus like this >> enter image description here.
I want send data form focus button on form.
function show(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
.btn:focus{
border-radius: 20px;
color:#000;
}
.btn2:focus{
border-radius: 10px;
color:#D97476;
}
<form name="selectItem" method="POST" action="keepdata.php">
<div class="select-color">
<p>Select color</p>
<button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
<button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
<button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
</div>
<div class="select-option-s7">
<p>Select Size</p>
<button type="button" class="btn2 btn-color black" title="black">S</button>
<button type="button" class="btn2 btn-color silver" title="silver">M</button>
<button type="button" class="btn2 btn-color silver" title="silver">L</button>
</div>
<button type="submit">submit</button>
</form>
thank you
Why you not use input type="radio" ?
Use another class with style and with jquery add class on click button.
$('.select-color button').on('click', function(){
$('.select-color button.selected').removeClass('selected');
$(this).addClass('selected');
});
$('.select-option-s7 button').on('click', function(){
$('.select-option-s7 button.selected').removeClass('selected');
$(this).addClass('selected');
});
.selected{
border-radius: 10px;
color:#D97476;
}
.btn:focus{
outline: none;
}
.btn2:focus{
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="selectItem" method="POST" action="keepdata.php">
<div class="select-color">
<p>Select color</p>
<button type="button" name="scolor" class="btn btn-default black-s7" onclick="show('id1');">Black</button>
<button type="button" name="scolor" class="btn btn-default silver-s7" onclick="show('id2');">Green</button>
<button type="button" name="scolor" class="btn btn-default gold-s7" onclick="show('id3');">Red</button>
</div>
<div class="select-option-s7">
<p>Select Size</p>
<button type="button" class="btn2 btn-color black" title="black">S</button>
<button type="button" class="btn2 btn-color silver" title="silver">M</button>
<button type="button" class="btn2 btn-color silver" title="silver">L</button>
</div>
<button type="submit">submit</button>
</form>
Related
How to add number value when i click button?
For example
If i click 100,000 twice,
200,000 will be entered in the input.
$(document).ready(function() {
$('#myform button').on('click', function() {
$('#cvalue').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
Not trivial
const fmt = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
$(document).ready(function() {
const $cvalue = $('#cvalue');
$('#myform .button1').on('click', function() {
const val = +$(this).val().replace(/\D/g, "") + +$cvalue.val().replace(/\D/g, "")
$cvalue.val(fmt.format(val));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box">
<form id="myform">
<div class="inputdiv">
<input type="text" id="cvalue" class="money" value="0">
</div>
<button class="button1" type="button" value="100,000">100,000</button>
<button class="button1" type="button" value="200,000">200,000</button>
<button class="button1" type="button" value="300,000">300,000</button>
<button class="button1" type="button" value="500,000">500,000</button>
<button class="button1" type="button" value="1,000,000">1,000,000</button>
</form>
I have trying to create a calculator using the eval() function. But for some reason my numbers and operator buttons wont show on the screen(form). Below is my html and js code.
const btns = document.querySelectorAll('.btn');
var screenView = document.querySelector('.screen');
const equalBtn = document.querySelector('.btn-equal');
const clearBtn = document.querySelector('.btn-clear');
for (let i = 0; i < btns.lenght; i++) {
btns[i].addEventListener('click', function() {
let number = btns[i].getAttribute('data-num');
screenView.value += number;
})
}
equalBtn.addEventListener('click', function() {
let value = eval(screenView.value);
screenView.value = value;
})
clearBtn.addEventListener('click', function() {
screenView.value = '';
})
<section class="calculator">
<form>
<input type="text" name="" id="" class="screen">
</form>
<div class="buttons">
<button type="button" class="btn btn-digits" data-num="7">7</button>
<button type="button" class="btn btn-digits" data-num="8">8</button>
<button type="button" class="btn btn-digits" data-num="9">9</button>
<button type="button" class="btn btn-operators" data-num="/">/</button>
<button type="button" class="btn btn-digits" data-num="4">4</button>
<button type="button" class="btn btn-digits" data-num="5">5</button>
<button type="button" class="btn btn-digits" data-num="6">6</button>
<button type="button" class="btn btn-operators" data-num="*">*</button>
<button type="button" class="btn btn-digits" data-num="1">1</button>
<button type="button" class="btn btn-digits" data-num="2">2</button>
<button type="button" class="btn btn-digits" data-num="3">3</button>
<button type="button" class="btn btn-operators" data-num="-">-</button>
<button type="button" class="btn btn-digits" data-num=".">.</button>
<button type="button" class="btn btn-digits" data-num="0">0</button>
<button type="button" class="btn-clear btn-digits">C</button>
<button type="button" class="btn btn-operators" data-num="+">+</button>
<button type="button" class="btn-equal btn-digits">=</button>
</div>
</section>
You have a typo there: lenght instead of length.
Also, I feel obliged to say, that eval() should always be considered after everything
else failed, as the last resort.
So I am working on a website where you have one search bar and you can search with multiple websites like google, amazon, youtube and some more. My problem is, that all this is in one form and I can't use the name="q" which is working on the most search api's on amazon and wikipedia, because there are the names k (amazon) and search (wikipedia). Does anyone know how to change the name f the input for two buttons?
Here's the link: https://multi-search.bss.design/
<form target="_blank">
<input class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" target="_blank"><span><i class="fa fa-amazon animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span></button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?"><span><i class="fa fa-wikipedia-w animated"></i></span></button>
</form>
You could simply store a data- attribute on each button representing the corresponding name attribute (defaulting to q) and change it dynamically upon click.
e.g. :
<button ... type="submit" value="Wikipedia" data-search-input-name="search">
document.querySelectorAll('button[type="submit"]').forEach(function(submitButton) {
submitButton.addEventListener('click', function(e) {
document.querySelector('[data-input-search]').setAttribute('name',
this.getAttribute('data-search-input-name') || 'q');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input data-input-search class="form-control visible" type="search" name="q" autofocus="" autocomplete="off" id="input" placeholder="Search...">
<button class="btn btn-primary btn-circle" type="submit" value="Google" formaction="http://www.google.de/search" target="_blank" value="Google"><span><i class="fa fa-google animated" ></i></span>Google</button>
<button class="btn btn-primary btn-circle" type="submit" value="YouTube" formaction="https://www.youtube.com/search" target="_blank"><span><i class="fa fa-youtube-play animated"></i></span>YouTube</button>
<button class="btn btn-primary btn-circle" type="submit" value="Amazon" formaction="https://www.amazon.de/s/" data-search-input-name="k" target="_blank"><span><i class="fa fa-amazon animated"></i></span>Amazon</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Translate" formaction="https://translate.google.com/#auto/de/" target="_blank"><span><i class="fas fa-language animated"></i></span>Translate</button>
<button class="btn btn-primary btn-circle" type="submit" value="Google Images" formaction="http://www.google.com/images?q"><span><i class="fa fa-image animated"></i></span>Images</button>
<button class="btn btn-primary btn-circle" type="submit" value="Netflix" formaction="https://www.netflix.com/search?q"><span><i class="fa fa-film animated"></i></span>Netflix</button>
<button class="btn btn-primary btn-circle" type="submit" value="Wikipedia" formaction="https://en.wikipedia.org/w/index.php?" data-search-input-name="search"><span><i class="fa fa-wikipedia-w animated"></i></span>Wikipedia</button>
</form>
Note: only Wikipedia button works here as Google/Amazon block that from an iframe, but you can test Wikipedia.
You can for example:
1. Add hidden fields
<input type="search" name="q" onkeyup="updateHiddenFields()">
<input type="hidden" name="k">
and synchronize then using JS code:
const updateHiddenFields = (evt) => {
document.getElementsByName('k')[0].value = document.getElementsByName('q') .[0].value
};
2. Rename field when button is clicked:
document.getElementById('button-amazon')[0].onclick = () => document.getElementsByName('q')[0].setAttribute('name', 'k');
(Add id="button-amazon" to the Amazon button to make this working.)
I have a list of bootstrap buttons and also a search box and I want to implement a filter function(preferably in javascript) to filter the number of buttons:
The bootstrap code is here:
https://jsfiddle.net/7zyrdnab/
<div class="row">
<div class="col-lg-2">
<div class="panel">
<input type="text" id="search" placeholder="Type to search">
<br>
<button type="button" class="btn btn-secondary">AA1009</button>
<button type="button" class="btn btn-secondary">AA1010</button>
<button type="button" class="btn btn-secondary">BA1098</button>
<button type="button" class="btn btn-secondary">BB1890</button>
<button type="button" class="btn btn-secondary">C89761</button>
<button type="button" class="btn btn-secondary">CD1667</button>
<button type="button" class="btn btn-secondary">GG7830</button>
<button type="button" class="btn btn-secondary">GF65372</button>
<button type="button" class="btn btn-secondary">BH6537</button>
<button type="button" class="btn btn-secondary">HGB562</button>
<button type="button" class="btn btn-secondary">LK9063</button>
<button type="button" class="btn btn-secondary">CP9871</button>
<button type="button" class="btn btn-secondary">IRON87</button>
<button type="button" class="btn btn-secondary">ACT567</button>
<button type="button" class="btn btn-secondary">MPO760</button>
<button type="button" class="btn btn-secondary">GH5436</button>
<button type="button" class="btn btn-secondary">NBH894</button>
<button type="button" class="btn btn-secondary">GHFDF6</button>
<button type="button" class="btn btn-secondary">US4536</button>
<button type="button" class="btn btn-secondary">MO9854</button>
</div>
</div>
</div>
The filter should work like this:
if AA is typed, only the buttons with the text "aa" should be visible.
The only suggestion i got while searching online was use list.js but I was wondering if there can be a simpler javascript search implementation.
https://jsfiddle.net/Shuaso/qhku76bu/
The jquery:
var $button = $('.btn');
$('#search').keyup(function() {
var re = new RegExp($(this).val(), "i"); // case-insensitive
$button.show().filter(function() {
return !re.test($(this).text());
}).hide();
});
Basically you want to run the function each time the user types in the input to filter the elements. You are hiding all buttons that do not match the user input.
There's a simple textbox with a virtual keypad that toggles in and out as the user clicks the keyboard icon inside of the text box:
each letter is a clickable button and the idea is to populate the text box with the value of the button being clicked. Here's what I've done:
HTML
<div class="input-group col-md-4 col-md-offset-4">
<input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg">
<span class="fa fa-keyboard-o fa-2x lookup-icon"></span>
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button" id="lookup">Lookup</button></span>
</div>
<div id="virtualkeypad" class="col-md-offset-4 hidden">
<button id="key" class="btn btn-lg special-char-btn first-btn" type="button">á</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">é</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">í</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">ó</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">ú</button>
<button id="key" class="btn btn-lg special-char-btn" type="button">ü</button>
<button id="key" class="btn btn-lg special-char-btn last-btn" type="button">ñ</button>
</div>
JS
function toggler(divId) {
$("#" + divId).toggleClass("hidden show");
}
$(function(){
var $write = $('#word');
$('#key').click(function(){
var $this = $(this),
character = $this.html();
$write.html($write.html() + character);
});
});
However, I must be doing something very wrong because the above code doesn't seem to do anything. Could someone please help me fix it?
Update: As advised by sandeep s in his answer below, I removed the key ID from the buttons and added a new class spl-key instead. The HTML now looks like this:
<div class="input-group col-md-4 col-md-offset-4">
<input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg">
<span class="fa fa-keyboard-o fa-2x lookup-icon"></span>
<span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button" id="lookup">Lookup</button></span>
</div>
<div id="virtualkeypad" class="col-md-offset-4 hidden">
<button class="spl-key btn btn-lg special-char-btn first-btn" type="button">á</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">é</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">í</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">ó</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">ú</button>
<button class="spl-key btn btn-lg special-char-btn" type="button">ü</button>
<button class="spl-key btn btn-lg special-char-btn last-btn" type="button">ñ</button>
</div>
And I also changed the script as advised to:
function toggler(divId) {
$("#" + divId).toggleClass("hidden show");
}
$(function(){
$('.spl-key').click(function(e){
$(e.target).toggleClass("hidden");
character = $(e.target).text();
$('#word').val(character);
});
});
The problem, however, persists and button clicks are still unresponsive as before.
This should be your implementation:
$(function(){
$('.btn-lg').click(function(e){
$(e.target).toggleClass("hidden");
character = $(e.target).text();
$('#word').val(character);
});
});