When using the FormHelper->create(...), the HTML that gets rendered looks like this:
<form action="/blogs/add" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<!-- omitted: form inputs -->
</form>
Why is that div with the display:none; style there? How do I make it not show up?
UPDATE: Just to be clear, I'm wondering why both the div AND the hidden input inside the div show up. They don't seem to be necessary, and therefore I don't want them to be there.
For anyone coming to this recently, there is a simple solution to this now that doesn't involve a custom helper. Using the FormHelper templates, the block of code in question is generated by the 'hiddenBlock' template. (See the full list of default templates here: https://api.cakephp.org/3.2/class-Cake.View.Helper.FormHelper.html#%24_defaultConfig).
So, to amend the example given in CakePHP's documentation to match this case and remove the wrapping <div> around the hidden <input> for _method (assuming HTML5):
// In your View class
$this->loadHelper( 'Form' , [ 'templates' => 'app_form' ] );
// in config/app_form.php
return [
'hiddenBlock' => '{{ content }}'
];
I was confronted with this problem because I recently implemented a Content Security Policy that doesn't allow inline styling, and I thought I should share my working solution.
The div is there to be valid HTML.
Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5. Source
Edit: To answer your question, you can't easily get rid of it. It's hard-coded into FormHelper::create(), you'd have to override that method in a custom helper. Why is it bothering you anyways?
This link might help you.
Whenever you use FormHelper->create() method ,A hidden input field is generated to override the default HTTP method. You can also change it by passing type option. Kindly ask if it not worked for you.
Try:
echo $this->Form->create('User', array(
'inputDefaults' => array(
'div' => false
)
));
The divs won't be created on any input of the form.
use hiddenField => false property
Related
I am using Django forms to apply some basic html feature such as data mask and input pattern. Below is the code on the forms.py for one of the input fields.
'contact_person' : forms.TextInput(
attrs={'class':'form-control capitalize','pattern':'[a-zA-Z]*'}),
or data mask
'primary_phone_no' : forms.TextInput(
attrs={'class':'form-control','data-mask':"000 000 000"}),
Once I make the changes and see the changes on the browser, inspect element and locate that field, I can clearly see the changes had been applied on the HTML but when I put the input I see no changes has taken place. Means nor of the feature such as datamask or pattern is happening.
Its a very strange thing I am facing. Did someone came across this and is there something am I missing?
Thank you
It might be related to the order of where you set the widget settings. This works:
class MyForm(forms.Form):
contact_person = forms.CharField(widget=forms.TextInput(attrs={
'class': 'form-control capitalize',
'pattern': '[a-zA-Z]*'
}))
primary_phone_no = forms.CharField(widget=forms.TextInput(attrs={
'class': 'form-control',
'data-mask': '000 000 000'
}))
I'm very new to Rails and I need to dynamically add/remove input fields on a "form_for" in Rails. I am using these inputs to alter a user's profile.
Here's the snippet I want to turn dynamic:
<%= f.label :languages, "Languages" %>
<%= f.text_field :languages, class: "shortInput", value: #parsed_json_user['user']['languages']%> <br />
I have seen many tutorials using nested attributes (I'm not even exactly sure about what those are) and such but I will not be using models. As you can see, I just want an object with a multitude of values (e.g. array) since I'll be using an API to update the "User" model.
I need something like:
Languages:
English remove
add new
Should I be using fields_for? Or somehow use JS or JQuery? Any help would be appreciated.
I searched everywhere for a similar question and haven't found any but if you actually know of or find one, pointing me in the right direction would be wonderful!
Thanks in advance
#languages = User's Languages
f.collection_select :user_languages[], #languages, :id, :name , {hide_label: true, :selected => #languages.first.id} , {:style => "width: 120px",:required => true}
Update: For single form, no nesting - one option is to hack together your own jquery. I had used a different site for my testing, but this Jquery example was the one I found easier. I removed the stuff about a counter for max fields ... it goes in the /app/assests/javascript/.js ...
$(document).ready(function() {
$(".add_field_button").click(function(e){ //on add input button click
e.preventDefault();
$('.input_fields_wrap').append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(".input_fields_wrap").on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove();
})
});
And the html code ...
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
If you're not having luck yet - Cocoon Gem or railscast 197/198 will do what you need with jquery which is dynamic. Ignore the parts about nesting and just take what you need from it.
Also, I'm still poking around in turbolinks which had an update recently...you might be able to find an answer there...probably not exactly what you would want...
From what I can tell is that is rely's on two paths you write in rails, that are then built upon via the jquery that acts on (add/delete) :before or :after the link_to_add_association or link_to_remove_association in order to add/hide fields from view on the dom & then the update button actually pushes the whole mess to through activeRecord into the database.
How do you add the title attribute to the DNN:Label control and have it render as a title attribute, <label title="myTitle">, in html?
Here is my code:
<div class="dnnFormItem">
<dnn:label id="lblDateNeeded" runat="server" controlname="DateNeeded" resourcekey="DateNeeded" />
<dnn:dnndatepicker runat="server" cssclass="dnnFormInput" id="DateNeeded" skin="Office2010Silver">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" Skin="Office2010Silver"></Calendar>
<DateInput DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" LabelWidth="40%"></DateInput>
<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
</dnn:dnndatepicker>
</div>
this.Page.Title = "My Custom Title";
However, in DotNetNuke this will only work in the Page_PreRender method (verified in DotNetNuke 6.2.3).
If you want to set it earlier, you must still use this method which boils down to this:
((DotNetNuke.Framework.CDefault)this.Page).Title = "My Custom Title";
The above will work in Page_Load, Page_Init and Page_PreRender.
If you want to modularize it more, you can add the following in your base class for your modules (a good idea to always do this):
public DotNetNuke.Framework.CDefault BasePage {
get { return (DotNetNuke.Framework.CDefault)this.Page; }
}
And then simply use:
this.BasePage.Title = "My Custom Title";
The great thing about this method is that you can use it for the meta description and keywords as well.
this.BasePage.Description = "My Custom Description";
this.BasePage.Keywords = "My Custom Keywords";
Source
The title attribute is not accessible in the DNN label. As the OP noted, if specified as an attribute in the front end code, it will be ignored in the output HTML. Furthermore, if added in the code behind using YOURLABEL.Attributes.Add(), it will also be ignored.
Since it is not possible using the properties of the DNN label, another option is needed. One option is to address the issue with JQuery.
The HTML output by the DNN label looks like this:
<div class="dnnLabel">
<label>
<span id="#ASP_PATH#_#YOURID#">Test Label</span>
</label>
</div>
The following JQuery will set the title attribute of the label based on the text in the SPAN:
$('label').each(function () {
$(this).attr('title', $(this).text().trim());
})
Running this produced the following changes to the HTML:
<div class="dnnLabel">
<label title="Test Label">
<span id="#ASP_PATH#_#YOURID#">Test Label</span>
</label>
</div>
This function runs over all labels on the page. The JQuery selector could be modified to identify the labels you need to modify, if it's not everything on the page.
This may not produce the exact output you are looking for but you have plenty of flexibility with the JQuery function. If you need to set a special value for the label and you know what the text is going to be, you could use an if or switch to identify the specific label and process it accordingly.
This must be something utterly stupid that I've done or am doing, but I have an input with a value attribute that simply isn't being displayed:
<div class="input text required">
<label for="Product0Make">Make</label>
<input name="data[Product][0][make]"
type="text"
maxlength="255"
value="AC Make"
id="Product0Make">
</div>
Has anyone ever seen this before? Do I have some kind of typo that I'm just blind to? For whatever it may be worth, here's the CakePHP code that's generating this line:
<?php echo $this->Form->input( 'Product.' . $index . '.make', array( 'default' => $product['Product']['make'] ) ) ?>
I have a small form with a handful of text inputs, 1 textarea and 2 selects. None of the text input values display, but everything else is fine.
Any thoughts would be appreciated. I can't even believe I'm having to ask this question, but that's how crazy it's making me.
Argh. I knew this was going to be something beyond stupid. There was a bit of Javascript that was clearing data. The clearing was useful in other places, but I didn't know it was executing so it was a serious pain to track down. Once I prevented the clearing in this scenario, my values actually appeared. Because I was looking at the code in web inspector, I assumed that it would be a "live" view, but I guess that's not entirely true.
Thanks for your help, everyone.
For my side, it was a problem only for Firefox.
I resolved by adding the attribute autocomplete="off" in the input field.
<input type="text" value="value must appear" autocomplete="off"/>
Mine was related to AngularJS
I was trying to put both an HTML Value and an ng-Model, thinking that the ng-Model would default to the Value, because I was too lazy to add the Model to the $scope in the Controller...
So the answer was to assign that default value to the $scope.variable in the controller.
For me it was browser caching. Changing the URL string or clearing history can help.
For Googler's who may have the same issue: This can happen if you have a non-numeric value in a number type input field.
For example:
<input type="number" value="<? echo $myNumberValue; ?> "/>
This will show nothing even though Dev tools says the value is there, since the extra space after ?> makes it non-numeric. Simply remove the extra space.
Are you confusing the uses of the 'default' and the 'value' parameters for $html->input()?
If you're are using 'default' => $product['Product']['make'] and $this->data is present, the field will not be populated. The purpose of the 'default' parameter is to display a default value when no form data ($this->data) is present.
If you want to force display of a value, you should use the 'value' parameter instead. 'value' => $product['Product']['make']
For me it was because I was using the <input> tag without enclosing it inside a <form> tag
Had a similar problem with input value retrieved via ajax, correctly set and verifiable via browser console, but not visible. The issue was another input field having the same id, and it was not evident because of several JSP files included, many of them having forms.
I even set autocomplete to "off" with no result. I ended up putting the next jquery snippet at the document.ready event.
myForm.find("input").each((i, el) => {
$(el).val($(el).attr("value"));
});
Adittionally, this would be the equivalent in pure es2015:
document.querySelectorAll("myForm input").forEach(el => {
el.value = el.getAttribute("value");
});
If your not using a precompilor like Babel and you need compatibility for old browser's versions, change the "(el) =>" for "function(el)". I tried both codes in my scenario and worked fine.
For me the problem was that I had multiple inputs with the same id. I could see the value in the field, but reading it via javascript gave an empty value because it was reading a different input with the same id - I was surprised that there was no javascript error, just could not read the values I could see in the form.
For me it was wrong number format: Chrome expected "49.1", but ASP.NET passed "49,1", and it just didn't display!
<input type="number" value="49,1"/> // Should have been 49.1 !!!
Same problem occured on electron:
I was clearing the field with document.getElementById('_name').value = '' instead of document.getElementById('_name').setAttribute('value', "").
So I guess simple quote broke the field or input has a second value hidden attribute because I could rewrite on the fields and it won't change the value on the inspector
I had the same problem of #Rob Wilkerson, a onchange() was cleaning the value of the input with "", so i changed to 1. Such a dumb problem!
HTML
<input class="form-control inputCustomDay" type="text" id="txtNumIntervalo" onkeyup="changeTipoOptions()" value="1" min="1" />
Jquery
$("#txtNumIntervalo").val(1);
Mine was related to Angular.
I just ran into the same issue recently and realized that when you use NgIf to display a template, the said template does not automatically use display the data from the variables in the component.
As a quick fix I used ngClass just to Hide it and display it.
If anybody happens to be here because their input with type="dateTime-local" is not displaying the value... the value must be in format YYYY-MM-DDThh:mm
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload