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>
Related
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.
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I'm trying to format and change the structure of a standard HTML form. At the moment the output looks like this
<form accept-charset="UTF-8" autocomplete="off" method="POST">
<ol class="questions">
<div>
<label>First Name *</label>
<input type="text" />
</div>
<div>
<label>Email *</label>
<input type="text" />
</div>
<div class="submit">
<input type="submit" value="Submit" />
</div>
</ol>
</div>
</form>
I need to change the divs to list items and then add a span around the labels if possible.
I've got this so far but it's not altering unfortunately.
window.onload = function() {
var widgetHTML = $('ol.questions').html();
widgetHTML = widgetHTML
.replace(/<div>/g, '<li>')
.replace(/<\/div>/g, '</li>');
$('ol.questions').html(widgetHTML);
};
Any ideas to add the span and replace the DIVs to LIs that would be great
Use .replaceWith() and .wrap():
$("form div").replaceWith(function(){
$(this).find('label').wrap('<span/>');
return $('<li>' + this.innerHTML + '</li>')
});
jsFiddle example
This will give you:
<form accept-charset="UTF-8" autocomplete="off" method="POST">
<ol class="questions">
<li>
<span><label>First Name *</label></span>
<input type="text">
</li>
<li>
<span><label>Email *</label></span>
<input type="text">
</li>
<li>
<input type="submit" value="Submit">
</li>
</ol>
</form>
This should do it.
$('ol.questions div').each(function(){
$('label',this).wrap('<span/>');
var children = $(this).children();
$(this).replaceWith($('<li/>').append(children));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" autocomplete="off" method="POST">
<ol class="questions">
<div>
<label>First Name *</label>
<input type="text" />
</div>
<div>
<label>Email *</label>
<input type="text" />
</div>
<div class="submit">
<input type="submit" value="Submit" />
</div>
</ol>
</form>
Use the following jQuery function for changing the type:
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
}
})(jQuery);
// USAGE
$("div").changeElementType("li");
(https://stackoverflow.com/a/8584217/1017882)
Use the following code to wrap your labels with a span:
$("label").wrap("<span></span>");
NOTE: You'll need to refine the selectors as you see fit. The selectors above will work given the markup you've posted, but I assume you have other divs and labels on your page.
I will have html like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
how can I use $_POST to get the ids of the elements with class="chosen"
There is no "direct" way to do this. Forms POST data from input, textarea, and button elements, possibly a few more I'm forgetting. You will have to use JavaScript to "transcribe" the li elements to one of these, possibly an <input type="hidden">. For instance:
var form = $formselector
form.onsubmit = function() {
var chosen = form.getElementsByClassName("chosen");
for (var i=0; i<chosen.length; i++) {
form.innerHTML += '<input type="hidden" name="chosen[]" value="'+chosen[i].id+'">';
}
}
This should loop through your form, finding all elements with class chosen and adding a hidden input with the ID of that element. Note that you might need to change the name of the hidden input element to match your server-side code. Also make sure you update $formselector to actually match your form.
You need to create a hidden input and assign value to it by javascript or jquery.
<form class="form-horizontal" role="form">
<input type="hidden" name="my_data" value="" />
<div class="form-group">
<ul class="select_list">
<li id="s1" class="chosen">Apple</li>
<li id="s2" style="display: none;">Peach</li>
<li id="s3" style="display: none;">Plum</li>
<li id="s4" class="chosen">Banana</li>
<li id="s5" style="display: none;">Grapes</li>
<li id="s6" class="chosen">Pear</li>
<li id="s7" style="display: none;">Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
$('.select_list').change(function(){
$('.my_data').val($(this).val());
});
</script>
Try this...
I figured it out:
var value = [];
$('.chosen').each(function(){
value.push(this.id.substring(1));
});
$('.form-horizontal').submit(function(){
$('.form-horizontal').append('<input type="hidden" value="' + value +'"/>');
}
I am reconstructing this question. I have the following HTML element structure.
<li class="inner"><span class="plus" id="sidehome" title="siteHome">SiteHome</span>
<ul style="display:none">
<li class="inner">
<span class="plus" id="Middle_Content">Middle content</span>
<ul style="display:none">
<li>
<span id="editedpart" title="first div">
<form >
<input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
<input type="hidden" name="editedpart" value="first div" id="edited" />
first div
</form>
</span>
</li>
<li>
<span id="editedpart" title="second div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
<input type="hidden" name="editedpart" value="second div" id="edited" />
second div
</form>
</span>
</li>
<li>
<span id="editedpart" title="third div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" id="t_div" class="" />
<input type="hidden" name="editedpart" value="third div" id="edited" />
third div
</form>
</span>
</li>
</ul>
</li>
I want to be able to get title value of <span> with id=editedpart, which is the immediate parent of the <a> tag when the link is clicked. I don't know how to explain it more. I will appreciate it if someone can help. Thanks.
I used his jQuery code var parent = $(this).closest("span");
Here is my full showeditpage()
function showeditpage(){
var page = document.getElementById("t_div").value;
var action = document.getElementById("edit").title;
var parent = $(this).closest("span[id='editedpart']");
var str =parent.attr('title');
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("pcontent").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","../views/edit.php?page="+page+"&action="+action+"&editedpart="+str);
xmlhttp.send();
}
it is not working that is it is not responding.
You could use .attr method:
var title = $(this).closest("span").attr('title');
Your issue is that this doesn't reference the clicked a element in the showeditpage function.
Altough I dont recommend it, you can fix your issue using the following approach:
<a onclick="showeditpage(this);" ...
function showeditpage(link) {
alert($(link).closest("span").attr('title'));
}
However, you should avoid attaching event handlers using attributes and use the approach below:
Put a class on your a tags, like edit for instance (you could also use any other shared attributes, if any).
<a class="edit" ...
Wait until the document is ready and attach event handlers using jQuery.
$(function () {
$(document).on('click', '.edit', function (e) {
alert($(this).closest("span").attr('title'));
e.preventDefault(); //prevent default browser action
});
});
Please also note that id should be unique.
Simple:
var parent = $(this).closest("span[id='editedpart']");
var title = parent.attr('title');
You need to pass the clicked element to the handler method onclick="showeditpage(this)".
Also, ID has to be unique in a page, ie only one element should have a given id.
In your case I would suggest you to make editedpart as a class instead of id and access the title using var parent = $(this).closest(".editedpart");.
Also you need to change the ids t_div and edit to classes.
Also you can modify the method to use jQuery
HTML
<li class="inner"><span class="plus" id="sidehome" title="siteHome">SiteHome</span>
<ul style="display:none">
<li class="inner">
<span class="plus" id="Middle_Content">Middle content</span>
<ul style="display:none">
<li>
<span class="editedpart" title="first div">
<form >
<input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
<input type="hidden" name="editedpart" value="first div" id="edited" />
<a href="#" title="edit" class="edit" >first div</a>
</form>
</span>
</li>
<li>
<span class="editedpart" title="second div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
<input type="hidden" name="editedpart" value="second div" id="edited" />
<a href="#" title="edit" class="edit" >second div</a>
</form>
</span>
</li>
<li>
<span class="editedpart" title="third div">
<form>
<input type="hidden" value="1/middle_content/first_div" name="page_heri" class="t_div" />
<input type="hidden" name="editedpart" value="third div" id="edited" />
<a href="#" title="edit" class="edit" >third div</a>
</form>
</span>
</li>
</ul>
</li>
Script
$(function(){
$('.editedpart .edit').click(function(){
var parent = $(this).closest(".editedpart");
var action = $(this).attr('title');
var str = parent.attr('title');
var page = parent.find('.t_div').val();
$('#pcontent').load('../views/edit.php', {
page: page,
action: action,
editedpart: str
})
})
})