As I'm not that familiar with JavaScript, I did some research around the web to have sth. to go on, but was not able to solve my problem.
I created a fiddle to show you how it shall look like.
Well, my problem is that the light-grey pre-filled value "E-Mail" shall not be deletable, but the value itself shall be extendable in black font color.
Have you got an idea how to make it happen?
Thank you.
try this
http://jsfiddle.net/wf9zX/2/
use lable for that input field and concat input field value and lable text
Solution 1
Why wouldn't you use two inputs styled differently ? You can disable or make the first one readonly and still concat both input POST values.
I don't think styling INSIDE an input is very W3C friendly.
Solution 2
Use a background image (an image where "E-mail" is written) in your input with some padding-left. The when you get the POSt value, just add the string "E-mail" to it. It's like they do cutom search button icons on inputs.
See the new fiddle: http://jsfiddle.net/gxY5P/4/
Hope this helps.
Related
I have a jQuery calculator that I built using a conversion tool called Appizy. It takes a excel calculation and converts it into jQuery and html.
Here is the site: https://staging-homecarepulse.kinsta.cloud/pricing-calc/
What I am trying to do is grab the input values that are displayed and append them to a link for example i want to create a dynamic link with these parameters
?demo_request_type=es&active_clients=[NUMBER]&active_caregivers=[NUMBER]
where number is, the input values from the calculator (NOT RESULTS) should show.
Would much appreciate any suggestion in the right direction.
Thank you!!
i was able to solve this by adding a value to my inputs
<input type="text" id="qta_field1" value="${item.value}"/>
I think added this my button link
onclick="this.href='http://www.google.com?demo_request_type=example&active_clients='+document.getElementById('qta_field1').value +'&active_caregivers='+document.getElementById('qta_field2').value"
this opens up a new window with the parameters set in the input field by the user
I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');
Good morning,
I have a web page in which you can rate systems.
I created a javascript to dynamically add new systems to be evaluated and to remove them. The problem is that I have to manually change the radio buttons names, so they don't become one giant radio button.
When adding new buttons it's easy to just change the name of the new radio-buttons from radio-button-0 to radio-button-1. But, when removing, I have to rename all items, or there will be gaps (radio-button-0 and radio-button-2 exist, but not radio-button-1).
In the other hand, selects don't have to be renamed. They will just be selected in separate and I can check their value later as an array easily.
I was wondering if there's anyway to create a select item, but change its appearance so it will look like a radio button. Or if there's any easy way to create new radio-buttons without them grouping together (It also can be a jQuery approach).
I would rather not use XForms Select1 tags.
Thank you,
The only things you can style about an a <select> + <option> are background-color and color.
The easiest way to accomplish what you want is probably to use some sort of a plugin. Either that, or you could possibly write some sort of script that populates X amount of radio buttons with an incrementing name to go under each tag with the class Y.
Why do you need to name them by number? Why cant you name them by the attribute label that you have instead if a name/label/attribute is required data.
Then there will be no gaps because you are using labels instead of numbers. Ofcourse this requires each label to be unique. But I dont see why anyone would like to add 2 labels/attributes with exactly the same name, so you could do a validation on that.
I am trying to set value to a hidden column. Previously i have achieved this by doing:
var bc = $("select[title='Broadcast Channel']").val();
$("select[title='Execution Channel']").val(bc);
This works fine as I am able to get the column which exist in html source.
Now I am trying to set value to a hidden column which I have hidden in Sharepoint 2010 list setting. And I am not able to find it under html source (e.g. <input type=hidden....>).
How can I set value to this hidden column?
Not sure if the following method will be acceptable to you, but here goes...
In sharepoint, make the input field non-hidden. Instead, make it invisible at document.ready() using JQuery. If the input field is given a specific ID/class name, you can get a reference to the same, and set the text (using text() function), or for more complex situations, consider enclosing it all in a div.
Best Regards,
Gopal Nair.
In share point make the field as text input and then using jquery make it hidden and then set the value. try something like
$('input[type="text"][title="abc"]').attr('type','hidden').val("abc");
There is a common problem that if an element is hidden from back end code, normally it is simply not rendered in the html generated. Elements that needs to be manipulated at the front end need to be shown but hidden using html or js code.
I'm creating a form, and I'm validating it with JavaScript. The way it works now, is if a value is not correct, it displays an alert stating that you need to enter text. My question is, how can I change it so that instead of an alert, the text box will turn red, and something like: "This is required" will show next to the textbox. I think I can solve this with jQuery, but I was wondering if anyone had any suggestions. THANKS!
P.S. If you go to yahoo.com, click Sign Up, and click Create Account (without entering anything), you'll see what I'm aiming at.
You could create a CSS class with the following properties:
input.ERROR { border-color: red; }
Using jQuery, you can add this class to the input box with the incorrect value:
$("input[name=Address]").addClass("ERROR");
(assuming the input box with the name "Address" had the wrong value)
Well , I would use a jQuery Validation plugin which is at
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
You just need to add the css class "required" to the elements that you need to be validated