I want a html-form to
open a new window (which contains 2 frames)
send the data of the form to one of these frames as a request
Is this possible? Currently, the form just opens a new window with and sends the request to the URL of the page that processes it. But what I want is that the new window that opens has two frames, one of which processes the form data.
I hope you understand my question and thank you for an answer.
Option A
you will need to use AJAX and make those steps:
Open new window
Send request by using AJAX
Get response
Put response to DIV in new window
Option B
you will need to create special html file that will be default page one of frame. next you will need to copy whole form with values of inputs to this file and trigger the submit. this way is without AJAX but it's more hmm.... twisted?
tell which option you prefere and then i can help you with code if you want of course
You can open and access new window by:
newWin = null;
newWin = open("page.html", 'win1')
if(newWin&&newWin.open&&!newWin.closed){
newDiv=newWin.document.createElement("DIV")
newWin.document.body.appendChild(newDiv)
newWin.focus()
} else {
alert("The window is not open")
}
Related
I have a form that when a customer fills it in, the data gets sent to Mailchimp when the button gets clicked. After this process id like the customer to get sent over to a thank you page to download a PDF document. Can a button have to actions like this?
Yes. You just need to use e.PreventDefault() function, so it does not refresh the page until you complete all your tasks. Just add an EventListener to the button.
document.getElementById("myBtn").addEventListener("click", sentEmailsAndRedirect);
function sentEmailsAndRedirect(e){
e.preventDefault()
sendMailChimp():
donwloadPdf();
window.location.href = "http://www.page.com";
}
I am attempting to trigger a form submit from an input [type=file] dialog box window. I'm trying to streamline the process of selecting an image and then having to click another button to submit the form to the database.
I have updated the question to include screenshots and code below to hopefully make the issue I'm having more clear.
Note:
It was asked why I don't add an id to the input button, but I can't, as the file input is invoked from the function, and as it's a windows process, I have no ability to add/change it.
Here's some code / pics to better illustrate the issue.
1 - The user clicks the change pic button to update their profile image. This button runs a shortcode [upload-user-profile-avatar].
2 - The shortcode triggers the standard input file open box window.
3 - After the user either double clicks a file, or single clicks a file and presses the open button, the form for the user profile avatar plugin is automatically submitted.
Attempts:
I originally started out using jQuery to attempt to attach to the form and submit it on click,
jQuery('input[type=file]').change(function(){
nameOfForm.submit();
});
However I read in a SO post that someone else was attempting something similar, and jQuery wouldn't submit the form, so they had to switch to javascript, which I did (since jQuery wasn't submitting the form)...and I came up with this for testing purposes.
var form = document.getElementsByClassName("update-user-profile-avatar");
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'file') {
console.log(inputs[i].value);
form.submit();
}
}
So this was helpful in so much that I could see that the open dialog window is grabbing the correct filename, but still, the form isn't getting submitted and I'm getting a form.submit() is not a function error in the console.
So then I read that html form submissions can have a lot of weirdness about them, so try something along these lines.
jQuery('input[type=file]').change(function(){
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'file') {
console.log(inputs[i].value);
HTMLFormElement.prototype.submit.call(form);
}
}
});
which produced this error:
'submit' called on an object that does not implement interface HTMLFormElement.
So I think I'm spinning my wheels here. I sense this is doable, I'm just not using the right method to do it.
I think you're looking for the change event:
Demo
$('input[type=file]').change(function(){
$('form').submit()
})
Unfortunately for security purposes the browser isn't going to let you access the open window. However with the .change() method, it will trigger whatever function you'd like once the value of the input has changed. Whether they double click a file to select it, or click the file and "open" button.
I'm looking to make a simple HTML site that redirects to another URL. I want the input inside the textbox to 'complete' a URL, and then open said completed URL. However I've not found any way to do such a thing, and I'm rather new to coding in general so I turned to here in the last attempt.
I want the user to be able to input something (say they input "abcxyz"), and when they click a button or press enter, they are redirected to something like 'genericsite.com/[input]' (in this case, genericsite.com/abcxyz).
I assume I'll have to use some JS for this, but I have almost zero knowledge on JS so I was having trouble finding any topic on this. Any help would be appreciated.
Ended up finding an old snippet of code from a few years back that worked for me
{
var name = document.getElementById('myName').value;
var url = 'http://www.genericsite.com/' + encodeURIComponent(name);
// In current window
window.location.href = url;
// In new window
window.open(url);
}
I am currently trying to build an application using Google App Maker. After a user hits a "Create" button, depending on whether the files were successfully or unsuccessfully sent, a popup snackbar should display saying "File successfully sent" or "Something went wrong. File not sent." I want to indicate to the user in the final deployed application (no bottom console log) whether their files were sent or not. I do not know how to do this. I have tried creating separate pre-created snackbars (one for success, one for failure) and having the clientscript function display either one depending on what is returned from the serverscript function. However, I do not know how to show them. How do you display a snackbar popup in a clientscript function? Thank you for your help!
Please follow below steps in order to display Snackbar page.
Create a Snackbar page in your appmaker. In order to click on Left Hand Side panel '+' button on the "Page" section.
Choose Pop up. Click "Next" button. On the Next page Select "Snackbar" and click on "Create".
This will create a snack bar page for you. Open the snack bar page. On the bottom part you can see a text box which will display your custom message. Bind a Function to it. Show cased below.
Now in the client script add the following code to configure Snackbar.
This will create a Reusable Snack bar for you for all different messages.
//Client Script
var notificationText='';
function setNotificationText(text)
{
notificationText=text;
}
function getNotificationText()
{
return notificationText;
}
Whenever any event happens add the following code to Display Snackbar.
setNotificationText('Congratulations!!! You have successfully showcased SnackBar');
app.popups.Snackbar.visible = true; //Snackbar is page name.
Here configuring Snackbar code is optional, just to reuse one page for many messages. You can directly showcase the Snackbar page by adding app.popups.Snackbar.visible = true; code in your client script.
I am loading 2 jQuery UI tabs with data from ASP.NET MVC 3 PartialView using $.ajax(). I am specifying the '/controller/action' as URL. This works fine and I am able to load the two tabs with content returned by the partial views.
I have a Save button in the _layout.cshtml.On clicking the Save button, I want to get data from all tabs and send it to the controller as a JSON object.I want to use only one Save button for saving all data in the tabs instead of having Save button at the bottom of each tab.
The problem is I am able to get data from only the first tab. I get 'No Source Available' error when I try to get data from the other tab. The $('#some_id').change() event is also not fired for the controls in the second tab.
Please suggest if there is a better way to implement this ?
I would also like to know why the HTML generated by PartialView is not seen when I view source HTML of the page ?
Thanks.
It turned out to be an issue of async requests that were being made to load the tabs. I used the load() of jQuery tabs to resolve this.