We Keep Coding

Serializing data of li to send by post method ajax

I have this snippet
<li>
<a href="#demo_point_in_first_quad" class="btn btn-danger show" data-toggle="collapse">
Simple collapsible
</a>
<div id="demo_point_in_first_quad" class="collapse">
<label>tts</label> <input id="tts" type="text" value="10"><br>
<label>topic_level</label> <input id="topic_level" type="text" value="capable"><br>
<label>to_be_shown_individually</label> <input id="to_be_shown_individually" type="checkbox" checked="">
<br>
<label>check_for_geometry</label><input id="check_for_geometry" type="checkbox" checked="">
<br>
</div>
</li>
And similar to it second li
<a href="#demo_point_in_second_quad" class="btn btn-danger show" data-toggle="collapse">
Simple collapsible
</a>
<div id="demo_point_in_second_quad" class="collapse">
<label>tts</label> <input id="tts" type="text" value="10"><br>
<label>topic_level</label> <input id="topic_level" type="text" value="capable"><br>
<label>to_be_shown_individually</label> <input id="to_be_shown_individually" type="checkbox" checked="">
<br>
<label>check_for_geometry</label><input id="check_for_geometry" type="checkbox" checked="">
<br>
</div>
I want the values in the input field to be sent through ajax with there specific div id.

According to your edited question, i would suggest that you add some class to your input elements so that their search becomes easier.
<input class="myitem"></input>
Then, you can get a list of all inputs as:
var list = document.getElementsByClassName("myitem");
Finally you can iterate over the list to get the value of inputs
for(i=0;i<list.length;i++){
inputValue = list[i].value; // Value of input field
parent = list[i].parentElement; // Parent div has the id so extract from here
{/* Save both of them somewhere and use as required */}
}
$.post("url",
{
key: value
},
function(data){
alert("Data: " + data);
});
});

How to get radio button checked value

