Reset button does not clear fields in HTML5 - javascript

I have a page which reads from a file and displays filtered results depending on what is entered in the search boxes. When I click the reset button it clears the search boxes which is what I want, but I also want the filtered results to be cleared too. If I uncomment the call below, which is commented at the moment - it works but the search boxes do not clear.
HTML:
<form>
<ul data-bind="foreach:properties">
<li><input data-bind="attr:{placeholder:id},event:{change:$root.onInputChange}, value:value, valueUpdate: 'afterkeydown'" /></li>
</ul>
<input type="reset" value="Reset"/>
<!--<input type="reset" value="Reset" data-bind="click:$root.onclick"/>-->
</form>
<p></p>
<table data-bind="foreach:itemsFiltered">
<tr data-bind="foreach:$parent.formatItem($data)">
<td data-bind="text:value"></td>
</tr>
</table>
I need the search boxes and filtered results to clear.

Resetting a form resets the fields in it back to their default values (as specified by the value attribute). It doesn't clear the fields unless the default values are blank.
Your JavaScript is setting value attributes.
If you want to blank the fields, you'll need to set their value property to an empty string instead of simply resetting the form.

Related

DatePicker Does Not Respect Form Reset

I have an asp.net form with various textboxes and kendo datepickers. I allow the user to fill in the form and if they decide to start again I have a reset button for them.
The reset button should reset the form to its original model data. To be clear I don't want to reset the form to blank values, I want to reset all the inputs to their original model values.
This works nicely for the textboxes however after hitting the reset button the datepicker simply displays a "d" and not the original model value.
I use the following javascript/jquery to reset the form:
$(this).closest('form')[0].reset();
Here is my extract form code with the datepicker:
<tr>
<td><label asp-for="Aircraft.SerialNumber" class="frm-label"></label></td>
<td>
<input asp-for="Aircraft.SerialNumber" autocomplete="off" class="k-textbox k-state-disabled" style="width:400px" disabled />
<span asp-validation-for="Aircraft.SerialNumber" class="text-danger"></span>
</td>
</tr>
<tr>
<td><label asp-for="Aircraft.ManufactureDate" class="frm-label"></label>
</td>
<td>
<kendo-datepicker name="DatePicker" for="Aircraft.ManufactureDate" class="" style='width: 400px;' />
<span asp-validation-for="Aircraft.ManufactureDate" class="text-danger"></span>
</td>
</tr>
I'm not sure wether this problem lies with the telerik widget or my jquery/javascript code so I have also posted here
I tried with code sample :https://demos.telerik.com/aspnet-core/datepicker/tag-helper
And using :
$("#FormID").trigger("reset");
It can successfully reset datetimepicker to default model value :
<kendo-datepicker name='datepicker'
for="OrderDate"
style='width: 100%;'></kendo-datepicker>
But not work for datetimepicker which set with static value(change to format string) :
<kendo-datepicker name="monthpicker"
start="CalendarView.Year"
depth="CalendarView.Year"
format="MMMM yyyy"
value='DateTime.Parse("November 2011")'
style="width: 100%;"></kendo-datepicker>
But you can always set the value for that(store value form model/viewbag in hidden field) :
$("#monthpicker").val("November 2013")
EDIT :
So as a workaround , you can add hidden field :
<input type="hidden" id="DeOrderDate" asp-for="OrderDate"/>
And then use Jquery to re-bind the value :
$("#FormID").trigger("reset");
$("#OrderDate").data('kendoDatePicker').value($("#DeOrderDate").val())
That should work for special scenario .

Javascript on click set input before ajax

I have three inputs in the following form. Two inputs type is text and another one input type is hidden. Now when I click the submit button then two input values need to set the hidden input before run the ajax query. Because, ajax will get the data from the hidden input only. I have tried it myself but, it's not working for me. Now, when I click the submit ajax working first then set the both values to hidden input.
<form>
<input type="text" class="date" value="2018-11-09">
<input type="text" class="time" value="15:00:00">
<input type="hidden" class="date-time" value="">
<button type="button" class="button">Submit</button>
</form>
For the following code I am assuming that the 'Submit' button has its type changed to 'submit' as this will give you more control of when the form is submitted:
$('form').submit(function(event) {
event.preventDefault(); // stop the form from automatically submitting
$('.date-time').val($('.date').val() + $('.time').val());
console.log($('input[type=hidden').val());
// call your ajax here
});
The important line here for your question is:
$('.date-time').val($('.date').val() + $('.time').val());
This sets the value of the input .date-time to the input of .date and .time, although I would recommend using ids instead of classes as they are unique

How to enable HTML elements on submit

I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?
Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.
Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm

Javascript - input fields added dynamically not available

I am using Javascript to add new rows to a table when an image is clicked in a classic ASP page. Those rows contain a number of input fields with id's and names that include the row number. I am adjusting those ids and names for the new row. The operation is visibly working and the new row appears at the bottom of the table where I wanted to put it. Also, if I select the new row then view selected source in Firefox, I can see the new row's HTML with id's & names as expected.
When I submit the form, however, the new fields are not availabe and the loop below does not report them:
dim sItem
For Each sItem In Request.Form
Response.Write(sItem)
Response.Write(" - [" & Request.Form(sItem) & "]<br>")
Next
I am no Javascript whizz and have no idea why this might not be working. Any help would be appreciated.
I know you've worked it out now, but just thought I'd write up my comment for future visitors (and hopefully some points too?!)
To ensure all the input fields you want are submitted with the form, they must be enclosed inside the <form> tags. e.g.
<html>
<body>
<form id="myForm" action="fooPage.asp" method="post">
<!-- These two input fields will be submitted to fooPage.asp -->
<input type="hidden" name="myhiddenField1" value="123" />
<input type="text" name="myTextField1" value="hello world" />
<input type="submit" value="Submit myForm" />
</form>
<!-- These two input fields won't be submitted to fooPage.asp -->
<input type="hidden" name="myhiddenField2" value="456" />
<input type="text" name="myTextField2" value="hello world 2" />
</body>
</html>

prevent button to reset textbox value

I am trying to create mcq question and able to add the question. but the problem appear when i already fill the textbox and when i press the add question button, the textbox value always disappear.
<form name="newdocument">
<div id="questions" data-role="fieldcontain"><input type="text" value="dsa"/></div>
<input type="button" value="Add Question" onclick="AddQuestion();" />
</form>
the javascript code is on http://jsfiddle.net/Xv3Xq/1/
Dont use innerHtml+=, its bad. The stuff you write in an input field will get erased, since its not considered when using innerHtml but rather erased. Use jQuery! Something like:
$('#addQuestion').click(function() {
$('<input />').appendTo($('#questions'));
});

Categories