Actually I have two divs available on my page with buttons and I am passing the hidden field attached with that button to the jquery function But when I click on the second div it pass the value of the first div. Below is the html code
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="42" id="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="11" id="poll-id">
</div>
And I am using this jquery :
$(document).on('click','#vote-btn', function() {
console.log( $("#poll-id").val());
});
NOTE: The Div ids are not same all the time
The id attribute should be unique in the same document, it will be better if you're using global classes instead :
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
Then use siblings to target the related field :
$(this).siblings(".poll-id").val();
Hope this helps.
$(document).on('click','.vote-btn', function() {
console.log( $(this).siblings(".poll-id").val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
You can select the DIVs with the class "wp-polls-ans" and then the buttons inside
$(".wp-polls-ans #vote-btn").click(function(){
var val = $(this).parent().find( "#poll-id").val();
alert(val);
})
This is the fiddle
Here is the working javascript code:
$(document).on('click','#vote-btn', function() {
console.log( $(this).siblings("#poll-id").val() );
});
Related
I have a table which consist of user added data. All the 's added are added with a equal button. Like this:
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(".closeEarlyForm").fadeToggle();
});
});
I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.
You can try using this keyword with parent() and find():
$(this).parent().find(".closeEarlyForm").fadeToggle();
Demo:
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(this).parent().find(".closeEarlyForm").fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
I have a form like this one below, which contains steps and each steps contains multiple courses.
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name">
<input type="text" class="si-step-input" name="step-id">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name">
<input type="text" class="si-step-input" name="course-id">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
How do i append these properly when i click on the "Add step" and "Add course" buttons ?
i need to add them in this format
targetCourse: [{
step-name:
step-id:
course: [{
course-name:
course-id:
}]
}]
You can extract all steps using querySelectorAll. Then, iterate through all steps in this collection and gather name, id and courses using querySelector.
Array.prototype.map will make iteration easier.
var stepElements = document.querySelectorAll('.si-steps');
var result = [].map.call(stepElements, function(stepElement) {
var courseElements = stepElement.querySelectorAll('.si-courses');
var coursesInfo = [].map.call(courseElements, function(courseElement) {
return {
'course-name': courseElement.querySelector("[name='course-name']").value,
'course-id': courseElement.querySelector("[name='course-id']").value
};
});
return {
'step-name': stepElement.querySelector("[name='step-name']").value,
'step-id': stepElement.querySelector("[name='step-id']").value,
'course': coursesInfo
};
});
document.getElementById('result').innerText = JSON.stringify(result, null, 4);
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step1">
<input type="text" class="si-step-input" name="step-id" value="1">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course1">
<input type="text" class="si-step-input" name="course-id" id="c1">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step2">
<input type="text" class="si-step-input" name="step-id" value="2">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course3">
<input type="text" class="si-step-input" name="course-id" id="c3">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
<div>
<pre id="result">
</pre>
</div>
Note that Add course and Add step buttons are not implemented. Scroll down the snippet to see result.
Given this html:
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" value="input1_div" checked=""/> Opt1
<input type="radio" name="stype" id="opt2" value="input2_div"/> Opt2
</div>
<div id="stypes">
<div id="input1_div">
<input type="text" id="input1" name="input1" placeholder="input1"/>
</div>
<div id="input2_div" style="display: none;">
<input type="text" id="input2" name="input2" placeholder="input2" disabled=""/>
</div>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
I use following jQuery to hide/disable input fields based on selected radio buttons:
jQuery('#choices input').each(function() {
var item = this;
$(this).click(function() {
if($('input[type=radio][name=stype]').is(':checked')) {
$('#stypes > div').hide();
$('#stypes input').not("#sbutton").prop('disabled', true);
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
}
});
});
All-in-One in this jsfiddle.
I'm particularly unsure about my technique to incorporate radio value into the id selector:
$('#' + $(item).val()).fadeIn();
$('#' + $(item).val() + ' input').prop('disabled', false);
What is the correct way to do it? Other tips regarding my jQuery?
First of all, you don't need a sophisticated jQuery.each loop to bind the click and to define this. In each event handler this will be the caller of the function. In your case it is enough to have click function for all of them.
As you said in comments, it's only matter of presentation. I prefer to have one field instead of two fields. Even I prefer to have a fixed name for this text input, though in order to make it very similar to your example I change the name and placeholder accordingly.
$(function(){
$('#choices input').click(function() {
var newName = $(this).val(),
newPlaceholder = $(this).attr("data-placeholder");
$('#interchangable_input[name!='+newName+']').hide()
.attr("name", newName)
.attr("placeholder", newPlaceholder)
.fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-placeholder="Input one" value="input1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-placeholder="Input two" value="input2"/> <label for="opt2">Opt2</label>
</div>
<div id="stypes">
<input type="text" id="interchangable_input" name="input1" placeholder="Input one"/>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
Few more suggestions:
You can use <label for="target id"> for each option label in radio buttons or checkboxes. It will work fine with click event handler, even if the user clicks on the label instead of the button itself.
You can hid some information as data-* attribute in html5. You don't need to necessarily use value.
Update for multiple items
In case of group of multiple items in form, I can imagine a form with different sections or pages. The <fieldset> can be use to group these items. In HTML5 you could just disable the fieldset tag by <fieldset disabled> when you change the form page with jquery. (With exception of IE browsers). Because of this exception we need to disable all items in subforms. In order to handle this part, I defined a class .form-element which applies for all form inputs. You can also use <div> instead of <fieldset>, then you will need to track their enable/disable status.
$(function(){
// initialization by disabling form-elements and hiding them
$("#subforms fieldset[disabled]").hide();
$("#subforms fieldset[disabled] .form-element").attr('disabled','disabled');
// choice tracker
$('#choices input').click(function() {
var $target = $($(this).attr("data-subform")),
$oldElement = $("#subforms fieldset:not([disabled])");
$oldElement.attr('disabled','disabled').hide();
$oldElement.find(".form-element").attr('disabled','disabled');
$target.removeAttr("disabled");
$target.find(".form-element").removeAttr("disabled");
$target.fadeIn();
});
});
fieldset {
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<div id="choices">
<input type="radio" name="stype" id="opt1" data-subform="#subform1" value="subform1" checked=""/> <label for="opt1">Opt1</label>
<input type="radio" name="stype" id="opt2" data-subform="#subform2" value="subform2"/> <label for="opt2">Opt2</label>
</div>
<div id="subforms">
<fieldset id="subform1" >
<input class="form-element" type="text" name="input1_1" placeholder="Input one"/>
<input class="form-element" type="text" name="input1_2" placeholder="Input two"/>
</fieldset>
<fieldset id="subform2" disabled>
<input class="form-element" type="text" name="input2_1" placeholder="Input one"/><br />
<textarea class="form-element" name="input2_2" placeholder="Input two"></textarea><br />
<input class="form-element" type="checkbox" name="input2_3" id="input2_3" /> <label for="input2_3">check this first</label>
</fieldset>
</div>
<div id="#sbutton">
<input type="submit" id="input3" value="Submit"/>
</div>
</form>
i have a website with 3 pages. each page has a form with two input fields. i am trying to make a popup number-keypad that will populate what ever input field called it. below is that base code i keep coming back to.
<html>
<head><title>test</title></head>
<body>
<script> function num(id) { return document.getElementById(id); } </script>
<form action="/unitPage" method="POST" style=" text-align:center;">
Prefix: <input id="num" name"prefix" type="text" onfocus="num('keypad').style.display='inline-block';"/>
Number: <input id="num" name"number" type="text" pattern="[0-9]{6}" onfocus="num('keypad').style.display='inline-block';"/>
</form>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="num('num').value+=7;"/>
<input type="button" value="8" onclick="num('num').value+=8;"/>
<input type="button" value="9" onclick="num('num').value+=9;"/><br/>
<input type="button" value="4" onclick="num('num').value+=4;"/>
<input type="button" value="5" onclick="num('num').value+=5;"/>
<input type="button" value="6" onclick="num('num').value+=6;"/><br/>
<input type="button" value="1" onclick="num('num').value+=1;"/>
<input type="button" value="2" onclick="num('num').value+=2;"/>
<input type="button" value="3" onclick="num('num').value+=3;"/><br/>
<input type="button" value="X" onclick="num('keypad').style.display='none'"/>
<input type="button" value="0" onclick="num('num').value+=0;"/>
<input type="button" value="←" onclick="num('num').value=num('num').value.substr(0,num('num').value.length-1);"/>
</div>
</body>
</html>
is there a way of making one number key pad that i call from any page or do i need to make the above for each input?
thanks
One possible solution would be for you to add a javacript call into your header (by where you are currently calling the document.getElementById(id) call) that manipulates the DOM of that HTML, and simply inserts your div into it.
I'd recommend a shell div on each page for that element, then the javascript would just have to grab that div by the id ("keypad") and insert inner HTML.
Edit: as long as you share the javascript file between your 3 pages, you only have to implement the javascript once.
My html code is
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
I gave jquery like
$('.clrPric').click(function(){
console.log($(this).index());
});
It shows only 7 in console. No other elements with this class.
I want to get the number of the clicked button.
Thanks in advance.
You need to do this:
$('.clrPric').click(function () {
console.log($(this).index('.clrPric'));
});
FIDDLE