What is the best way to place 2 forms on the same page? - ajax

What is the best way to place 2 identical forms on the same page, but use the same form action and fields for each form? How can I keep response messages in the respective form area from which the data was submitted?
I'd have one form in the footer of my site, and one form in a popup on the home page of my site. I'm using a hidden div and Magnific to open the popup containing the same code from the form that is located at the footer. Essentially, both form do the same thing, and utilize the same form action.
I do not have access to the form action, or the code in the form action page.
Currently, the forms existing on the same "page" are no problem, but when I submit an email on one form, the errors and success messages show up on both the popup form as well as in the footer form.
I've read that this may be possible to do with ajax, but for completeness sake, I want to make sure that I'm building that I'm doing what I can with the form html, before moving on to studying ajax for this.

Sadly there is no nice html/liquid solution for this.
The only way is to use cookies in order to save information which form was submitted and show the error message only for that form instead of the two ones.
AJAX is not a good solution because of the Google Recaptch-a when you submit the form more than once, which is a real pain in the a** since there is no way to disable it and the form will fail if you try to submit it with ajax.
The easiest solution is to use cookies, other option is to rely on an APP for this, but it may be an overkill for this.
Forms in Shopify are... how to put it nicely... dumb... basic... not developer friendly or just not made to be tweaked in any sort of way ( excluding the front-end ).

Related

Form Bot Protection

I would like to protect a form against bots without third party solutions as CAPTCHA/reCAPTCHA and after searching the web I got a few ideas.
One of them is to have a non-existence or empty page in the form's action attribute, and when the user enter a required field, fill in the correct page with JavaScript.
Are bots able to fire/trigger the onfocus event of an HTML element?
I intend using this solution together with at least one more trap like test question, Honeypots etc.

Is AJAX only for dynamic content or can it also create buttons, and change css properties?

I was wondering, is Ajax only for dynamic content update or can it also, say, create a few buttons in a given div depending on what action a user chooses in another div? For example, if the login page and first page look very similar by only a few buttons, once proper login credentials are entered, can I use Ajax to make the other three buttons appear once logged in properly, rather than going to a whole another web page that has those buttons hard coded in the html/css? If this is possible, I'll take pointers to any tutorials. Thanks.
AJAX is just for creating HTTP requests using javascript, in order to prevent full page requests.
What you can do is to process the login request using AJAX and then, depending on the response you send, to display an error or update the DOM with the logged in interface.
If you just want to change the DOM, you use javascript directly (jquery would help) but no AJAX is needed.

How to make userprofile viewing-editing in django similar to the facebook way?

I'm making a site in django which has profiles for users and companies with text fields, photos, choices, etc., and I want them to look the same while viewing or editing them (in case of the owner of the profile). Basically the user must click somewhere and all the information becomes editable, without having to go into other "profile editing" page.
The only way of doing this that I can think of is by making to different pages, one for only "viewing" the data, and other for editing it, and try to make them look the same anyhow..
I wonder, if there is an elegant and simple way of integrating this two functionalities in django?
Thanks.
You're talking about manipulating the DOM without page loads. You're going to use AJAX to retrieve your form. I would recommend using Tastypie to create REST endpoints. Then you'll need to do AJAX calls to get your form. I would recommend using jQuery.
If you would prefer something simplier. You could always user a hidden form field and then manipulate the DOM with jQuery.

Including CodeIgniter form in existing page

I would like to include a CodeIgniter comment form in an existing php page. Currently I am including the comment form with
$_SERVER["REQUEST_URI"] = "comment/index2/".$page;
require_once($directoryLevelPrefix . "staff/codeigniter/index.php");
However, when codeigniter loads the view to display the results of the form I lose the content on my original php page which contained the form. I have tried adding a redirect after the form data is added to the database to redirect to my original php page e.g.
redirect($_POST['return'])
But I want to pass some variables, such as 'thank you for your comment', and this causes a headers already sent error.
Alternatives might be to use ajax, but I would like the whole page to refresh when the comment is submitted.
I had a similar need and I just loaded the CodeIgniter form in an iframe. This was to put a contact form on a WordPress page. I went with the iframe because my needs were limited to this one form and I felt it didn't require trying to integrate CodeIgniter and WordPress in any way.
One Pro of this method is that the form can be submitted and load a confirmation page, an error page, or even be a multi-page form and all that navigation takes place inside the iframe so you never leave the page that you are on while using the form. Another Pro is that the form is totally portable.
The Cons of course are anything you might not like about using iframes which could be many things based on your needs and preferences.
That is because CodeIgniter is a framework designed to handle displaying entire web pages. You can't just include it, as it tries to send new headers and everything.
Two solutions:
You may be able to load the codeigniter page as the main page, and just include your original php code like a view file. This depends on how your original php file is set up.
You could possibly use cURL to call the page from your own server, to get the html output as a string, then echo it to your current page. This isn't very efficient though.
As C. Scott Asbach mentioned, you could load the whole page in an iframe. Probably not a good idea though, as far as I'm aware iframes are deprecated and make for messy websites.
Probably best is to just try and avoid using CodeIgniter to display a subform in an existing page :-)

External HTML page, inside AJAX Iframe?

Hi Masters Of Web Development.
I have a not that simple question this time. I have got a simple external HTML page, that I want to include in my site. The HTML page contains a submit form or something like that, and I wish to send this data from the form, without to reload the whole page. So I decided to put HTML page inside iframe. But, some people said that this is older technology, google doesn't like iframes, etc. So I want to use something like AJAX or JQuery to load that external HTML page, and to send submit form without reloading the whole page with it. :)
Any suggestions on how to make this?
Thanks in advance :)
Do you really need Google to index that iframe form? If that's the only iframe you have throughout the site, it aint going to be a problem in terms of google indexing.
About using the Iframe, if you are not comfortable learning and building ajax-type form, you'll still be fine (like what Frankie commented). Just make sure the form works, usable and compatible with popular browsers.
You want to use the jQuery Forms Plugin. Its very straightforward and easy to turn any normal HTML form into an AJAX form.

Resources