Develop Reference

How to set contents of a BootStrap Input Group using jQuery?

Below is an example of Bootstrap Code to create a input-group. How can I use jQuery to set the contents of the input-group using the id?
<div class = "container">
<div class = "input-group-addon">Your name</span>
<input type="text" class="form-control" id="inputField" placeholder="Full Name">
</div><br>
Also, is there a way I can make the input-group not editable. I want to use it to display read-only text.
$("inputField").???? <-- What goes here??
Thanks!!

$("#inputField").attr('readonly',true).val('myValue')
if you have access to the html put directly readonly="readonly" as attribute of input.
you can put value directly in HTML with the value attribute.
ps: dont forget the "#"

$('#inputField').val('the value');

Copy Text from Input form into DIV

I want to create 1 input field and one Div.
When u write text in the Input and hit the button i want the text to be displayed in the DIV. Its so simple but it just won't work.. i hope someone can do this easy task for me.
I tried last:
<form>
Bearbeitungstext: <input id="textInput" type="text"><br>
<input type="button" value="text einbinden" onclick="$('texxxt').val($('#textInput').val())">
</form>
<div id="texxxt">
</div>

Try to use id selector properly,
$('#texxxt').text($('#textInput').val());
Also you have to use .text() instead of .val(), .val() is not a function for div elements. It is for form elements which are having value property.
And the best approach for your case would be binding an explicit event handler,
var div = $("#texxxt"),inp = $("#textInput");
$("form button").click(function(e){
e.preventDefault();
div.text(inp.val());
});

This can be done with php $_GET($whatever); also, to do this you will need the name="whatever" on the input field.

Bearbeitungstext:
<input id="textInput" type="text"/><br>
<input type="button" value="text einbinden" onclick="$('#texxxt').html($('#textInput').val())"/>
<div id="texxxt">
to change DIV content we use html() not val()

Select with Intern over CSS Selector ID Input Field

Hey i want to select with Intern over CSS Selector ID this input field and put some text in.
<div class="controls input-group has-success">
<input id="billingAddress.firstName" class="form-control valid" type="text" required="" value="" name="billingAddress.firstName" from="1..3" placeholder="" autocomplete="given-name">
I try this commands but nothing works for me:
findByCssSelector('form input[name=billingAddress.firstName]')
findByCssSelector('form input[name="billingAddress.firstName"]')
findByCssSelector('form input[ID=billingAddress.firstName]')
findByCssSelector('form input[ID="billingAddress.firstName"]')
findByCssSelector('input#billingAddress\\.firstName')
findById('billingAddress\.firstName')
findById('billingAddress\\.firstName')
Example Code:
findById('billingAddress\.firstName')
.click()
.type('test')
.sleep(200)
.end()
Could anyone possibly help me with that problem.
Thank you everybody for looking in my problem.

For findByCssSelector using attributes, the attribute value should be quoted, like:
.findByCssSelector('input[id="billingAddress.firstName"]')
For findById, you don't need to escape periods (the ID is just a string, not a regex):
.findById('billingAddress.firstName')
In a quick test with your HTML snippet, both of these work.

How to modify label of input using JQuery

I have HTML like following :
<div class="task-manager">
<label>Manager: <input type="text" value="" /></label>
</div>
I need to modify text of label Manager dynamically.
I tried using JQUERY text method, but it replaces input type also.
$taskTemplate.find(".task-manager label").text("M123")

You can use:
$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:";

You should change your HTML code, because <input> field is inside <label> and when you are changing value of this label, it's also overwriting and removing input form field:
<div class="task-manager">
<label>Manager:</label> <input type="text" value="" />
</div>

Just move the Input tag outside the label tag, because when your updating the text of your label, its erasing the content of label (which will obviously remove input tag inside it) , so change your code like this
HTML code:
<div class="task-manager">
<label for="title">Manager:</label>
<input type="text" id = 'title' value="" />
</div>
JS code:
$('.task-manager label').text('Deputy Manager :');
Live Demo # Jsfiddle:
http://jsfiddle.net/dreamweiver/w6arp71x/
note/suggestion:for attribute added to label to bind the input to the label by default

$taskTemplate.find(".task-manager label").contents().get(0).nodeValue = "M123:"
this worked for :)

Add Delete link / button to delete input field contents?

I am using an input form with multiple input fields.
These input fields can be pre-populated so I want to give the user an easy option of deleting then with a 'delete' link or button beside the field which deletes the full contents of that input field.
Pressing the delete button will also give them a text confirmation that it has been deleted.
I have attached a jpeg of what I am trying to do
I am using wordpress and gravity forms as my form builder. I am thinking maybe there is a jquery solution to do this but not sure how?
My code for one of my input fields is as follows, the inout fields on my form are all the same code but different id's of course so I did not want to paste everything here just 1 as an exmpale.
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144">
</div>
// this would be the link to delete the contents of input field "input_15_144
Delete
</li>
Thanks for any help!

Here, I've added custom ids etc. for the fiddle. You can use it the way you like:
Older: jsFiddle - Lewdh
Edit
To meet newer requirements, some more edits were made.
jsFiddle - Lewdh/4/
HTML Code
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_144" />
<button value="delete">Delete</button><br />
</div>
</li>
<li id="field_15_145" class="gfield">
<label class="gfield_label" for="input_15_145">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_145" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_145" />
<button value="delete">Delete</button><br />
</div>
</li>
jQuery Code
$(document).ready(function() {
$("li div button").on('click', function() {
$(this).prev("input").val('');
$(this).parent().append('<span style="color: green;">Success! Your link has been deleted.</span>');
});
});

HTML
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144">
delete <br/>
<span id="msg" style="color:green;"><span>
</div>
Jquery
$('a#delete').click(function(){
$('input#input_15_144').val('');
$('span#msg').html('deleted successfully');
});​
check the demo
You can do the styling as you want. I have created the simple eg which include the functionality you wanted. If you have any problems let me know.

jQuery's val() does what you need. In the above example you could use a function like this.
$('#input_15_144').val('');

Try this
$(function(){
$(".ginput_container").append('delete'); // append a delete link
$('#delete_link').click(function(){
$('#input_15_144').val(''); // set the textfield empty
$(".ginput_container").append('<br><span>Success - Your link has been deleted</span'); // put a success message
});
});
You may apply css for the formatting

Sorry if i misunderstood your question but to reset input type text field, you only need to set its value to empty string:
$('#id').val('');