How to send date in form - html

how can I send date from my form ?
In previous form I have something like this :
#Html.TextBoxFor(m => m.UserName)
But now I have:
<input type="text" class="form-control" placeholder="Login">
So how I can pass my data ?

I think this is what you are looking for..
<input type="text" class="form-control" value="SOME THING" placeholder="Login">

add an 'id' attribute in your tag, and on postback of your form, you can query the form elements by id. Thats what the MVC code you posted does internally.

Related

Can't get value from checkbox Thymeleaf

<input id="isChecked" name="isChecked"
type="checkbox"></input><input name="_isChecked"
type="hidden" value="on"></input> <label for="isChecked">Checked</label>
I have this checkbox on the top of my *.html.
I want to use the value of "isChecked" input in a "form" like seting 1/0 (true/false) to a hidden input:
<form id="someForm" class="form xml-display form-inline"
th:action="#{/doSomething}" method="post">
.....
<input type="hidden" name="isChecked"
th:value="GET VALUE FROM THE GLOBAL CHECKBOX" />
.....
</form>
So can I do this without any JS?
Should I add an object in my java controller to the Model so I can set the value from the "isChecked" checkbox to it and then use the object in th:value="${objectFromJavaController}" for the hidden input ? I tried setting a th:object="${objectFromJavaController}" for the checkbox and then passing it to the hidden input but it didn't work (th:value = ${"objectFromJavaController"}) ?
So can someone help me ? Thanks in advance!
Surely somethin like this is simple enough?
<input id="newsletter" name="newsletter" type="checkbox" checked="yes" value="yes"/>
This brings back the same result. anything else would be no. (with PHP code telling them apart)

append string parmeters while submitting a GET form from HTML

Consider a form in Html:
<form action="demo_form.asp" method="get">
<div class="form-group" style="margin-top:7px;">
<label class=".... </label>
<input type="text" name="prefersite1" placeholder="http://www.website.com">
<input type="text" name="prefersite2" cla....;">
<input type="text" name="prefersite3" cl....">
<input type="text" name="prefersite4" c....">
<input type="text" name="prefersite5" cla....">
</div>
On using a 'submit' type button, is there a way to get appended prefersite_list[] or comma separated string in the url
The button I used is just:
<button type="submit">
Submit
</button>
I am working on django platform and use this url to extract variables by request.GET.get method in python. Is there a way to change name=prefersite[0], [1] etc so that I will get a single long string.
Instead of /?prefersite1=&prefersite2=&prefersite3=.. , I need a single /?prefersite=.
Using prefersite[] as name seems to be working for post forms, but I need to use get forms.

Html5Validation

I am new to Html5 so go easy on me with this question...
I am trying to use HTML5 built in form validation. I am using Bootstrap as my framework. Each time I go to submit a form, when it validates it is putting the bubble way below the form fields that needs to be fix. It would seem to the end user as though it is the field below the one that has the error (Product Name is the one with the error). I have included a screen shot of what I am geting. Here is my markup: Thanks for your help!!!
<div class="control-group">
<label class="control-label required" for="product_name">Name</label>
<div class="controls">
<input type="text" id="product_name" name="product[name]" required="required" placeholder="Product Name" class="span12" value="" />
</div>
In your FormBuilder, turn off the option require and use Form Validation.
Example in ProductType.php
$builder->add('name', 'text', array(
'label' => 'Name',
'required' => false // this will remove the HTML5 error which in my opinion is meh
));
In your validation.yml
Your\AwesomeBundle\Entity\Product:
properties:
name:
- NotBlank: ~ # when you call bindRequest on the form object it will validate the form data against that constraint
Make sure you check the Form Validation documentation because as of Symfony2.2 some constraints has changed.

How can I make an input field read only but still have it send data back to a form?

I have an input field:
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />
I want the field to display on my form but don't want the user to be able to edit the field. When the user clicks submit I want the form value to be sent back to the server.
Is this possible. I tried different combinations of disabled = "disabled", readonly = "readonly". Seems I always get nothing sent back for the field.
Adding a hidden field with the same name will sends the data when the form is submitted.
<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />
With Chrome browser on Windows 10 just having name="your_name" and the readonly attributes works fine: client cannot change a value, but it is sent to the server.
On the assumption you're using a script to create the form, I'd suggest using <input type="hidden" /> which will submit the variable with the form, but also use a regular <input type="text" readonly="readonly" /> to show the variable to the user. This won't submit the value, obviously, but will make it visible (while the hidden input will submit the value, but not show the value).
You could also do this with JavaScript:
var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');
for (i=0; i<inputs.length; i++){
if(inputs[i].type == 'hidden'){
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.setAttribute('disabled');
newInput.value = inputs[i].value;
theForm.appendChild(newInput);
}
}
Clumsy JS Fiddle demo.
alternatively u can make a little manipulation with javascript, remove the disabled property before form submitted
<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>
<script type="text/javascript">
function myFn(event) {
event.stopPropagation(); event.preventDefault();
}
</script>
<input onkeydown="myFn(event)" >
You can add 'readonly'='true' in the input element. With this the user cant edit and also send the value back to the server.
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" readonly='true' />
You should consider using input type="hidden" when submitting read-only fields. Otherwise, if you still need the value of input field to be visible, you should create another input (type=text) with a different name.
<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />

HTML input field hint

I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?
<form action="input_password.htm">
<p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
With a bit of JavaScript:
<input
value="Enter username..."
onfocus="if (this.value === 'Enter username...') this.value=''" ... />
HTML5 has a nice attribute for this, called placeholder:
<input placeholder="Enter username.." ... />
but this attribute is not supported in old browsers.
the best way to give a hint is placeholder like this:
<input.... placeholder="hint".../>
You'd need attach an onFocus event to the input field via Javascript:
<input type="text" onfocus="this.value=''" value="..." ... />
I think for your situation, the easy and simple for your html input , you can
probably add the attribute title
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
With HTML5, you can now use the placeholder attribute like this:
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
http://www.w3schools.com/tags/att_input_placeholder.asp
I have the same problem, and I have add this code to my application and its work fine for me.
step -1 : added the jquery.placeholder.js plugin
step -2 :write the below code in your area.
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
This is exactly what you want
$(document).tooltip({ selector: "[title]",
placement: "top",
trigger: "focus",
animation: false});
<form id="form">
<label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
<input id="myinput1" type="text" title="This tooltip persists" />
<input id="myinput2" type="text" title="This one also" />
</form>
[ref]
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
If you don't insist on the hint being displayed inside the input field, a modern solution would use a label element with the for attribute referring to the id of the input field, like this:
<form action="input_password.htm">
<label for="username" title="This is your user name...">Username: </label><input id="username" name="Username" type="text" size="20" maxlength="20"></p>
</form>
If you click the label, the input field will get the input focus.
If you hover over the label, it will show a longer explanation.
Generally the label should describe well enough what the user has to enter (in the case of user name it should be very much obvious).
Define tooltip text
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
Initialize and configure the script
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>