Develop Reference

Binding a jAlert popup content to html content

I'm attempting to use jAlert to show a popup dialog with an input box. When clicking "OK" I want to grab the value from this input box to send to the server. I'm using jQuery to pull the content off a div which includes the input field. Problem is that when I use jQuery to try and get the contents of that input field, it doesn't work - it comes back as empty.
HTML as follows:
<div id="test">
<input type="text" id="def" />
</div>
JS as follows:
$.jAlert({ 'content' : $("#test").html()});
...and to try and access using jQuery...
$("#def").val();
I can get around it by force updating the field using a keyup listener, but it seems really clunky...
<input type="text" id="def" onkeyup="$('#def').val($(this).val())" />
After doing this I can access the content of the 'def' field. Is there a more elegant solution?

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/

How to Submit a Javascript Value in an Input Field

Simply, how can I do this?
<input type="hidden" value="some javascript value" />
I have a form whereby when a user clicks on Add More, more input fields are added via javascript.
I'm also using javascript-declared values to track and limit the number of fields a user can add.
I need a way for my php code to retrieve these javascript values.

Use append
$('#hidden').val('my Text');
input field should be
<input type="hidden" id="hidden"/>

the question is a bit vague, but i will give it a go
try adding a name as an array and then you can use get or post
<input name="myjavascriptinputs[]" type="hidden" value="some javascript value" />
in your php you will be able to use
foreach($_GET['myjavascriptinputs'] as $ajavascriptinput)

From the button you must be calling a javascript to add these fields dynamically. Simply append the code to that function to hand over these values to the field.
<input id="myinputfield[]" type="hidden" value="" />
<script>
function addOneMore(){
var newField = // code to add one more field
newField.value = newValue;
}
</script>
Will solve your purpose.

Select all text in textbox when label is clicked

I am using label for attribute for input elements in my website that will help blind users.
Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will
go in the start of textbox.
For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".
But what I want is that it should select "John". That means text of textbox should be selected.
Can anyone help me how I can implement this?
My code is shown below:
<div class="editor-label">
<label for="ContactName">*Name</label>
</div>
<div class="editor-field">
<div>
<input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" />
</div>
</div>

I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.
By using jQuery, you can use the select() method when the label is clicked, using something like this;
$(function() {
$('label').click(function() {
var id = $(this).attr('for');
$('#'+id).select();
});
});
A working example can be found here: http://jsfiddle.net/sf3bgwxr/

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;"/>