Develop Reference

Trying to make a rename feature for a list/table

I want the user to be able to change the name of a list/table
<div class="col-md-6">
<form method="post">
<h1>
<b>
<input type="text" value="Group" id="groupName">
</b>
</h1>
<input type="submit" value="Change Name">
</form>
</div>
https://jsfiddle.net/bqgqhxs2/
i only put up the bare minimum code to hopefully get my point across.
i have a "hidden" text box and a submit button and i want the value that the user inputs into the text box to become the new value preferably without having to reload the page.
how would i go about implementing that? or is what I'm asking for even possible?
also if anyone has any other suggestions for a "rename" feature I'm all ears, the overall project is going to be implemented into meteor so if someone has a meteor solution that would be great but I'm only worrying about one problem at a time.

You can use the blur method to take the new name typed into the input.
$("#groupName").on( "blur", function() {
//change the id here
$("table").attr("id", $(this).val() )
//or the value of an element
$("table").attr("value", $(this).val() )
})
No need for the button to change the name of the table
fiddle https://jsfiddle.net/bqgqhxs2/2/

Make readonly fields unclickable

In my form i am using readonly fields.
How to make this readonly fields unclickable I don't want to use disabled fields, just make readonly fields unclickable any one have idea plz share.

You can also use the property disable to make the input unusable and unclickable. I think it's more clear and efficient way.
Here is the the difference between readonly and disable:
<div>
<input disabled type="text">
<input readonly type="text">
<input type="text">
</div>

Call the blur event when input is focused.
<input readonly onfocus="this.blur">

I searched and i found the solution here it is.
<input type="text" readonly="readonly" id="#unclickable" />
<script>
$("#unclickable").focus(function(){
$(this).blur();
});
</script>

I found a much better solution to your problem :)
Assuming you have an input field as :<input type = "text" id = "textfield" >
You need to modify 2 things,
1:
Your HTML declaration should be like :<input type = "text" id = "textfield" readonly>
2:
Go to your css and add the following lines of code
#textfield:hover{
cursor:default;
}
#textfield:focus{
cursor:default;
outline:none;
}
Explanation: It'll still be clickable but we are removing any default style changes happening due to click event to none. i.e. a white border which appears is manually removed. Therefore you can pretty much simulate the effect that nothing is being clicked.

Is there a label in HTML

i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.

You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.

The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.

A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.

Rails: two radio selects on same source list

Wondering how to approach this... Best to look at the picture to visualize the, hopeful, UI for a form for choosing options in a list. Users need to be able to make a first choice and a second choice for each option. One and only one can be selected in each column, and for that matter, each row.
At first I thought, naturally, 2 radio button groups might work...but not sure how? Perhaps hidden radio_buttons whose values are manipulated via Javascript/JQuery in a click event on each div? Event should also check/handle "collisions" when user tries to select same option for both choices.
Or, would this perhaps be better with two hidden collection_selects...or even simpler, just two hidden text_fields...which javascript can populate with the ID of the selected option?
Or maybe I'm overlooking something more obvious.
I'm new(ish) to javascripting with Rails so looking for advice/validation.
Thanks.

I think something like this is what your looking for:
HTML:
<form>
<p class="exclusiveSelection">
Selection One
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Two
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Three
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<input type="button" id="submitForm" value="Submit">
</form>
JavaScript:
$(function() {
$(".exclusiveSelection input[type='radio']").click(function() {
$exclusiveSelection = $(this).parent();
$('input[type='radio']', $exclusiveSelection).attr('checked', false);
$(this).attr('checked', true);
});
});
It ensures that the values are unique across column and row and works with jQuery 1.2.6 - 1.7.1. There is also a JSFiddle example.
If you need help adapting this for Rails let me know, however it should be straight forward.

How to block writing in input text?

I just creating a booking system and I want that the users will choose a date from the calender and it'll show in input text - that I did!
Now I want to block the writing in the input text (just bring to calender writes there when the user choose a date).
How do I do it? I guess JavaScript, but how? I dont know JS very wall..
Thank you very much!

Give your element the readonly attribute, this will disallow users to type anything into it. However, you will still be able to write to add through javascript for example when a date is chosen. Here is an example:
<input type="text" id="txt" readonly="readonly">
JavaScript:
var el = document.getElementById('txt');
el.value = "Testing......";
Working Demo

<input type="text" id="someId" disabled="disabled" />
The disabled property will prevent any user input, but you can still write to it via your javascript calendar method.

For those who wants to prevent typing but not having the disabled style, can try:
<input type="text" onkeypress="return false;"/>