I have a list of cards of my website and all the cards contain a submit button. I want that when the submit button is clicked, I can get the details of the cards such as the status of the switch and the name of the equipment on that particular card. How do I achieve this?
Below is how my cards look like. Let us assume that I put a button on each of the cards, then I want this to happen on the click of that button.
This is the structure of my card, but I have no idea as to how to achieve the above said thing, due to which I haven't been able to begin with anything
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content white-text">
<span class="card-title">Air Conditioner</span>
</div>
<div class="card-action" id="action">
<div id="status">ON</div>
<div class="switch">
<label> on <input type="checkbox"> <span class="lever"></span> off </label>
</div>
</div>
</div>
</div>
</div>
I would be obliged to receive a swift response from the community! :D
EDITED:
You haven't provided much info or shown any code that you're using, so I'm going to provide a general answer and assume you're using jQuery.
So, say you have a card like this:
HTML:
<div class="card">
<input id="checkbox-1" type="checkbox">
<button id="button-1">Get value</button>
</div>
You could use jQuery to get the value:
// Wait for jQuery to load,
$(document).ready(function() {
// when #button-1 is clicked,
$("#button-1").click(function () {
// save the value of #checkbox-1 as a variable,
var myValue = $("#checkbox-1").is(':checked');
// and test it to confirm it worked.
console.log(myValue);
});
});
Related
so I have a page. there's a search bar. if the search bar has no text inputted, the page displays two partials, one for featured apps and one for most popular. but if someone inputs any text at all into the search bar then the featured apps and most popular apps partials disappear and the search results partial shows up. instead what happens is neither partials load. there's just a big blank space where they should be.
I tried doing this with jQuery but was having no luck. so now I'm back to trying to use dynamic partials but am also having no luck with that. if this can only be done with something like jQuery please let me know.
I was briefly trying to use a handlebar helper but I could not link it to the input id="searchApps" element without throwing an error because it keeps saying searchApps is undefined.
index.hbs (if this is missing any divs it's cause it's just part of the code)
<div class="col-2 offset-1">
<div class="column-side">
<div class="sidebar">
<input id="searchApps" type="text" placeholder="Search apps...">
{{!-- so once someone types the first character here the searchResults partial should render. and it should be dynamic so results should further refine with each additional character typed--}}
{{>sidebar}}
</div>
</div>
</div>
{{#if 'searchApps.length === 0'}}
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
{{else}}
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
{{/if}}
here is the jQuery I tried in the index.hbs file just before the </body> tag
<script type="text/javascript">
$('#searchApps').on('change', function(){
if ($(this).val() == ""){
<div id="homePageNoSearch">
<div class="col-7 offset-1">
{{>featuredApps}}
</div>
<div class="most-popular-grid">
{{>mostPopularApps}}
</div>
</div>
} else {
<div id="searchResultsHomePage">
<div class="col-7 offset-1">
{{>searchResults}}
</div>
</div>
}
});
</script>
so anyone know how I can do this?
thanks
I'm having some problems swapping two HTML elements in JavaScript. In the HTML below I want to switch the divs with id of "ans1" with that of id "ans2" using the buttons with id "down1" and "up1".
I don't want to specifically select "ans1" and "ans2" because this is an ordering quiz and the first child element of container 1 and 2 may need to be moved again using these same buttons.
<div id="quiz" class="quiz-container d-none">
<div id="question" class="quiz-question"></div>
<div id="container1" class="answer-container">
<div id="ans1" class="answer"></div>
<div class="button-container">
<button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>
</div>
<div id="container2" class="answer-container">
<div id="ans2" class="answer"></div>
<div class="button-container">
<button id="up1" class="up1"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button>
</div>
In JavaScript I've been trying various versions of the code below. Sometimes the two elements just disappear and sometimes the whole parent element switches position instead of just the child. Can anyone please let me know the correct syntax for switching these two elements so that the child elements can be switched multiple times using the same button?
$('#container1:first').appendTo( $('#container2') );
Pretty easy to do with vanilla JS.
document.getElementById('btn').addEventListener('click', () => {
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
c2.appendChild(c1.firstElementChild);
c1.appendChild(c2.firstElementChild);
});
<div id="c1">
<div>item 1</div>
</div>
<div id="c2">
<div>item 2</div>
</div>
<button id="btn">switch</button>
N.B. this relies on the fact that I'm appending an element to the end of the container, so the firstElementChild will still pick up the correct element. You can store these elements in vars before you do the swapping if needed.
I think that this link will help you to solve your problem
How to swap div using Jquery .
Apparently you can not set two divs with the same id using jquery that is why he set a third variable to achieve his goal
Thank you for your response. The code works to a certain extent. When I push my "down1" button the 2 elements do switch positions but when I push it again to swap them back, the buttons instead switch positions. When I push the button again(which is now in a wrong position)the elements then switch back and I have to push the button a 4th time to get the buttons back to the way they were too. I've also tried to select a 2nd Id "up1" button to also carryout the same function but this button doesn't work at all. Do you have any ides on on to fix this. I'll share my current code below
document.getElementById("down1", "up1").addEventListener('click', () => {
answerTwoContainer.appendChild(answerOneContainer.firstElementChild);
answerOneContainer.appendChild(answerTwoContainer.firstElementChild);
});
<div id="quiz" class="quiz-container d-none">
<div id="question" class="quiz-question"></div>
<div id="container1" class="answer-container">
<div id="ans1" class="answer"></div>
<div class="button-container">
<button id="down1" class="down first-button"><i class="fas fa-chevron-down"></i></button></div>
</div>
<div id="container2" class="answer-container">
<div id="ans2" class="answer"></div>
<div class="button-container">
<button id="up1" class="up"><i class="fas fa-chevron-up"></i></button><button id="down2" class="down"><i class="fas fa-chevron-down"></i></button>
</div>
</div>
I want to add the price, name,... to cart that is generated dynamically on html. Before i want to get those values to that button. But is not getting me. Here is code
But I have various categories
var b,c,d;
function add(){
for(var i=0;i<1;i++){
b=document.getElementsByTagName("span")[i];
c=document.getElementsByTagName("p")[i];
d=document.getElementByTagName("h4")[i];
alert(b.textContent);
alert(c.textContent);
alert(d.textContent)};
}
<div class="col-sm-9">
<div class="col-sm-2">
<h5></h5>
<img src="defaultimg.png">
<span></span>
<p></p>
<button value="Add to Wishlist" onclick="add()">Add to Wishlist</button>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-2">
<img src="defaultimg.png">
<span></span>
<p></p>
<h5></h5>
<button value="Add to Wishlist" onclick="add()">Add to Wishlist</button>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-2">
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<button value="Add to Wishlist">Add to Wishlist</button>
</div>
</div>
I am able to get only single value that is first one whenever I click button in any div using strictly javascript
Open your console, it will say :
Uncaught TypeError: document.getElementByTagName is not a function(…)
You have a typo, you're missing a s.
d=document.getElementsByTagName("h4")[i];
It breaks your code at the end of loop 1, which is why you get only one value.
This being said, since you have only one <h4> tag, not sure that JS will be happy with d = document.getElementsByTagName("h4")[1]; (Trying to select the second <h4>, which does not exist). It may return undefined, and your code will break again when you try d.textContent, you'll get Cannot access method textContent of undefined. So even after fixing the typo, I believe the code will break after loop 1 for another reason.
Bottom line, I'm not sure you will ever retrieve all your values with this code, it's way too frail and breaks way too easily. You should try and find another way.
Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.
If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.
So I am building a comment system and have loaded a bunch of comments to a page, then have generated a reply box for each. Below is what my reply box looks like, but there are many identical ones on each page. As you can see, the first portion is a div that contains a toggle (show/hide) for the reply box.
I am posting because I cannot get the reply toggle to fire.
Here is my html:
<div class="col-sm-offset-1 col-sm-11">
<a href="#" id="reply-toggle">
<span class="text">Reply</span>
<i class="toggle-icon fa fa-angle-down"></i>
</a>
</div>
<div id="reply-div" class="col-sm-12">
<form class="form-horizontal" role="form" accept-charset='UTF-8' data-parsley-validate novalidate>
<fieldset>
<div class="form-group">
<label for="ticket-message" class="col-sm-1 control-label"></label>
<div class="col-sm-11">
<textarea class="form-control" name="post-body" id="new_post_textarea" rows="5" cols="30" placeholder="Try to be as specific as possible when posting!"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button id="submit_reply_button" type="submit" class="btn btn-primary btn-block">Submit Reply</span></button>
</div>
</div>
</fieldset>
</form>
</div>
Here is my jquery:
$("#reply-toggle a").click(function() {
alert("running");
$('#reply-div').slideToggle("slow");
)};
I recognize I am not very good in jquery, so I am sure it's something simple, however, I also recognize that I will have to use jquery(closest) to only toggle the reply box associated with the proper comment thread. I have not gotten to this step yet, but it would be greatly appreciated If I could receive some guidance in regards to that as well.
Sincere thanks for any help!
$(document).on('click', '#reply-toggle', function() {
$(this).closest('.col-sm-offset-1').next('#reply-div').slideToggle('slow');
});
edit:added a period to the col-sm-offset-1 class
Your link selector does not match anything. $("#reply-toggle a") will return all <a> tags that have a parent with ID reply-toggle.
You should change this to simply $("#reply-toggle").
Edit: As an aside, you say you have multiple of these Reply buttons - I would strongly recommend you change the ID selector to a class selector as browsers expect only one element with a specific ID per page.
"#reply-toggle a" looks for <a> elements within an element that has id "reply-toggle". Maybe $("a#reply-toggle") would fix your firing issue?
You might want to generate a specific id for each reply toggle and div, say reply-toggle-1and reply-div-1. However, this approach needs a click()defined for each toggle. Use class declarations instead (i.e. not id="reply-toggle", but class="reply-toggle").