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.)
Related
I have these 2 inputs (buttons)
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
<input *ngIf="isEdit" type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</div>
where if isEdit is false then I want to show the button "Add data" else I want to show the button "Update" but I wonder if there's a way to simplify this a bit more rather than using 2 inputs for each. Thanks in advance!
else capability was added somewhat recently; that's probably why most documentation doesn't have it (yet). But you can write this way:
<div class="modal-footer">
<button class="btn btn-secondary" (click)="close()">Close</button>
<input *ngIf="!isEdit; else update" type="button" class="btn btn-primary" (click)="addCustomer(myForm)" value='Add data'>
</div>
<ng-template #update>
<input type="button" class="btn btn-success" (click)="updateCustomer(myForm)" value='Update'>
</ng-template>
It works; but I don't know how much better it is compared to what you have.
I am trying to submit the form using Ajax, but it submitted the entered values twice. Could you please help me to prevent this issue? I tried several suggestions from the previous questions, but it did not work.
Thank you
Html Code:
<form id="ratingForm" method="POST">
<div class="form-group">
<h4>Rate this product</h4>
<!-- Start Star -->
<button type="button" class="btn btn-warning btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>
<!-- End Star -->
<input type="hidden" id="rating" name="rating" value="1">
<input type="hidden" id="itemId" name="itemId" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
<div class="form-group">
<!--Comment Start-->
<label for="usr">Title*</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="comment">Comment*</label>
<textarea rows="5" id="comment" name="comment" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" id="saveReview">Save Review</button>
</div>
<!--Comment End-->
</form>
Js Code:
$('#ratingForm').on('submit', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
dataType: "json",
url : 'action.php',
data : formData,
success:function(response){
if(response.success == 1) {
$("#ratingForm")[0].reset();
window.location.reload();
}
}
});
});
Php Code (This is action.php file):
Execution.php file inserts data into database using mysql.
<?php
session_start();
include 'class/Execution.php';
$rating = new Rating();
if(!empty($_POST['action']) && $_POST['action'] == 'saveRating'
&& !empty($_POST['rating'])
&& !empty($_POST['itemId'])) {
$rating->saveRating($_POST, $_SESSION['userId']);
$data = array(
"success" => 1,
);
echo json_encode($data);
}
?>
with the POST method your form may be submitting second time when it reload with window.location.reload(); you can simply redirect the page when ajax call successfully with window.location.href = "http://yourwebpage.php"; or window.location.replace("http://yourwebpage.php");
Can you try the below code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js Check</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
</head>
<body>
<div id="wrapper">
<form id="ratingForm" method="POST">
<div class="form-group">
<h4>Rate this product</h4>
<!-- Start Star -->
<button type="button" class="btn btn-warning btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
<!-- End Star -->
<input type="hidden" id="rating" name="rating" value="1">
<input type="hidden" id="itemId" name="itemId" value="<?php echo $_GET['id']; ?>">
<input type="hidden" name="action" value="saveRating">
</div>
<div class="form-group">
<!--Comment Start-->
<label for="usr">Title*</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="comment">Comment*</label>
<textarea rows="5" id="comment" name="comment" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info" id="saveReview">Save Review</button>
</div>
<!--Comment End-->
</form>
</div>
<script>
jQuery(document).ready(function($) {
$('#ratingForm').on('submit', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
dataType: "json",
url : 'action.php',
data : formData,
success:function(response){
console.log(response);
if(response.success == 1) {
$("#ratingForm")[0].reset();
window.location.reload();
}
}
});
});
});
</script>
</body>
</html>
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.
I need one help.I need to add input field name attribute dynamically using Javascript/Jquery. I am each time creating new field by clicking on + button and delete the required field by clicking on - button.I am explaining my code below.
function createNew(evt){
$('#questionshowp1').append('<div class="form-group"><input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
$(evnt).closest(".form-group").remove();
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
</div>
Here i am creating new field using + button and here i need to increment the name attribute value like questions0,questions1,questions2.... this.Suppose user delete any field then also this given order will remain with all field as name attribute value.Please help me.
Have a look attached snippet.
function createNew(evt){
var cur=$("input:text").length+1;
$('#questionshowp1').append('<div class="form-group"><input name="questions'+cur+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
var i=0;
$('input[type="text"]').each(function(){
$(this).attr('name', 'questions' + i);
$(this).attr('id', 'questions' + i);
i++;
});
}
function deleteNew(evnt){
$(evnt).closest(".form-group").remove();
var i=0;
$('input[type="text"]').each(function(){
$(this).attr('name', 'questions' + i);
$(this).attr('id', 'questions' + i);
i++;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
</div>
First of all, your aproach is pretty bad. It's not a good idea to put everything in a long string and place it somewhere in your JS. But, this is not your question.
Just create a new variable in your script for counting.
var count = 0;
And then increase the count in your createNew function and place the value everywhere you need it in your element string.
++count;
'<input name="questions' + count + '" id="questions' + count + '"'
That's it.
You simply have to count the number of clicks
and use that count in your script to have unique name attributes.
<script type="text/javascript">
var clicks = 0;
function createNew() {
clicks += 1;
var ques = "questions" + clicks;
$('#questionshowp1').append('<div class="form-group"><input name='+ques+' id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);"><i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
};
</script>
Create a global variable idCount in your script and in createNew function increment its value.
var idCount = 0;
function createNew(evt){
idCount++;
$('#questionshowp1').append('<div class="form-group"><input name="questions'+idCount+'" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text"><div class="secondsec"><button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button></div></div>');
$(evt).css('display', 'none');
$(evt).siblings("button.btn-danger").css('display', 'block');
}
function deleteNew(evnt){
$(evnt).closest(".form-group").remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionshowp" id="questionshowp1">
<div class="form-group">
<input name="questions0" id="questions0" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success exp-add" style="line-height:12px;" onclick="createNew(this);">+<i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger exp-minus" style="line-height:12px;display:none;" onclick="deleteNew(this)">-<i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
</div>
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);
});
});