Replace text in input fields with a CSS generated image - javascript

I have input fields with value of ON or Off which I would like to replace with CSS generated image. Is this possible? I asked a similar question but about cells in a table. And I can replace the cell values with the CSS generated images. But I've been fiddling around with INPUT Type=text fields and can't figure out a way to do the same replacement with input type fields. I have seen some here that use a pic stored in a url. But it would be great to use the CSS generated image instead of linking to a pic.
The code (html, css, js) is here.
<div class="kn-input kn-input-short_text" id="kn-input-field_95">
<label for="field_95" class="knack-input-label">
<span class="kn-input-label">Cash</span>
</label>
<div class="input">
<input id="field_95" type="text" value="On">
</div>
</div>
<div class="kn-input kn-input-short_text" id="kn-input-field_95">
<label for="field_97" class="knack-input-label">
<span class="kn-input-label">Internet</span>
</label>
<div class="input">
<input id="field_97" type="text" value="On">
</div>
</div>
sOn = '<div class="button-wrap"> <div class="button-out">On</div> <div class="button-switch"></div> </div>'
$('span:contains("On")').html(sOn);
The last line of code is what works to replace cell values in a table. I don't know how to do the same for input field values.

To replace the input fields, just do exactly that:
$("input[type='text'][value='On']").replaceWith(sOn);
Your FIDDLE updated with above line.

Related

serializeArray() does not work with dynamically loaded hidden fields

I have the following code which converts all field values of a form to a single object. However, it is not converting hidden fields that are dynamically loaded (but it would convert them if their values are hardcoded).
According to my research, serializeArray() should cover hidden fields as long as they have names. And mine do have names. So I can't figure out what's wrong here.
serializeArray():
var data = {};
$("#form1").serializeArray().forEach(function(x){
data[x.name] = x.value;
});
console.log(data);
Dynamic loading of hidden field values using JQuery
$("#field1").val("400"); //400 is just an example here
Form:
<form id="form1">
<!-- Not serialized -->
<input type="hidden" name="field-value.hidden.1" id="field1" value=""/>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Works fine -->
<textarea id="field2" name="field-value.show.1" rows="3" cols="10"></textarea>
</div>
</div>
</div>
</form>
Summary of issue:
serializeArray works if input looks like:
<input type="hidden" name="field-value.hidden.1" id="field1" value="400"/>
but not if it is:
<input type="hidden" name="field-value.hidden.1" id="field1" value=""/>
$("#field1").val("400");
One workout I just discovered from reading here:
(https://stackoverflow.com/a/25402639/4996722)
$("input[id=field1]").val("400"); would correctly put the value in there. However, this may be a JQuery bug as there is no good reason behind why $("#field1").val("400") does not work as they are the same thing.

programmatically setting Bootstrap radio button text

I am trying to set up a set of radio buttons using Bootstrap in javascript
The code I am trying is:
var viewedFilterButtons = $("<div>").addClass("btn-group").attr("data-toggle", "buttons");
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off").append($("<label for=\"viewed-important\">").text("Important"))));
viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed").attr("type","radio").attr("name","viewed-filter").attr("value","viewed").attr("autocomplete","off").text("Reviewed")));
(note that I'm trying 2 different things to get the text into the button -- in the first input I'm embedding a label and in the second I'm just trying to set the text of the input. Neither is working right now.)
This generates the following HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="viewed-important" name="viewed-filter" value="important" autocomplete="off" type="radio">
<label for="viewed-important">Important</label>
</input>
</label>
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed
</label>
</div>
Note that the input doesn't seem to be closed in the second case. I'm getting this HTML from the Web Console Inspector in Firefox.
What I'm getting is a set of tiny radio buttons with no text. The toggle behavior works fine.
What am I missing here? When I manually generate a set of labels for radio buttons like this directly in the HTML it works fine.
<label class="btn btn-primary">
<input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed</input>
</label>
This is because you append the <label> inside the <input/>.
You're trying to do this :
<input> <label>Important</label> </input>
However, <input/> is a self-closing tag, not a container like a <div>.
You should design your structure like this :
<label> <input/> Important </label>
input elements cannot have children w3 specification. Put the label after it.
var viewedFilterButtons = $("#mainDiv").addClass("btn-group").attr("data-toggle", "buttons");
var inputElem = $("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off");
viewedFilterButtons.append(inputElem)
.append($("<label for=\"viewed-important\">").addClass("btn").addClass("btn-primary").text("Important"));
<link href="https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="mainDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

bootstrap-year-calendar... change popbox distance from text field

I am using bootstrap-year-calendar and when I click in the text field the popbox with the calendar selection shows up about 100px above the text field instead of directly at the text field?
If the popbox appears below the text field, it shows up directly at the text field, the problem is only when it shows up above the text field...
Here is my html
<div class="form-group">
<label for="datetimepicker">Application deadline:</label>
<input class="form-control" type="text" style="width: 300px;" id="datetimepicker">
</div>
and here is my javascript
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
});
</script>
since this is just following the minimal example I guess that there is some sort of collision with other parts of my code?
Is there an option to modify the position of the popbox?
If anybody has the same problem... changing the html to this solved it for me...
<div class="row">
<div class="col-lg-6">
<label for="datetimepicker">Application deadline: </label>
<input class="form-control" type="text" style="width: 300px;" id="datetimepicker_example">
</div>
</div>
even though I don't know what is wrong with my original html?

Angular ngSwitch hiding label element?

I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O
You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>

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('');

Categories

Resources