I have the Following Form:
How do i do the following:
When I chose a user from the select user drop down menu, After selecting the user I want to dynamically fill in the data below ? How do I do this without refreshing the page or loading another page?
I am using ASP.NET MVC
I would have to get the User ID from the Select User and then get the appropriate roles from the model
You could use AJAX. Subscribe to the .change event of the DropDown, retrieve the selected value, perform an AJAX call to a controller action sending the selected value which will return as JSON the corresponding list. Then in the success callback of this AJAX call add the necessary information to the lists.
Something along the lines of:
$(function() {
$('#id_of_your_users_ddl').change(function() {
var selectedValue = $(this).val();
var url = $(this).data('url'); // this assumes that you have appended a data-url attribute to your dropdown
$.post(url, { userId: selectedValue }, function(result) {
// result will be a JSON list returned by your controller action
// that you could use here to update your roles lists
});
});
});
Related
We are writing a form with google recaptcha v3. The form needs to get the token before actually submitted. A colleague wrote this code and it works, the form submits without any problem. But I'm confused on why it would work? Why isn't it caught in an infinite loop when .submit() function is being called recursively?
jQuery.fn.extend({
grecaptcha: function (options) {
this.submit(function (e) {
e.preventDefault();
var key = options["recaptcha_site_key"];
var acdata = options["action_data"];
var ele = this;
grecaptcha.execute(key, { action: acdata }).then(function (token) {
$("<input>")
.attr({
type: "hidden",
name: "g-recaptcha-response",
value: token,
}).appendTo($(ele));
ele.submit();
});
});
},
});
$("#formID").grecaptcha(option);
Are there any other better approaches to request a token before submitting?
Per :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
This method is similar, but not identical to, activating a form's submit . When invoking this method directly, however:
No submit event is raised. In particular, the form's onsubmit event handler is not run.
Your code sample is not calling the jQuery method to trigger a submit event on the form. That would, in fact, result in a loop. Try wrapping the ele variable jQuery. $(ele).submit () should result in a loop. By not wrapping the reference to this (e.currentTarget) in a jQuery object, and instead calling the DOM submit function, you are submitting the form without triggering an event or running the handler.
Makes sense?
I am sending the contents of a form, ie the name, upload fields etc to an api. After hitting the submit button, a new tab opens and I am getting a response:
{"success":false,"error":{"code":0,"message":"The given data failed to pass validation.","errors":{"something_id":["The something id field is required."]}}}
This (json?) doesn't make sense to a „normal“ user. So is it possible to get the response from the api before a new tab opens and display it in a way, so a user could understand? Like „Success – you can close the tab“ or „There was an error – you need to do this again“?
I don't know much about api and json, so it would be fine to learn if this could/would work?
here is a workaround:
First you need to load jquery on your page by adding this code within the tag or before the closing tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Then give your form an ID (say my_form_id)
Then add this within your HTML
<script>
$(document).ready(function() {
// listen for when the form is submitted
$('#my_form_id').submit(function(event) {
// get the form data
var formData = $('#my_form_id').serialize();
// send the form to API using Ajax
$.ajax({
type : 'POST', // define the type of HTTP we want to use
url : 'your_full_api_url', // the url where you want to POST the data
data : formData, // your form data object
dataType : 'json', // what type of data do you expect from the API
encode : true
}).done(function(data) {
if(data.success==='true') {
//No error... all went well
alert('Your data was successfully submitted');
//You can do any other thing you want here
} else {
//get the error message and alert it
alert(data.message);
}
});
event.preventDefault();
});
});
</script>
Now what happens is that each time the form is submitted, the script is called and the form data is collected and submitted to your API URL using ajax.
The response is then parsed and checked if data was successfully submitted.
If not, it will use the browser alert function to print our the error message from your API.
I am using the Google Address Autofill to populate some disabled inputs on the form. The idea is that
The user can see the data I am going to save (because not every field returned by Google is saved).
And they can not interfere with it and give an invalid mismatched set of fields.
Because the inputs are disabled, I cant see them in $POST when the form is submitted. I could mirror each field onto a hidden but enabled input. Is there a cleaner way to do this ?
You could collect them using javascript and add them to the url of the next form and attach it to the button.
You can enable them via javascript when the form is submitted. Give your form an ID, I've called it formId below, and then add the following right before your closing </body> tag
<script>
var form = document.getElementById('formId').addEventListener('submit', function(e) {
e.preventDefault();
var inputs = document.getElementsByTagName('input');
for (var i = 0; i<inputs.length;i++) {
inputs[i].setAttribute('disabled',false);
}
this.submit();
for (var i = 0; i<inputs.length;i++) {
inputs[i].setAttribute('disabled','disabled');
}
});
</script>
I'm working on master/detail page - master records are in a Kendo drop down list and associated detail data is in a kendo grid.
The dd & grid are bound to remote data.
Updating existing grid rows is working fine.
When a new row is saved to the grid, I need to insert the id of the selected drop down item (master record id) and add it to the json data.
My problem is I don't know how to determine if the data being saved is a new record or an edit.
I'm getting this error: "Uncaught TypeError : Cannot read property 'isNew' of undefined"
Thanks for any guidance here.
$issuegrid
->addColumn($issueOwnerCol)
->addColumn($issueDescriptionCol)
->addColumn($issueDueDateCol)
->pageable(false) //this is the toolbar in the footer
->height(300)
->navigatable(true)
->editable(true)
->save('onSave')
->edit('onEdit')
**->saveChanges('onSaveChanges')**
->addToolbarItem($igridCreate)
->addToolbarItem($igridSave)
->addToolbarItem($igridCancel);
Here's the js function:
function **onSaveChanges**(e){
var grid = $("#issuesGrid").data("kendoGrid");
var URL ="/issues/updaterecord.json";
var ddl = $("#woDD").data("kendoDropDownList");
var v = ddl.value();
if (grid.dataSource.data.model.isNew()){
alert("New Record")
}
grid.dataSource.transport.options.update.url = URL;
grid.dataSource.sync();
}
Well, it's a workaround, but in my onSaveChanges function, I had to append the required id to the create url and then extract the it on the server. I would have preferred to just add a key/value pair to the json payload.
function onSaveChanges(e){
var grid = $("#issuesGrid").data("kendoGrid");
var ddl = $("#woDD").data("kendoDropDownList");
var woID = ddl.value();
var createURL ="/issues/addrecord.json?woID=" + woID;
grid.dataSource.transport.options.create.url = createURL;
//when updating an edited record, transport will use the default url defined in php code.
}
I have a question regarding forms in google-apps-script. Lets say I have already created a form with a single page and a input box for text.
Is it possible to create the follow-up page dynamically, based on the data out of the textbox? Something like:
First Page: insert customer id -> continue -> Second Page: information about the customer.
I know that there are events like onLoad and onSubmit, but there is no onContinue event for example.
Is it possible to create something like that with google-apps-script? What would be the best way to archive such a behavior?
B.R.
Here is some working code
that demonstrates a multiple page form.
The code uses a single "hidden" state in a TextBox and multiple SubmitButtons to allow the user to advance forward and backward through the form sequence, as well as to validate the contents of the form. The two extra SubmitButtons are "rewired" using ClientHandlers that simply modify the hidden state prior to form submission.
Using the UiApp service, you have one doGet() and one doPost() function... but here's a way to extend them to support a dynamic multi-part form. (The example code is borrowed from this answer.
Your doGet() simply builds part1 of your form. In the form, however, you need to identify your form by name, like this:
var form = app.createFormPanel().setId("emailCopyForm");
You doPost() then, will pass off handling of the post operation to different functions, depending on which form has been submitted. See below. (Also included: reportFormParameters (), a default handler that will display all data collected by a form part.)
/**
* doPost function with multi-form handling. Individual form handlers must
* return UiApp instances.
*/
function doPost(eventInfo) {
var app;
Logger.log("Form ID = %s", eventInfo.parameter.formId);
// Call appropriate handler for the posted form
switch (eventInfo.parameter.formId) {
case 'emailCopyForm':
app = postEmailCopyForm(eventInfo);
break;
default:
app = reportFormParameters (eventInfo);
break;
}
return app;
}
/**
* Debug function - returns a UiInstance containing all parameters from the
* provided form Event.
*
* Example of use:
* <pre>
* function doPost(eventInfo) {
* return reportFormParameters(eventInfo);
* }
* </pre>
*
* #param {Event} eventInfo Event from UiApp Form submission
*
* #return {UiInstance}
*/
function reportFormParameters (eventInfo) {
var app = UiApp.getActiveApplication();
var panel = app.createVerticalPanel();
panel.add(app.createLabel("Form submitted"));
for (var param in eventInfo.parameter) {
switch (param) {
// Skip the noise; these keys are used internally by UiApp
case 'lib':
case 'appId':
case 'formId':
case 'token':
case 'csid':
case 'mid':
break;
// Report parameters named in form
default:
panel.add(app.createLabel(" - " + param + " = " + eventInfo.parameter[param]));
break;
}
}
app.add(panel);
return app;
}
To generate each form part, subsequent form handlers can use the data retrieved in previous parts to dynamically add new Form objects to the ui.