I want to style my managed_file-Field in a Drupal 7 Form-API custom form and therefore, insert a label element that will replace the "Browse for file".
So I want exactly this:
<input type="file" name="files[bild_0]">
<input type="submit" id="edit-bild-0-upload-button" value="Upload">
<label for="files[bild_0]">Choose Picture</label>
However, the Form API makes it very difficult to insert the label directly next to the input. "#prefix" and "#suffix" are not working. "#field_prefix" and "#field_suffix" inserted the html in a wrapper...any ideas?
Thank you very much in advance!
So, i finally figured out an alternative solution. I used the
'#field_suffix'
property on the Form API field to add the label element. Besides of that, I had to overwrite the initial id of the field via
'#id' => 'upload-selector-' . $index_of_picture field
Since the id of the actual input-field is now different from the div that contains the field, I could use the label of the field to trigger the file-dialog. I styled the label element to my needs and hid the initial input.
Related
I want to have a password input as simple as the HTML regular type="password" input (i.e.,
<input type="password" id="password_field">). Are there any built in styles (maybe like 'required') that does that? If not how can I have an obfuscated text field?
I was thinking perhaps I could use the HTML widget and add it there but I am not sure how to access the input's value within the HTML widget. I can imagine it can be done with jQuery, but I do not want to use it.
Code inside the onAttach event handler of your TextBox widget:
widget.getElement().children[1].setAttribute("type", "password");
widget.getElement().children[1].setAttribute("id", "password_field");
I would like to add a hidden input field to a gravity form like:
<input type="hidden" id="Campaign_ID" name="Campaign_ID" value="ABCD">
where "ABCD" is a value that can be changed in the Gravity form interface.
Any tips / ideas
Thanks!
Have you tried adding a Hidden Field via the Gravity Form interface? Hidden is one of the field types you can add via the Standard Fields box.
I just made a field, and it generated this:
<input name="input_10" id="input_2_10" type="hidden" class="gform_hidden" value="ABCD">
Unfortunately, I do not see a way to change the name, id, or class of the field, but you can set a label (which appears to do nothing) and value, and set the value to be dynamically generated.
Here is an article about the Hidden field in Gravity Form's Documentation:
https://www.gravityhelp.com/documentation/article/hidden/
In gravity form, you can add the hidden field using the form design page from Standard Fields. There is no need to add html code for that, gravity form will add the field code to your form.
If you want to assign the value of the hidden field to a static one, you can enter the value from in the Default Value of the hidden field from advanced tab. You can also utilize the Merge Tags to make the hidden filed value dynamic. For example, you could add {ip} merge tags if you want to make the value of the hidden field to be the user's IP address.
If you need to change the value based on user input from other fields (or anything else), then you can add PHP code that controls that.
let's assume the form ID is: 1, and the hidden filed id is 14, and you would like to change the value of the hidden filed based on the value of filed number 5.
The following code should be added to the functions.php file of your active theme.
add_action( 'gform_pre_submission_1', 'pre_submission_handler' );
function pre_submission_handler( $form ) {
if ($_POST['input_5'] == 'ABCD'){
$_POST['input_14'] = 'Value 1';
}
else{
$_POST['input_14'] = 'Value 2';
}
}
You can read more about the gform_pre_submission from this page.
https://docs.gravityforms.com/gform_pre_submission/
what are benefits of using a hidden field in ASP.NET when we can use another invisible element such as label or text box?
The hidden field generate <input type="hidden" /> element on the page, which cannot be seen but the client can get the element, set the data and pass to the server:
document.getElementById('<%= SomeHiddenField.ClientID %>').value = "data_pass_to_server";
after postback you can get the value:
var clientData = SomeHiddenField.Value; // "data_pass_to_server"
If you're using invisible textbox (<asp:TextBox Visible="False" />), there's no element generated in the html file.
Either way works, for text box, don't use .visible="false"
use
yourTextBox.Style.Add("display", "none")
or
yourTextBox.Style.Add("visibility", "hidden")
A hidden field renders as input type="hidden" in the resulting HTML. Being an input the value in the input is submitted to the server on postback while this is not the case with a label. Depending on whether or not you want that value submitted to the server you should use input or label. If you don't want the value to be submitted then label is the right solution and hidden field is wrong.
I am not sure what you mean by invisible textbox but if you are trying to make it invisible via CSS keep in mind that the input type has semantic meaning to search engines, bots, etc. Also at some point your HTML might be served without CSS or with different CSS and the text box will become visible to the user. Otherwise there are no differences between hidden field and invisible text box as both of them render inputs.
Practically you can achieve the same thing with any of them, but since you want a "hidden field", semantically speaking the hidden field in ASP.NET is your best bet for readability reasons.
Does any body have any idea how does the hidden field keep its value on post back when it is value is set from javascript and not from the server side code?
Can I create a text box that has this feature?
I worry I'm not understanding your question... but <input type="hidden" /> name/values get passed with a form like any other input, and you can certainly set their values with JavaScript, if you want. when you submit the form, it doesn't care - or even know - how the input fields got their values.
I have a checkbox list control on my asp.net web form that I am dynamically populating from an arraylist. In javascript I want to be able to iterate through the values in the list and if a particular value has been selected to display other controls on the page.
My issue is that all the values in the checkbox list are showing up as 'on' instead of the actual value set. How do I get the actual values for each checkbox?
Thanks.
Javascript:
checkBoxs=document.getElementById(CheckboxList);
var options=checkBoxs.getElementsByTagName('input');
for(var i=0;i<options.length;i++)
{
if(options[i].value=="Other")
{
if(options[i].checked)
{
var otherPub=document.getElementById('<%=alsOtherPublicity.ClientID%>');
otherPub.style.display='block';
}
}
}
Edit: The line that I'm having problems with is if(options[i].value=="Other") as the values showing up in firebug are given as 'on' rather than the values that I set.
Edit 2: The html that is produces looks like:
<span id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity" class="ucFieldCBL" onChange="alValidate();" onClick="alPublicity('ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity');">
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$0"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0">Text1</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$1"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1">Text2</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$2"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2">Text3</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$3"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3">Text4</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$4"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4">Text5</label>
</span>
It looks as if the issue stems from the lack of a value attribute available on the asp.net checkbox control as described by Dave Parslow. I'm currently trying a workaround by calling a function server side to return the text of the checkbox and using that instead.
options[i].checked will return true or false.
options[i].value will give you the value attribute of the checkbox tag.
I think your problem is not with the javascript but with the code that is populating the checkboxes. Are you binding the ArrayList as the CheckBoxList data source or iterating through the ArrayList and adding new ListItems to the CheckBoxList. If the former, consider switching to the latter and make sure that you use the ListItem constructor that takes both text and value parameters. If you look at the HTML source I suspect that you will see that the generated code has the value parameter set to on for all of your checkboxes which means that the values weren't actually bound in the codebehind.
Not 100% applicable here, but be aware that if you give a checkbox a cssclass, it gets a span wrapped around it, and the class is placed on that. This causes all sorts of cross browser problems when youre navigating the dom, or disabling checkboxes
I realised after much playing about with prerender events that I didn't actually need to know the exact value of the checkbox as the arraylist values would be in the same order as the checkboxes. I searched through the arraylist to get the position of the value that I needed and then used that position on the list of checkboxes.
It sounds a bit fiddly and I don't know if it would work for everyone but I thought I would put it up here anyway incase it helps someone else someday.
Thanks for all your help.