How to set link to check checkbox with variable name,id,value - javascript

I have a long list of checkboxes each with a link next to it. Something like:
<form name="checkboxlist" action="..." >
<input type="checkbox" id="1" name="pageCB" value="1"/>
<a id="1" href="#" onclick="sub(id)>click here</a>
<input type="checkbox" id="2" name="pageCB" value="2"/>
<a id="2" href="#" onclick="sub(id)>click here</a>
...
...
<input type="submit" />
</form>
I am currently trying to use:
<script>
function sub(id){
$("input:checkbox[value=id]").attr("checked", true);
document.checkboxlist.submit();
}
</script>
But this obviously does not read the variable id and I would really like to avoid making if statements for each id as there are several hundred of them. Is there some way to do this?

You shouldn't use a link you should use a <label> tag.
That's what it's made for.
<input type="checkbox" name="mybox" id="mybox">
<label for="mybox">Click this box</label>
This works for all form fields and is way better than having to build JS to do something that already exists.

EDIT: I see you're also using duplicate IDs. This is invalid, and things will not work properly when selecting by ID.
Numeric IDs are invalid in HTML4.
Anyway, change this:
$("input:checkbox[value=id]")
to this:
$("input:checkbox[value='" + id + "']")
This concatenates the value of id into the selector string, and I also added quotation marks around the attribute selector value since they're required by the docs.
And change your inline handlers to this:
<a id="2" href="#" onclick="sub(this.id)>click here</a>
...because this is a reference to the element clicked, so this.id is a reference to its ID attribute.

If I understand correctly, you want to support selecting checkboxes by clicking on an associated element, and to submit the form on click. I would suggest a) Use a <label> element in place of <a> as they can be associated with inputs by id and b) don't use numeric, duplicate id attributes.
<form name="checkboxlist" action="#">
<input type="checkbox" id="a" name="pageCB" value="1"/>
<label for="a">Click here</label>
<input type="checkbox" id="b" name="pageCB" value="2"/>
<label for="b">Click here</label>
</form>
<script>
$(document).ready(function() {
$('input:checkbox').change(function(){
$(this).parent('form').submit();
});
});
</script>

Related

find all jquery input fields after the a tag