I am trying to get the checked values of a radio group in meteor js. So far i have come up with this.
Js
Template.QuizController.events({
'submit .quiz-ans'(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
console.log(event);
},
});
Html
<template name="QuizQuestion">
<div class="questions">
<h5 class="white-text">{{question}}</h5>
<form action="#" class="quiz-ans">
<ul class="answer-list">
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q1" />
<label for="{{this.order}}q1">{{this.q1.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q2" />
<label for="{{this.order}}q2">{{this.q2.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q3" />
<label for="{{this.order}}q3">{{this.q3.value}}</label>
</li>
<li class="answer-items animated out ">
<input class="with-gap" name="group1" type="radio" id="{{this.order}}q4" />
<label for="{{this.order}}q4">{{this.q4.value}}</label>
</li>
</ul>
<div class="test-controlls">
<button class="btn waves-effect waves-light right" type="submit" name="action">Next
<i class="material-icons right">send</i>
</button>
<span class="quiz-count right">1/10</span>
</div>
</form>
</div>
</template>
I was looking inside the target data but still can find the checked value. this is probably very obvious but I cant figure it out.So help wound be great.
Thanks

Your event will contain your form element as event.target. That will contain all your inputs so you can query them, e.g. using jQuery.
For example:
const checked = $(event.target).find("input[name='group1']:checked");
If you wanted to get the value attached to that (like "q1") you could then do:
checked[0].id;
or
checked[0].labels[0].innerHTML;

you can get radio button checked value by
const val= $('input[name=group1]:checked').val();

How to remove <li> element?

Following is my HTML code:
<form name="package_type_documents" action="" method="post" enctype="multipart/form-data">
<div class="hor-form">
<ul>
<li>
<div class="answer-block" id="doc_title">
<span>Add More Documents</span>
<ol>
<li id="ttl1" class="ptdoc">
<li class="ans_li">
<span class="num-block">1 </span><span class="num-block reqd">*</span>
<label>Document Title</label>
<input type="text" name="pt_doc_title[1]" id="pt_doc_title_1" value="Prabhakar Bhosale" />
</li>
<li class="ans_li">
<span class="num-block"> </span><span class="num-block reqd"> </span>
<label>Document File</label>
<p class="uploadBtn"><input type="file" name="document_file_name_1" id="document_file_name_1"/>
</p>
</li>
<li class="ans_li">
prabhakar_bhosale.docx
</li>
<li class="ans_li">
<input type="checkbox" name="delete_file_1" id="delete_file_1" class="custom-check" />
<label for="show">Delete document</label>
</li>
<input type="hidden" name="pt_doc_id[0]" value="19" />
<input type="hidden" name="pt_doc_old_file_iname[0]" value="prabhakar_bhosale.docx" />
</li>
</ol>
<span>Add More Documents</span>
<p class="fade">Note * (Image size should be less then 1 mb and allowed image types are jpg, jpeg, gif, png .)</p>
</div>
</li>
<li>
<p class="last">
<input id="saveForm" class="c-btn" type="submit" name="submit" value="Update"/>
<input type="button" class="c-gray-btn" name="back" value="Back" onclick="javascript:window.location.href='http://localhost/eprime/entprm/web/control/modules/package_type/view_package_type.php?page=1'" />
</p>
</li>
</ul>
</div>
</form>
Following is my jQuery code:
<script type="text/javascript">
function delete_title(field) {
$('li'+'#'+field).remove();
}
</script>
The following code is not deleting the concerned . I tried many tricks but still it's not removing. Can anyone please help me in this regard?

check demo and check how call function
function delete_title(field) {
$("#"+field).remove();
}
delete_title('ttl1');
demo

I am sure you must be having ids unique for li element. And For deleting element using id. You can use:
$('#'+field).remove();

$('li').remove();
this Will remove all the li elements
and below code will remove specific Li element from UL.
`$('#li_yourId').remove();`

If you want to delete <li> element with given id then you can write:
$('#'+field).remove();
No need to write li.

Try this one is Javascript:
var elem = document.getElementById('id');
elem.parentNode.removeChild(elem);

Unknown element in JQUery click

I am having a Html generated using JQUery and its like
<p class="fieldChoices title" style="">
Choices:
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice1 cutsom_button deleteField"></p>
<div class="seperator"/>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<p class="deleteChoice2 cutsom_button deleteField"></p>
<div class="seperator"/>
</p>
I am trying with on click of deleteChoice1 the corresponding Choice1 must be removed from the .fieldChoices using JQuery..
Also i may not know in JQuery whether i am clicking deleteChoice1 /deleteChoice2 ,,
so i dont know how to resolve it using JQuery..please suggest me....

$(".deleteField").click(function(){
$(this).prevAll("input:first").remove();
$(this).prevAll(".seperator").remove();
$(this).remove();
});
Though it'd be easier if you put each choice in a div.

Try the following instead:
<p class="fieldChoices title" style="">
Choices:
<fieldset>
<input id="Choice1" value="option1" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
<fieldset>
<input id="Choice2" value="option2" maxlength="150"/>
<div class="seperator"/>
<span class="cutsom_button deleteField"></span>
</fieldset>
</p>
$("deleteField").bind("click", function(){
$(this).parent().remove();
}

html:
<fieldset class="fieldChoices title">
<legend>Choices</legend>
<ul>
<li>
<input id="Choice1" value="option1" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
<li>
<input id="Choice2" value="option2" maxlength="150"/>
<span class="deleteChoice cutsom_button deleteField"></span>
</li>
</ul>
</fieldset>
jquery:
$(".fieldChoices li").each(function() {
var choice = $(this);
$(".deleteChoice", this).click(function() {
choice.remove();
});
});

How can I get the index of this element with jQuery?

I am trying to get the index of an element using jQuery to send to a PHP script.
Here is my XHTML
<form action="/accreditation/questions/" method="post" id="questions-form">
<fieldset id="question-0">
<legend>Question</legend>
<h3>What colour is grass?</h3>
<ul>
<li>
<input type="radio" name="answer[0]" value="0" id="radio-0-0" />
<label for="radio-0-0">Green</label>
</li>
<li>
<input type="radio" name="answer[0]" value="1" id="radio-0-1" />
<label for="radio-0-1">Red</label>
</li>
<li>
<input type="radio" name="answer[0]" value="2" id="radio-0-2" />
<label for="radio-0-2">Orange</label>
</li>
</ul>
</fieldset>
<fieldset id="question-1">
<legend>Question</legend>
<h3>how old is alex</h3>
<ul>
<li>
<input type="radio" name="answer[1]" value="0" id="radio-1-0" />
<label for="radio-1-0">21</label>
</li>
<li>
<input type="radio" name="answer[1]" value="1" id="radio-1-1" />
<label for="radio-1-1">11</label>
</li>
<li>
<input type="radio" name="answer[1]" value="2" id="radio-1-2" />
<label for="radio-1-2">23</label>
</li>
</ul>
</fieldset>
</form>
I need to get the index of the fieldset elements. I am currently using this each iterator (which I'd like not to change because it has a lot of other functions inside it).
$('#questions-form ul li').each(function() {
qIndex = $('fieldset').index($('fieldset', $(this).parent()))
});
I'd like qIndex to be the index of fieldset relative to the form. For example, in this case I should have it equal to 0 and 1 (although there would be 6 values because it's looping through the list elements).
I have played around for a while and have been unable to get the correct index. I keep getting not found (-1).
If it helps, here is the code I'm using to get the list item's index relative to it's containing ul element.
index = $('li', $(this).parent()).index(this);
What is wrong with my fieldset index grabbing code?

The LI's parent is UL, not the fieldset.
I think this will set qIndex for you:
qIndex = $('fieldset').index($(this).parents('fieldset'));

You can also get the index using:
$("form fieldset").each(function(I) {
console.log("fieldset index"+ I);
});