Suppose I have 2 areas separated by div containers, I need to send the Id values from the different areas, locally when the function is called in that container.
extract:
<script>
document.getElementById('compare_name").innerHTML = "Changed";
</script>
<div class = "details>
<span id="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span id="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
You cannot use same ID for more than one element. you can use name instead like below:
<script>
var x = document.getElementsByName("compare_name");
for(var i = 0; i < x.length ; i++){
x[i].innerHTML = "Changed";
}
</script>
<div class = "details>
<span id="compare_name" name="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span id="compare_name" name="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
As others indicates that, to follow the rule, the ID attribute should not be duplicated, but it doesn't matter if you don't rely on it.
I guess the asker might only need to change one text inside the div which is clicked, not all the spans, so just a little change.
<html>
<head>
<title>Test</title>
<script>
function add_compare(el) {
var divChildEles = el.parentNode.parentNode.childNodes;
for (var i=0; i<divChildEles.length; i++) {
if (divChildEles[i].nodeType==1 && divChildEles[i].nodeName=="SPAN") {
//console.log(divChildEles[i].innerText);
divChildEles[i].innerText='changed';
}
}
}
</script>
</head>
<body>
<div class = "details">
<span id="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare(this)">
</form>
</div>
<div class = "details">
<span id="compare_name">no2</span>
<form id="view-details1">
<input type="button" value="Add to Compare" onclick="add_compare(this)">
</form>
</div>
</body>
</html>
id in JavaScript must be unique. instead, you can give them a class with the same name
<script>
var x=document.getElementByClassName('compare_name");
for(var i=0;i<x.lengh;i++)
x[i].innerHTML = "Changed"
</script>
<div class = "details>
<span class="compare_name">no1</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
<div class = "details">
<span class="compare_name">no2</span>
<form id="view-details0">
<input type="button" value="Add to Compare" onclick="add_compare()">
</form>
</div>
Related
I have this html like
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="1" class="btn btn-primary" role="button">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="vote_id" value="2" class="btn btn-primary" role="button">Vote Now</button>
</form>
My question is, I want to click the button based on name and value with jquery or javascript, How to do this?
If I understand correctly, you mean, that you want to execute click if name and value attributes are matching on any button. You can try the following. You should have some event attached to that button, so you can see the effect.
I have attached onclick there and put correct names.
function clickButtons(name,value){
var elements=document.getElementsByTagName("button");
for(var i=elements.length-1;i>=0;--i)
{
var e=elements.item(i);
if(name==e.name&&value==e.value)e.click();
}
}
clickButtons("name_1",2);
<html>
<head>
</head>
<body>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_3" value="3" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
<form method="POST" action="?do=vote&page=vote-page">
<button type="submit" name="name_1" value="2" class="btn btn-primary" role="button" onclick="alert(this.name+', '+this.value)">Vote Now</button>
</form>
</body>
</html>
You should of course put correct names and value, I have also changed that.
HTML body:
<div id = "id1">
<input type="text" class="name">
<input type="button" onclick="myFunction(id1)" value="Click me">
</div>
<div id = "id2">
<input type="text" class="name">
<input type="button" onclick="myFunction(id2)" value="Click me">
</div>
JavaScript:
function myFunction(param)
{
var content = document.getElementById("param");
var x = content.getElementByClassName("name").value;
alert(x);
}
I want to use passed ID in the JavaScript function to get more values.
Pass the id parameters in to the onclick events as strings. Then give each text input a class of name, not an id (ids have to be unique to a single element). Finally, use the id param to find the container element using getElementById, and use querySelector to drill down to the text input.
function myFunction(param)
{
let el = document.getElementById(param)
let name = el.querySelector('input.name').value
console.log(name)
}
<div id = "id1">
<input type="text" class="name">
<input type="button" onclick="myFunction('id1')" value="Click me">
</div>
<div id = "id2">
<input type="text" class="name">
<input type="button" onclick="myFunction('id2')" value="Click me">
</div>
function myFunction(param)
{
var content = document.getElementById(param.id);
var x = content.getElementsByClassName("name")[0].value;
alert(x);
}
<div id = "id1">
<input type="text" class="name" id="name">
<input type="button" onclick="myFunction(id1)" value="Click me">
</div>
<div id = "id2">
<input type="text" class="name" id="name1">
<input type="button" onclick="myFunction(id2)" value="Click me">
</div>
here is the above working snippet of your question.
check the above changes here I used param.id instead of only param
also, your using the class selector so class selector gives response in array format so I had used getElementsByClassName("name")[0].value.
You can use querySelector to get the input value having type text
function myFunction(param)
{
var content = document.getElementById(param);
alert(content.querySelector('input[type="text"]').value);
}
<div id = "id1">
<input type="text" class="name">
<input type="button" onclick="myFunction('id1')" value="Click me">
</div>
<div id = "id2">
<input type="text" class="name">
<input type="button" onclick="myFunction('id2')" value="Click me">
</div>
function myFunction(btn){
const [input] = btn.parentElement.children;
console.log('input value: ' + input.value);
}
<div id = "id1">
<input type="text" class="name">
<input type="button" onclick="myFunction(this)" value="Click me">
</div>
<div id = "id2">
<input type="text" class="name">
<input type="button" onclick="myFunction(this)" value="Click me">
</div>
You can do something like below. i have kept id of text box different. And the ID is passed to the function from HTML. This is one of the approaches to get the value from the text-box.
Update: Used class on name text box. And fetch values for the element with class value of 'name'.
<div id = "id1">
<input type="text" class="name">
<input type="button" onclick="myFunction('id1')" value="Click me">
</div>
<div id = "id2">
<input type="text" class="name">
<input type="button" onclick="myFunction('id2')" value="Click me">
</div>
function myFunction(param) {
const divElement = document.getElementById(param);
const txt = divElement.getElementsByClassName('name')[0].value
console.log(txt);
}
JS fiddle: https://jsfiddle.net/sagarag05/Lm7fn6dx/10/
Let me know if this works.
Im trying it with laravel. On button click I need to display the same div .
My code:
<h6>Other features </h6>
<div id="add1">
<input type="text" name="selprice" />
<input type="submit" value="+" id="add">
</div>
This is my html code.Here,when I click the button**(ie.,+)** it should show up the same div(ie add1).
Script code:
<script type="text/javascript">
$(document).ready(function () {
$("#add").click(function () {
$("#add1").show();
});
});
</script>
This is what I have tried.
if you are cloning div use class instead of id.
use this context to get the click element
use append to add the cloned div to container
$(document).ready(function() {
$(document).on("click",".add",function() {
$("#container").append($(this).parent(".add1").clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Update
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type="submit" value="+" class="add"></div>';
$("#container").append(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Here you go with the solution https://jsfiddle.net/nuu4ofwu/2/
var cnt = 1;
$(document).on('click', 'input[type=submit]', function(){
cnt++;
var div = $(this).parent().clone();
$('body').append(div);
$('div:last-child').attr('id', 'add' + cnt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add" />
</div>
You should define another div as a template:
HTML:
<div id="template" style="display:none;">
<div id="add_2">
<h6>Other features</h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add_button_number"></div>
</div>
</div>
Javascript:
<script>
$('#add').click(function(){
var str = $('#add_2').html();
$('#add1').after(str);
})
</script>
please I want to apply fadeToggle for each button but it does not work with this method ,I try to apply with this How to use javascript variables in jquery selectors but not successful
this is Code HTML
<div id="ajouter" class="dropdown">
<ul>
<li>
<button class="projetbutton">Projet</button>
<form class="projet" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button class="famillebutton">Famille</button>
<form class="famille" style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
and this is script apply for the buttons
<script>
var classElement = ["projet", "famille"];
var button = "button";
for (var i = 0; i < classElement.length; i++) {
var classbutton = classElement[i].concat(button);
$(document).ready(function () {
$('.classbutton').click(function () {
$(".classElement[i]").fadeToggle();
});
});
}
</script>
Please if there is another method to do that job.
You can take advantage of the relation ship between element and various DOM traversal methods available to target element and then perform desired operation.
Associate the click handler using a common class, here used classbutton with the elements, then used .next() to get the form element.
$(document).ready(function() {
$('.classbutton').click(function() {
$(this).next().fadeToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajouter" class="dropdown">
<ul>
<li>
<button type="button" class="classbutton">Projet</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
<li>
<button type="button" class="classbutton">Famille</button>
<form style="display:none">
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</div>
Reffering to my previous question (about simple pocket calculator), I try to rewrite it using MVC pattermn. I understand the basics of MVC but to implement it is pretty difficult for a beginner. so my html code is :
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/SimpleCalculator.css">
<script type="text/javascript" src = "js/SC_Controller.js"></script>
<script type="text/javascript" src = "js/SC_Model.js"></script>
<script type="text/javascript">
new SC_Controller().init();
</script>
</head>
<body>
<h2>Simple Calculator</h2>
<div class="box">
<div class="display"><input type="text" readonly size="18" id="displayId"></div>
<div class="keys">
<p><input type="button" class="button black" value="7">
<input type="button" class="button black" value="8">
<input type="button" class="button black" value="9">
<input type="button" class="button orange" value="/">
</p>
<p><input type="button" class="button black" value="4">
<input type="button" class="button black" value="5">
<input type="button" class="button black" value="6">
<input type="button" class="button orange" value="*">
</p>
<p><input type="button" class="button black" value="1">
<input type="button" class="button black" value="2">
<input type="button" class="button black" value="3">
<input type="button" class="button orange" value="-">
</p>
<p><input type="button" class="button black0" value="0">
<input type="button" class="button black" value=".">
<input type="button" class="button orange" value="+"></p>
<p><input type="button" class="button greenc" value="C">
<input type="button" class="button yelloweq" value="="></p>
</div>
</div>
</body>
and my two JS filController.js are :
SC_Controller.js
var SC_Controller = function(scModel){
var model = scModel || new SC_Model();
var s = "";
function clicked(){
s += model.getValue();
alert(s);
model.setValue(s);
}
function init(){
document.getElementsByClassName("button").onclick = clicked;
}
return {
init : init;
model : model
};
};
and
SC_Model.js
var SC_Model = function(){
function getValue(){
return(document.getElementsByClassName('button').value);
}
function setValue(val){
document.getElementById('displayId').value = val;
}
return{
getValue : getValue,
setvalue : setValue
};
};
To implement a MVC pattern, I googled and found an example. I tried to adapt it to my calculator code, but launching the HTML, when I click a key the alert box in SC_Controller.js does not pop up. I can not understand why. Could you help me ?
The document.getElementsByClassName("button") returns a collection of nodes
(see https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName).
You need to iterate over them when applying the click handler as well as when requestion their .value.
For instance, the
document.getElementsByClassName("button").onclick = clicked;
should be
var buttons = document.getElementsByClassName("button");
for(var i=0;i<buttons.length;i++)
buttons[i].onclick = clicked;