i have created one submission form by using java script i need to reset the input data by using on reset button.
Help me out of this.
reset: function() {
var oInput1 = sap.ui.getCore().byId("firstname");
oInput1.setValue("");*/
this.getViewById("firstname").setValue("");*/
}
input1.getId("firstname").setValue("");
onExit: function() {
input1.setValue("");
}
the code is not resetting the form data
First of all your provided code-sample is incorrect, please correct it.
Second, onExit is executed when your view is destroyed, setting the input value to empty is rather useless there.
If you want to reset data of your input-field when clicking a button you'll need to have the following elements:
1) an Input- & Button-control (with press-event) in your XML-view.
2) an id assigned to your Input-control to be able to refer to the control when pressing the reset-button.
3) The press-event from the button worked out in your controller.
XML
<Input id="firstname" value=""/>
<Button text="Reset" press="reset"/>
Controller
reset: function() {
var oInput1 = this.getView().byId("firstname");
oInput1.setValue("");
}
Related
I have 3 different forms on a single page where the user can switch between using JS. The forms represent different information and only one can be submitted at a time where the user is then redirected to a different page based on the form they selected. The issue is that I have 2 input fields that are common to these forms so they are outside the forms. I am able to submit them alongside a form if I set the :
<input id="default" form="form1">
value.
So I figured it would be a simple thing to just add a function in each script where I hide/show the forms to also change that parameter to the form I want submitted however it doesn't seem to work.
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.form = "form2";
}
I have something like this but it doesn't change the form parameter.
You need to actually give your input an ID of default so you can target it:
<input form="form1" id="default">
use setAttribute
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.setAttribute("form", "form2");
console.log(input1.getAttribute("form"))
}
form2Search();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="default" form="form1">
I am creating a simple form where user can set the hour.
Through javascript validation it checks that there is a value in the form.
Originally the global variable "userInputHours" is set to 0.
Within the function "validation()" when user fullfills the required criteria of filling in something in the form, the validation goes to "else" and should update global variable "userInputHours".
As a last step the HTML info-box should update the user input hours.
What is the problem? I cannot get the user form input value to stay on the HTML info-box (it is visible for less than a second, then it gets overwritten by the original value "userInputHours").
I know some answer would indicate I should use AJAX but that is to solve that only parts of the page is being reloaded. Using AJAX does not solve the base of my problem.
Scenarios and what works/don't work:
Scenario-1: Enter digits in form field "hours" and press button "submit-1":
Works: Console log prints "You added: [the number you added in HTML form].
Does not work: Running a console.log(userInputHours) from console itself returns the originally value [0] not the user added value. Note! For a very short moment, less than a second you actually see the user value in the HTML form but to be overwritten by original value.
Wanted results: In HTML info-box the number user added should show up.
Scenario-2: Pressing submit-2 calls function "outsideValidation()",
that set's "userInputHours" to 5:
Works: the global variable "userInputHours" is being updated from within the function. The console.log(userInputHours) confirmes that global variable has been updated. The HTML info-box is being updated with the update global variabl value.
Does not work: Since this test is not connected to the user form field "hours", it does not work to add a number in the field "hours" and get it updated onf the HTML info-box.
Expected results: Works as expected. Does not solve the complete needed solution.
// Global variables.
var userInputHours = 0;
// Validation.
function validation() {
userInputHours = document.getElementById("userInputHours").value; // Works
/* Validates blank fields */
if (userInputHours == "") {
console.log("A field is left blank"); // Works
alert("Please fill in all fields!") // Works
return false;
}
else {
console.log("You added: " + userInputHours); // Works
// You see added value for a very short moment. The it returns to the original glbal value.
document.getElementById("info-box-text").innerHTML = userInputHours; // Does not work.
return true;
}
}
/* Not part of validation. Connected to button "submit-2" */
function outsideValidation() {
userInputHours = 5;
document.getElementById("info-box-text").innerHTML = userInputHours; // Works but is disconnected from HTML form user input.
}
/* Not part of function. Only run when saving the script. */
document.getElementById("info-box-text").innerHTML = userInputHours; // Works by save the script.
.box-1 {
background-color: white;
width: 100px;
height: 100px;
}
#userInputHours {
width: 100px;
}
#submit-1,
#submit-2 {
height: 60px;
}
<form onsubmit = "return validation();">
Hours:<br />
<input id="userInputHours" type="text" name="hours" value=""><br /><br />
<input id="submit-1" type="submit" value="Submit-1 (inside form)"><br /><br /> <!-- Submit button -->
</form>
<br />
<input id="submit-2" type="submit" value="Submit-2 (outside form)" onclick="outsideValidation()">
<br /><br />
<div id="info-box-title" class="info-box-title">Info-box - (you have set hours to):<br /></div>
<div id="info-box-text" class="info-box-text"></div>
The return value of validation is used by the browser to determine if the default behavior of the form submit should be done.
If the return value is true then the default behavior will take place, and the browser will submit the form to the URL which is defined in the action attribute (if no value is present for the action attribute then it defaults to the current url).
With a form submit you will leave the current page and load a new one or reload the current one depending on the value of action. And because of that all value stored with js are lost.
If you do not want to send the data to the server you have to write return false in both cases to prevent the form submit.
I have a text field that should be filled before custom saving through HTML custom button.
When a user fills this field and tries to save through custom button, the text inside this field is null even if the user fills it.
Any suggestions Please?
Many Thanks for replying to my query. Actually, I am calling the below function from custom HTML button and I saw the result from alert message as NULL value until I leave the text box. Once I click some other Field then I am getting right value and saving the record successfully. I have posted my code below please have a look and suggest me how I can achieve it. So how to get the text value if a user doesn't leave the text box and click on the Save button?
function createRecord() {
var oDescription = Xrm.Page.getAttribute("new_description").getValue();
if (oDescription != null) {
var callentity = {};
var activityId;
var currentUserId = Xrm.Page.context.getUserId();
var oLeadId = Xrm.Page.getAttribute("new_lead").getValue()[0].id;
callentity.Subject = "Call Activity";
callentity.Description = oDescription ;
XrmSvcToolkit.createRecord({....Some more functions here...
})
}
HTML Button code for calling above function
<input id="SaveCall" onclick="parent.createRecord()" type="button" value="Save Phonecall"></p>
Xrm.Page.getAttribute(arg).getValue(val) won't return a value until focus is lost from the arg attribute (as you've found out).
Some options you could try:
document.getElementById('new_description_i')[0].value
Removing focus from "new_description" on click of your button.
I have an input file element within an angular view/form. I'm using ng-upload like this:
<input id="img" type="file" name="image" onchange="angular.element(this).scope().setFile(this)">
<input id="imgname" type="hidden" value=""></div>
Since I can't tell angular to listen for changes on input[type="file"] element, I've created the method that updates the hidden input that just holds the current filename. That way I can run my validator on the second field.
Another field I have has some sort of validator, like this:
<input ng-model="other" ng-change="chg()"/>
Now, the trouble is, if I trigger the validator, $scope.chg(), from setFile() method, I think I don't get the same scope - chg() runs, but it's as if the validator is in another scope and doesn't set my actual submit button to enabled. I tried logging from the chg() - it shows different scope then what I actually see on the view.
And if I later trigger the ng-change by changing the regular input field ("other"), it picks up the changes, or actually, it sets the submit button state correctly.
Now, I suspect this has to do with me calling the angular.element(this).scope().setFile(this) from my form instead of direct, $scope-bound method. But I cannot call $scope-bound method because it does not trigger - if I understood correctly, that's due to Angular not (yet) working with input type=file fields.
What can I do here?
I simply want to detect if there is a file or not so I can enable/disable the submit button appropriately.
I used followed flow that works for me:
<input type="file"
ng-model="upFile"
onchange="angular.element(this).scope().setFileEventListener(this)"
/>
From controller:
$scope.setFileEventListener = function(element) {
$scope.uploadedFile = element.files[0];
if ($scope.uploadedFile) {
$scope.$apply(function() {
$scope.upload_button_state = true;
});
}
}
Hope it will help.
I'm making an webpage using ASP.NET MVC.
I have the following input hidden definied:
<%=Html.Hidden("inputHiddenSelectedMenuId") %>
And i set its value in this js function:
function SetSelectedMenu(id) {
$('#inputHiddenSelectedMenuId').val(id);
}
After a make a postback in the js init function i want to use the value set in the input hidden but the value is string empty.
$(document).ready(function() {
$('div.nav > a').removeClass('active');
var id = $('#inputHiddenSelectedMenuId').val();
if (id != "") {
$("#" + id).addClass('active');
}
});
Can anyone give a hint why this is happening?
You are trying to read the value of the input in javascript. When you click a button on a form and it does a post back your page is being reloaded and the javascript re-runs every time the page is loaded. If all you are doing is reading the value of an input in javascript you do not need to perform a postback.
$('#inputHiddenSelectedMenuId').bind('click', function ()
{
var id = $('#inputHiddenSelectedMenuId').val();
// do stuff with it.
});
The click function will be performed without a postback.
Now, if you are trying to read the contents of the hidden field from within MVC after a post then this is a different issue. You will have to pull it from the form data through model binding (or reading it directly through the Request.Form[] collection.
public ActionResult SomeActionToPostTo(int inputHiddenSelectedMenuId)
{
//model binding should find the form field called inputHiddenSelectedMenuId and populate the argument in this method with it's value. If it's not an integer then just change the type of the argument to the appropriate type.
}