Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last month.
Improve this question
what the result looks like
I'm making a product inventory system; where I can simple change the value with number inputs, hit the checkmark, and be done. But I'm having trouble getting the specific value.
php:
<?php
$get_prod = $con->query("SELECT * FROM products");
while($get = mysqli_fetch_array($get_prod)){
echo '
<div class="prod-inv">
<div class="prod-inv-top">
<h1>'.$get['prod_name'].'</h1>
<h2>'.$get['prod_price'].'</h2>
</div>
<div class="prod-inv-body">
<img class="image-manage" src="'.$get['prod_cover'].'">
<input id="'.$get['prod_id'].'" type="number" class="num" value="1"/>
<button id="'.$get['prod_name'].'" class="btn search">✓</button></a>
</div>
</div>';
}
?>
jquery:
<script type="text/javascript">
$("button").click(function() {
var target = this.id;
var value = $(target).val();;
alert(value);
});
</script>
I've tried everything from form GET, to href links, now jquery. So far nothing has yelded results.
[1] Firstly, I'm not familiar with PHP, but it seems that closing anchor tag mistakenly presents in the markup:
<button id="'.$get['prod_name'].'" class="btn search">✓</button></a>
Or maybe opening anchor tag is missing...
[2] Secondly, in following line:
var target = this.id;
context "this" is currently clicked button, this code takes clicked button id and then in this line:
$(target)
you're taking currently clicked button DOM element by it's id, but it is already stored in "this"
[3] when you want to query element by id, you have to prepend it with hash "#":
$('#' + target)
So, you see the issue, when button is clicked, you take it's id, then find this button on the page again by it's id and then try to take .val() from a button (which actually does not have a value, it is not an input)
Suppose, you wanted to achieve following:
button is clicked -> find input near this button -> take value of this input
$('button').click(function () {
var value = $(this).closest('.prod-inv-body').find('input').val();
console.log(value);
});
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have question. Is there any way for html or javascript?
I have adf.ly referral link(example): adf.ly/12345 + link.
To download my source download file1 i input link as: adf.ly/12345/https://example.com/downloadfile1
For file2 link i input adf.ly/12345/https://example.com/downloadfile2
.. and so on for many links.
But one day I need to change my referral link from adf.ly/12345 to adf.ly/6789
So i need to change above link one by one:
adf.ly/6789/https://example.com/downloadfile1
adf.ly/6789/https://example.com/downloadfile2
.. and so on.
My question, is there any way to auto change any link start from adf.ly/12345+url to adf.ly/6789+link, using html or JavaScript?
I try to search the topic, but I'm just beginner. I cant find any or maybe wrong search.
Suppose you are using two input tags, first to get input for the initial url and in the next input field insert the new url, when clicking the button, it will replace the existing url with the new one everywhere.
function replaceUrl () {
let initial = document.getElementById("initial").value;
let replace = document.getElementById("replace").value;
let url = ['shorte.st/abc123/https://example.com/downloadfile2', 'adf.ly/12345/https://example.com/downloadfile2']
url = url.map((u) => u.includes(initial) ? u.replace(initial, replace) : u)
console.log(url)
}
Enter first part <input type="text" id="initial"/>
Enter second part <input type="text" id="replace"/>
<input type="button" value="Change" onclick="replaceUrl()">
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I would like to make a button which I can put on "true/false" on a certain time with javascript. I want to make a flickering button. How could I do this in Javascript?
I tried something like this:
<td colspan="1" class="button" tabindex="1">
<input type="radio" tabindex="-1">
</td>
__
setTimeout(function() {
$("*[tabindex='1']").find('input').get(0).checked = true;
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_radio
(This button)
This checks/unchecks the button randomly and you can certainly change the logic behind when the button should be on vs. off, but it shows how to check and uncheck the radio button natively (no JQuery) with the addition or removal of the checked attribute on the Radio Button.
var btn = document.getElementById("rad");
setInterval(function(){
var rnd = Math.random();
console.log(rnd);
rnd > .5 ? btn.setAttribute("checked", "checked") : btn.removeAttribute("checked");
}, 500);
<input id="rad" type="radio">
Your code will work if you put the <td> element inside <table> tags.
If the <td> is outside of a table element, it is removed so you cannot access the radio button by searching for the parent td.
To make the button flicker, try having the function reset itself:
function buttonOnAfterDelay()
{
var $radioButton = $("*[tabindex='1']").find('input').get(0);
if ($radioButton.checked)
$radioButton.checked = false;
else $radioButton.checked = true;
setTimeout(function() {buttonOnAfterDelay()}, 1000);
}
buttonOnAfterDelay();
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
So,
How to check with JavaScript if DIV has that classname? Here's an example HTML
<div class="cart"></div> that would be the parent and then JavaScript creates under that div's upon a click, but if it's already there and you click the item then it's just going to remove it. Example: Button is yellow and if you click it, it add's item to the cart and changes button class to selected. If you click it again, it will remove selected class and also remove item from the cart. I do have a code for the clicking part and adding it to cart, but not for removing it.. How could I do it?
JavaScript
$(".item-card").mousedown(function() {
$(this).toggleClass("selected-item");
var itemnume = $(this).find("img").attr("title");
$("#itemcart").append($("<div id="+itemnume+">"+itemnume+"</div>"));
});
Here it adds the item to the cart, but if you would reclick it, it will do it again. I've tried write a function, which checks that is the item already in cart, if it is then remove it, if not then add it, but I never succeed. I think that would solve my problem though.
try the following:
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
if ($(this).hasClass('selected-item')) {
console.log()
$("#" + replaced).remove();
} else {
$("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
}
$(this).toggleClass("selected-item");
});
https://jsfiddle.net/0tusd19b/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
for example, you would have
<input id="searchbox" type="text" value="Type Here..." />
<button id="clickbait">Click Me</button>
<div id="emptydiv">sda</div>
<script type="text/javascript">
var clickthis="clickbait";
var searchinput=document.getElementById("searchbox").value;
var generate="emptydiv";
document.getElementById(clickthis).onclick=function () {
searchinput=document.getElementById("searchbox").value;
document.getElementById(generate).innerHTML=searchinput;
}
</script>
So this is pretty much just something to change the text in the empty div to whatever is in the text field when you click on the button but I don't understand the "idea" of what's going on here. I already set the var to a value so why do you need to grab the value again?
I can understand the other basics so far like document(refers to the whole page) then getelementbyid(refers to the element) and then on the click you want it to perform a function but everything after that is confusing.
I already set the var to a value so why do you need to grab the value
again?
When you set the searchinput value first before the onclick assignment, you fetched and assigned the value of searchinput at that time.
Inside the click event handler, you are getting the value in searchinput when the div is clicked so the value at that time might be different.
When its firing click event then searchinput=document.getElementById("searchbox").value;
that means searachinput is what everever typed in the input feild
and then that value is being reassigned to
document.getElementById(generate).innerHTML=searchinput;
`
When the button is clicked fire the event:
document.getElementById(clickthis).onclick=function ()
Get the value of 'searchBox':
searchinput=document.getElementById("searchbox").value;
Assign what ever was in the 'searchBox' as HTML in 'emptyDiv'
document.getElementById(generate).innerHTML=searchinput;
Just to note that:
searchinput=document.getElementById("searchbox").value;
Is actually redundant because you are already declaring it with the other vars.
So your code should look like this:
document.getElementById('clickbait').onclick=function () {
var searchinput = document.getElementById("searchbox").value;
document.getElementById('emptydiv).innerHTML=searchinput;
}
Or to make it even simpler and cut it down to 2 lines you could even use jQuery:
$('#clickbait').on('click', function(){
$('#emptydiv').innerHTML = $('#searchbox').value;
}
It copies the value of input into the "emptydiv" div when you click on the button.
Why is the real good question, here, IMO.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
$(document).ready(function(){
$("#sakla").click(function(){
$(".askforum").hide();
});
$("#getir").click(function(){
$(".askforum").show();
});
Hi ! how can I combine two button function to one button ? I want to run two functions with one button. the button name should change when I clicked if its show it must be become hide. thanks
Use toggle to toggle between shown and hidden. Change the two buttons into one button, and bind the click event to that button alone.
$(document).ready(function(){
var button = $('#thatnewbutton');
button.click(function(){
var forum = $(".askforum");
forum.toggle();
button.text(forum.is(':visible')?'Hide':'Show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="thatnewbutton">Hide</button>
<div class='askforum'>Content</div>
Here is a simple demo:
$(function() {
$('.toggle').on('click', function() {
var txt = $(this).text().trim();
$(this).text( txt == 'HIDE' ? 'SHOW' : 'HIDE' );
$('.whattotoggle').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="toggle">HIDE</button>
<div class="whattotoggle">Toggle This</div>
$(document).ready(function(){
$("#thatnewbutton").click(function(){
$(".askforum").toggle();
});
});
Alternatively for changing the name, find attr name of the button and accordingly change it using attr function.
How can I set the Name attribute of an input field using Jquery?
Cheers!