I have already checked this: How do you programmatically clear HTML5 date fields?
In my case, my form is pre-filled by existing value, and I want user change the date by null in database via the form updatting.
Here are what I tried:
$('input[name=theDate]').val(''); //does not work.
$('input[name=theDate]').removeAttr('value'); //does not work too
In the first case I get jj/mm/aaaa in the input but in dom I always have the existing value for this input
<input type="date" name="theDate" value="2022-04-03">
In the second case, I get jj/mm/aaaa and attribute value does not exist anymore, but the server is getting the existing value like the attribute exists but is just hide.
<input type="date" name="theDate">
How to deal with this?
Have you tried the "id" attribute?
<input type="date" name="theDate" id="theDate" value="2022-04-03">
$("#theDate").val("");
Related
Hello I have a form that allows the user to check as many options as they like and then hit submit. Is there any way to have the input type 'checkbox' submit more than one value?
For example right now I have:
<input type="checkbox" value="testuser">
But I want something like:
<input type="checkbox" value="testuser" valuetwo="1">
Is there any way to achieve this second option?
Thanks!
Since there is no way to submit to values, is there a way to submit them both in value one?
For example:
<input type="checkbox" value="testuser,1">
And if so how would I separate the value into two?
From your comments, it sounds like you have some JavaScript that handles the data before it's submitted. If that's the case, you can add a data attribute to the checkbox. To use your example, you could call it data-valuetwo.
<input type="checkbox" value="testuser" data-valuetwo="1">
Then, your JavaScript can use getAttribute to retrieve the value in your data-valuetwo attribute and handle it appropriately. It could look something like this:
var valuetwo = checkbox.getAttribute("data-valuetwo");
I found a way to do this without JavaScript or Libraries using a hidden form-field instead:
<input name="selectedValue" type="hidden" value="defaultValue">
<input name="selectedValue" type="checkbox" value="secondValue">
Now, if the checkbox is not selected, the hidden value is sent, if it is selected, the hidden value is overridden.
You might try alternative using select2, see: https://select2.github.io/examples.html (Tagging support, use two options limit). Again, there is no enough information supplied to fully satisfy Your question.
Another approach with select box and JSON is Can an Option in a Select tag carry multiple values? (can be rewritten for checkbox)
I read about value attributes documentation here. It does not clearly mention why is it required for the input tag.
According to the documentation
"value attribute specifies the value of an element" what exactly does it mean by "value"?
Is it a just for humans to know what exactly a checkbox is for?
Or does the value has anything to do with the backend database?
Is the value attribute just for front end purpose only?
I know this question has been asked previously, but not all aspects of what a "value attribute" is were discussed. So I would like to raise the question again, and have another discussion about it.
Is it a just for humans to know what exactly a checkbox is for?Does value attribute is just for frontend purpose only?
The value property sets or returns the value of the value attribute of a checkbox/radiobutton.
For checkboxes and radiobuttons, the contents of the value property do not appear in
the user interface. The value property only has meaning when
submitting a form. If a checkbox/radiobuttons is in checked state when the form is
submitted, the name of the checkbox/radiobuttons is sent with along with the value
of the value property (if the checkbox/radiobuttons is not checked, no information
is sent).
For example, when you are using <input type="button" name="foo" value="Click"/>, this will assign name 'Click' to your button. Same goes for text field: <input name="subject" type="text" value="Default text" /> will show you a text field with 'Defaul text' in it.
Value is where the actual value of the field is stored. Try changing it with jQuery or even with firebug and you will see that the submitted value will be changed!
Given <input type="checkbox" name="foo" value="bar"> the submitted data for the checkbox will be foo=bar if the form it is inside is submitted and the checkbox is successful (the main additional criteria for which is that it is checked). The server side form handler can then use that information.
The value is not exposed to the user of the browser (unless they use a developer tool of some kind). That is the job of the <label> element.
for example i have a disabled input that holds a time span, but i want to show it to user in a friendly format. just like select element, the option with in can hold a value that is different from what is displayed
<select><option value=1>Label is there</option></select>
can it be done with input ?
something like
<input type='text' value='<?=$time?>' label='<?=date('c',$time);?>' />
P.s: im not asking for a place holder.
currently im doing
<label for="app_time">Time</label>
<input type="hidden" value="2013-04-27 15:40:00" name="app_time">
<input type="text" value="27 Apr 13, 03:40" Disabled>
is there any other method ?
You can wrap an input in the label tag.
<label>Text for the input <input type="text" name="yourInput"></label>
Or you can reference the input from a label tag.
<label for="yourInput">Text for the input</label>
<input type="text" name="yourInput" id="yourInput">
You can add styling to the label element and it aids people using assistive technology as it links the description with the form element.
Not in the way you are asking, however you could always try it with a hidden element holding the real value...
Try;
<input type="text" value="<?=date('c',$time);?>" name="dummytime" />
<input type="hidden" value="<?=$time;?>" name="realtime" />
So to get $time it would be $_POST['realtime'] and to get the formatted date value it would be $_POST['dummytime'].
No, not in the way you're asking. The value of the text input is what is displayed within it.
As an alternative you could use a hidden input with the actual value, and then put the label in the text input
Your best bet is to handle converting the date to a timestamp on the server side. You'll need to ensure the submitted text is able to be converted to a timestamp, however, and show the user an error if not. There is not a built-in way for JavaScript to convert some given user-inputted string to a computer-readable date format.
Edit: I'm assuming you want the actual value to match whatever the user enters, not a static timestamp. If you want to submit a static value regardless of the user's input, simply use a hidden input (<input type="hidden">) and a secondary text input that you can ignore.
I wish to use the new input attribute from HTML5 DATE, only one problem, in the logic of the project, the user must be have the choice to delete the value, but i don't see, how to set empty value on this inputs
Assuming you want to make the value shown to dd/mm/yyyy, then click on Clear button.
In HTML5 on Chrome the date picker popup has a "clear" button at the bottom (next to "today")
<input type="date" value="">
<input type="date" name="NameItAnythingYouWant" value="">
I want to reset the value of a web page using JavaScript reset() function. Which operation is the JavaScript performing first: the reset or a clear? And what is the difference in between the two?
Also, how can I retrieve a value using reset function?
Clear vs. Reset
Clearing a form makes all input fields blank, unchecks checkboxes, deselects multi-select choices, and so forth; whereas, resetting a form reverts all changes.
For example:
<input type="text" name="name" value="Timothy" />
<input type="reset" value="Reset" />
This produces an input field with a value of Timothy. Let's say the user then changes the value to Berners-Lee. If the user clicks the Reset button, the value of Berners-Lee will revert (reset) to Timothy.
Clearing the fields would involve changing the value attribute of the input field to the empty string, as follows:
<input type="text" name="name" value="" />
You can change the value attribute using JavaScript.
Retrieve Value
If you want to get (or set) the value for a field, using JavaScript, try reading these:
http://www.irt.org/script/162.htm
http://www.javascript-coder.com/javascript-form/javascript-get-form.htm
http://www.quirksmode.org/js/forms.html
The reset function does the same as if you had an input type="reset" in the form and clicked it.
It will reset the values in all fields in the form to the value they had when the page loaded.
If you have a textbox like this:
<input type="text" name="info" value="Hejsan" />
calling the reset function will put the value "Hejsan" back in the textbox.
If you haven't specified a value (or not selected an option in a select field), it's reset to an empty value (or for a select field the first option).
The reset function can't be used to retrieve any values.
Edit: I modified my original answer to this thanks to Dave's comment. It looks like he also posted an answer while I modified my answer so he deserves the "accepted" answer.
Resetting a form resets the original values of all fields in a form. If there was no value it will clear the field, if there was a value it will "reset" the field back to that value.
When you clear a form, you would essentially by removing ALL values from the form. There is no "clear form" function in JavaScript, so you would have to go through each field and clear them manually.
So to answer your question, you just want to "reset" the form using the reset() function, not clear the form.