I want to select a form by clicking a button that is a child of the form sibling parent.. i know it's confusing.
<li class="list-group-item d-flex justify-content-between align-items-center task">
<span class="task"><%= task.taskDescription %></span>
(this-form)=> <form action="/edit" method="POST" class="hidden edit-form">
<input type="text" name="taskDescription" />
<input type="hidden" name="id" value="<%-task._id%>" />
</form>
<div class="btns">
(this-btn)=> <button class="edit">Edit</button>
<form action="/delete" method="POST">
<input type="hidden" class="edit" name="id" value="<%-task._id%>" />
<input type="submit" name="submit" value="Delete" />
</form>
</div>
</li>
You can select the form directly using any unique selector. An id might be best, but in the example given, you could use document.querySelector('.edit-form').
If there's multiple similar elements and you want to be sure to get the one with the common parent from the button's onclick handler:
function onclick() {
const form = this.parentNode.parentNode.querySelector('.edit-form');
// do what you want with form here
}
What it does is:
start from this (the button clicked)
Go up to the parent of the DOM element twice (first to <div class="btns"> then to the <li ...> element)
From there we select the <form class="edit-form ..." ...> element.
Related
When I click on Order Now button (<a class="btn btn-lp btn-popup" data-popup-open="popup-1" href="#">Order Now</a>) the popup appears with the form buttons that will send data to the server.
<div class="section-pick-your-box section-choose-a-plan">
<ul class="content">
<li>
<div class="wrapper">
<a class="btn btn-lp btn-popup" data-popup-open="popup-1" href="#">Order Now</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<form action="/cart/add" method="post" novalidate enctype="multipart/form-data" data-productid="">
<input type="hidden" name="properties[shipping_interval_frequency]" value="1">
<input type="hidden" name="properties[shipping_interval_unit_type]" value="Months">
<input type="hidden" name="id" value="12673316716586">
<input type="hidden" name="properties[subscription_id]" value="106203">
<input type="hidden" name="purchase_type" value="autodeliver">
<div class="price-button-wrap">
<a class="btn btn-lp buy-now" href="/cart">Wrapped</a>
</div>
</form>
<form action="/cart/add" method="post" novalidate enctype="multipart/form-data" data-productid="">
<input type="hidden" name="properties[shipping_interval_frequency]" value="1">
<input type="hidden" name="properties[shipping_interval_unit_type]" value="Months">
<input type="hidden" name="id" value="12673316683818">
<input type="hidden" name="properties[subscription_id]" value="106203">
<input type="hidden" name="purchase_type" value="autodeliver">
<div class="price-button-wrap">
<a class="btn btn-lp buy-now" href="/cart">Unwrapped</a>
</div>
</form>
<p><a data-popup-close="popup-1" href="#">Close</a></p>
<a class="popup-close" data-popup-close="popup-1" href="#">x</a>
</div>
</div>
</div>
</li>
</ul>
</div>
The problem with the code above is that it does not recognize the parent form or closest form element from which the button was triggered.
This is my current jquery code below to get the parent form element:
$('.section-pick-your-box .content > li .popup-inner > form .buy-now').click(function(e) {
e.preventDefault();
var $data = $(this).closest('li').find('form').serialize();
console.log($data);
});
When I console.log, I am getting the data of both forms.
Any help is appreciated.
Since you have multiple forms inside an li, so instead of closest li, check for closest form
var $data = $(this).closest('form').serialize();
I have a page with many product listed. Each of those products is inside a div and has a form like this:
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
As you can see the value of add-to-cart is missing.
In the same div where the form is, we have an other div like this that contains the ID of the product (for instance IDPRODUCT), that needs to go inside the value:
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">IDPRODUCT</div>
I need a javascript function that on document ready(?) or onmouseover the div searches for the value inside the div, for instance IDPRODUCT, and copy this value into the value of the input name="add-to-cart"
Of course for each of those different divs there should be the proper IDPRODUCT.
Here is one JSFiddle I tried but it doesn't seem to work:JSFiddle
Any idea of how to solve this?
Thank you so much
UPDATE
The full Example again
$('.cart-add-wrapper').each(function(){
var id = $(this).find('.vc_gitem-woocommerce-product-id').text();
$(this).find('input[name=add-to-cart]').val(id);
console.log("id", id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">4321</div>
</div>
<div class="cart-add-wrapper">
<form class="cart" method="post" enctype="multipart/form-data">
<input type="hidden" name="add-to-cart" value="">
<button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>
<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">1234</div>
</div>
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>
When user clicks on "edit" how can I find closest row_form and remove it with jquery?
Here is what I tried so far jsfiddle
HTML
<div id="settings_wrapper">
<h1>General settings</h1>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
<div class="settings_row">
<span class="row_name">Name</span>
<div class="row_edit"><p class="row_edit_button">Edit</p></div>
<div class="row_form">
<form action="this.php"><span>New name:</span><input type="text" /><input type="submit" value="Save"><span>New name:</span><input type="text" /></form>
</div>
</div>
</div>
JQUERY
$(document).ready(function(){
$(".row_edit_button").click(function(){
$(this).closest(".row_form").remove();
});
});
The target element is the next sibling of the parentNode of the clicked element. closest selects the closest matching parent element. One option is:
$(".row_edit_button").click(function() {
$(this.parentNode).siblings(".row_form").remove();
});
Other options are:
$(this).parent().next(".row_form").remove();
$(this).closest('.settings_row').find(".row_form").remove();
In my Django app, I would like to use Twitter bootstrap radio buttons. Then I would like to post the value of those buttons in order to create an object.
Here is my buttons:
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match">
I would like to get the information from those radio button and create an object match with it in a view:
def test(request):
user=request.user
if request.method == 'POST':
style = request.POST['style']
supporting = request.POST['supporting']
match = Match.objects.create(user=user, style=style, supporting=supporting)
return HttpResponse(test)
The thing is that I don't know JavaScript well, so I didn't find how to get the value from the button.
Then, I think I have to use:
$.post('/sportdub/points_dub/', {'style': style , 'supporting': supporting});
But how can I do so that style and supporting correspond to the value of the buttons, and then to post it only when the user clicks on the button?
Thank you very much for your help.
taking my last answer, let's use your own code... in your HTML you have something like:
<form action="/sportdub/points_dub/" method="post" class="form-horizontal">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
and you just have to add one hidden field per block, in your case, add 2. Your form would then match:
<form action="/page" method="post" class="form-horizontal">
<input type="hidden" id="supporting_team" value="" />
<input type="hidden" id="supporting_type" value="" />
<div class="btn-group supporting_team" data-toggle="buttons-checkbox">
<button type="button" class="btn" name="supporting">Team1</button>
<button type="button" class="btn" name="supporting">Team2</button>
</div>
<div class="span6 btn-group ib supporting_type" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary active" name="style">relaxed</button>
<button type="button" class="btn btn-primary active" name="style">strict</button>
</div>
<input type="submit" value="create your match" />
</form>
add a jQuery helper that will set the values of those hidden fields upon buttons click:
// whenever a button is clicked, set the hidden helper
$(".supporting_team .btn").click(function() {
$("#supporting_type").val($(this).text());
});
$(".supporting_type .btn").click(function() {
$("#supporting_team").val($(this).text());
});
when you click the create your match the entire form will be posted to the page set as the action attribute of the form, you have to do nothing more...
If you want to submit it manually by invoking post in javascript you need to remember to prevent the form to be submitted again as that's the input type="submit" element task, you can invoke your post and serializing the entire form data, instead one by one as in your example...
like:
// when the form is submited...
$("form").submit(function() {
// submit it using `post`
$.post('/sportdub/points_dub/', $("form").serialize());
// prevent the form to actually follow it's own action
return false;
});
in your dynamic code, you will have those variables as:
supportingTeam = request.POST['supporting_team']
supportingType = request.POST['supporting_type']
and this, will be valid, no matter if you have the manually form submit script or not...
After your most recent comment, I think you should try using the input radio buttons provided in HTML. It is very easy to do button groupings, make labels for the inputs, and retrieve which one has been clicked.
Altering your HTML slightly to look like this (the for attribute of the label allows the user to be able to click the label and select the radio button instead of clicking on the button directly):
<div>
<input id="team1" type="radio" name="supporting" value="Team1" /><label for="team1">Team 1</label>
<input id="team2" type="radio" name="supporting" value="Team2" /><label for="team2">Team 2</label>
</div>
<div>
<input id="relaxed" type="radio" name="style" value="relaxed" /><label for="relaxed">Relaxed</label>
<input id="strict" type="radio" name="style" value="strict" /><label for="strict">Strict</label>
</div>
I can get which selections have been made using this:
$('input[name="supporting"]').filter(':checked').val();
$('input[name="style"]').filter(':checked').val();
If you still wish to use buttons, class active is added to a radio button when clicked. To get the button text, try:
$('button[name="supporing"]').filter('.active').text();
$('button[name="style"]').filter('.active').text();
To put this value into a hidden input, do the following:
$('#hiddenInput1').val($('button[name="supporting"]').filter('.active').text());
$('#hiddenInput2').val($('button[name="style"]').filter('.active').text());