I am trying to find all the input fields when i click the a tag and input some values to those input fields
i using a console.log to check that what comes after i close my popup.
like here i am using the var fields = $(this).find('input[type="hidden"]') - Should i use find because it is not traversing top but bottom
all it is finding is just the anchor tag and not all hidden fields
I don't think i need to use each for this purpose
<input value="1" type="hidden" class="myclass">
<input value="1" type="hidden" class="myclass">
<input value="1" type="hidden" class="myclass">
You can just use .nextAll() method with the right selector 'input[type="hidden"]', it will select all the inputs after your a element:
$(this).nextAll('input[type="hidden"]').each(function() {
$(this).prop("type", "text")
});
Demo:
$("#myLink").click(function() {
$(this).nextAll('input[type="hidden"]').each(function() {
$(this).prop("type", "text")
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a id="myLink" href="#">Click me</a>
<input value="1" type="hidden" class="myclass">
<input value="1" type="hidden" class="myclass">
<input value="1" type="hidden" class="myclass">
All you need is nextAll and filter
$('a').nextAll().filter('input');
$('a').nextAll('input');
nextAll gets all element after the a tag while the parameter can filter and it displays only inputs from them.
Please note: If the element is inside another element this method won't find it.
PS. Thanks cнŝdk for mentioning the parameter.

name attribute self references id

In short, is there some self reference code to set the name attribute equal to the id?
for example,
<input name="this.id" id="input1">
In long, using .serialize() requires use of the name attribute. Hypothetically, there is a form that contains many inputs without name attributes. I'm aware of,
how I could (read, "should") add name attributes that match the id's to each input,
creating a separate function to serialize the form using id attribute,
similar solution like in this question,
the steps taken to submit a form.
However, in some research on SO, I was led to believe that if a person were to use,
<input name="id[]" id="input1">
when serialized, the name would have the id appended to it. In my tests this method produces id%5B%5D (url encoded string of id[]). Using anything available, is there a short hand way to set the name attribute so that it references the id attribute on each input?
There is nothing in HTML that will do the reference so you will need to set it manually. The best solution, set it when you build the form. Or set it when you reference the elements
console.log($("input").attr("name", function (){ return this.name || this.id }).serialize())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo1" value="1" />
<input id="foo2" value="2" />
<input id="foo3" value="3" />
<input id="foo4" value="4" />
or just write your own method
$.fn.serializeId = function() {
return $(this).map(function(){
return this.id + "=" + encodeURIComponent($(this).val())
}).get().join("&");
}
console.log($("input").serializeId())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo1" value="1" />
<input id="foo2" value="2" />
<input id="foo3" value="3" />
<input id="foo4" value="4" />

how to get text associated in a html input tag of type checkbox

I have my element like below
<input type="checkbox" id="Countries" value="Ind">India</input>
How to get output as "India"?
Below returns only Ind
document.getElementById("Countries").value;
There is a way to get the value when you don't care about semantically correctness.
alert(document.getElementById('Countries').nextSibling.nodeValue);
<input type="checkbox" id="Countries" value="Ind">India</input>
For completeness:
You shoult do an input type like this as mentioned in the Form W3
<label for="Countrie">India</label>
<input type="checkbox" id="Countrie" />
or
<input type="checkbox" id="Countrie" />
<label for="Countrie">India</label>
or
<label>
<input type="checkbox" name="Countrie" />
India
</label>
also mentioned in THIS POST
and then use javaScript to get a coresponding label value.
I don't think that you can because that isn't valid HTML code.
An input tag is empty, meaning that it can only contain attributes. Therefore, there is no </input> to close it.
There are ways to store data in it though.
As of HTML 5, there is a data- attribute that you can put on any element. You could do something like this:
<input type="checkbox" id="Countries" value="Ind" data-something="India" />
// Inside JS
document.querySelector("#Countries").dataset.something
Another alternative would be to wrap a p or a span around the text after it.
<input type="checkbox" id="Countries" value="Ind" />
<p id="CountriesText">You can get this value easily enough</p>
This is not possible because your html is wrong.
input is a self closing tag, so it should be like this.
<input type="checkbox" id="Countries" value="Ind" />
So there is no other value you could extract with javascript then the value.
Or you should use a data-attribute with India as a value.
HTML
<input type="checkbox" data-country="India" id="Countries" value="Ind" />
JS
var checkbox = document.querySelector('#Countries'); // or document.getElementById("Countries");
alert(checkbox.dataset.country);
See this fiddle http://jsfiddle.net/zwx43m59/

How can I get the ID of a picture that user click on it?

I would try to have something like five star rating , but not alone , I would like it a part of a form that user have to click on it and also enter his opinion about article , how can I retrieve the ID of picture (1start,2stars,...) that clicked on after submiting form?
Also I would like to have validation on it , I mean user have to click on five star picture.
I would like to use jquery
$('img').click(function() { alert($(this).attr('id')); });
Should do the trick for you. .attr() returns an attribute from an element.
EDIT: As per OP request:
HTML:
<input type="image" value="1" name="vote" src="star.gif" />
<input type="image" value="2" name="vote" src="star.gif" />
<input type="image" value="3" name="vote" src="star.gif" />
<input type="image" value="4" name="vote" src="star.gif" />
<input type="image" value="5" name="vote" src="star.gif" />
jQuery:
$('input[type="image"][name="vote"]').click(function() { alert($(this).val()); return false; });
This will alert the input's value, note that <input type=image> is a more semantic way to describe functional images, and should be used instead of <img> tags.
Also note that you could store the vote in a variable just as easy by using
storedVote = $(this).val(); //Of course goes within the click handler.
WORKING EXAMPLE
Given the following element:
<img id="starImage1" class="starImage" src="star1.png">
You can do the following with jQuery:
$('.starImage').bind('click', function() {
alert(this.id);
});
This binds a function to all elements with the "starImage" class that alerts the clicked element's ID attribute.

Is it possible to show a html element already on a page a second time without copying it?

I have a page with a hidden form containing several divs.
<form action="...">
<div>
<input id="menubar_open_article_bid" name="bid" onfocus="this.select();" onkeyup="do_v(); type="text">
<a href="#" onclick="return do_h();">
Beitrag öffnen </a>
</div>
<div>
<input id="menubar_open_article_cid" name="cid" onfocus="this.select();" onkeyup="do_a();" type="text">
<a href="#" onclick="return do_y();">
Container öffnen </a>
</div>
<div>
<input id="menubar_open_article_iid" name="iid" onfocus="this.select();" onkeyup="do_b();" type="text">
<a href="#" onclick="return do_x();">
Inhalt öffnen </a>
</div>
</form>
As a first try i copied one of the divs using jQuery to another form in order to show it there (visible).
That worked great, but now the html element id is there twice.
I do not want to change that id. So a solution where i could only reffer to the div with id "menubar_open_article_iid" to show the html-element would solve my problem. Is that possible? (though i never heard of something like this)
As far as I am aware, this is not possible.
I think the main problem here is that you want one input shown twice, but still being the same input. That is going to be problematic, and it is also bad interface design. The user is likely to be confused by having two separate but different inputs in a form.
I'd recommend you to not do this.
Maybe you can leverage this approach:
I'd use jQuery and jQuery metadata:
http://plugins.jquery.com/project/metadata
In your hidden form, don't specify any id's. Instead, specify what you want the ids to be via class metadata:
<form class="hide form-to-clone">
<div>
<input class="setId {id:'id1'}" />
</div>
<div>
<input class="setId {id:'id2'}" />
</div>
<div>
<input class="setId {id:'id3'}" />
</div>
</form>
In jQuery, clone the hidden form:
var clone = $('.form-to-clone').clone();
Then, loop through the elements in the clone and set the ids:
clone.find('.setId').each(function() {
var $this = $(this);
$this.attr('id', $this.metadata().id);
});
Then, append your cloned form to the page somewhere:
clone.show().appendTo('body');

Categories