jQuery modal window removes elements from my form - javascript

jQuery, when i use it to create a modal window which contains form elemets,
it takes out those elements when i submit the form.
example of the form:
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</div>
</form>
exaple of JS:
<script>
$(document).ready(function(){
$("#add_photo").dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
}
}
});
});
So what i nocited during the inspetion via firebug, is that jquery actually removes my form elements within #add_photo and puts them outside the form in DOM, so even tough in html the modal dialog is within my form, in DOM it isn't ....
An this is the reason why i'm having the issue!
Have anyone encountered simmilar problem?
Any solution?! Thank you very much!

I just had the same problem. I solved it by adding another
<div id="beforesubmit" style="display:none"></div>
at the end (but inside) of the form and then you have to add this to jQuery:
$("form").submit(function() {
$("#add_photo").prependTo("#beforesubmit");
});
This will make sure that before the form is submit your dialog div will be put back in between the form tags. Thanks to arnorhs I came to this solution.
Cheers!

I'm not sure what dialog box plugin you're using, but I would suspect that the dialog box plugin is pulling the DIV out of the form and placing it into the body of the page, so It can bring the box in front of the page, outside of the form element.
So to rephrase, in order for the dialog box plugin to make your dialog appear in front of all the content on your page, it needs to remove it from whatever element it is sitting in, no matter if it's a form or anything else.

The form needs to be inside the div. That's how it is in all the Dialog examples. Not sure how you're going to do that with the title and url inputs not being on the dialog. Couldn't you put them on it too?
This wouldn't have the problem:
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</form>
</div>

This article describes how to solve your problem:
You’ll see that the content we had mid-way through our page has been marked up with additional classes and, most importantly, placed at the bottom of the page immediately before the closing tag. Why is this important? Because it also means that any ASP.Net controls you place within this dialog will also appear at the bottom of the page, outside of the page’s tag. This means you won’t be able to get a handle to them on postback.
What’s the solution? Well, there are two options:
Move the elements back to the form, and manually submit when the button is clicked
Clone the elements when you create the dialog, then clone the values back, trigger click on the original button (or, if you only have one or two values to post back, simply assign the values to an ASP.Net hidden field control).

From http://blog.coreycoogan.com/2010/12/01/jquerys-dialog-and-form-problems/
Tie it to the form by doing $("mydialog").parent().appendTo($("form:first")).
Note that you have to this call after you already called $("mydialog").dialog()

As seen in the answer for this question, jQuery dialog has a field appendTo, that can be used to configure where to put your dialog (div-wise) on initialization.
This seems to be the least ninja-workaround version to tackle the problem.

Related

Display element next to another from different parts of the DOM tree

I have two forms, one larger and one smaller. I would like to display the smaller form next to a specific input of the larger form. It's not valid html to embed one form within another in the DOM, but is there a way to display one form over / inside another form next to a specific input using CSS or JS?
<!-- Main Form -->
<form action="action1" method="post">
Name <input type="text" name="name" value="">
Job Title <input type="text" name="job_title" value="">
Cell Number <input type="tel" name="mobile" value=""> <!-- SMALLER FORM SHOULD DISPLAY NEXT TO CELL # INPUT -->
Favorite Sport <input type="text" name="favorite_sport" value="">
Hobbies <input type="text" name="hobbies" value="">
<input type="submit" value="Save">
</form>
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form"></form>
<!-- js -->
<script src="external_js_library.js"></script>
<script>
// js code to load form into #optin_js_loaded_form using external_js_library.js
</script>
NOTES
The forms need to be separate because the smaller form is created via an external js library from a marketing service.
I know I could make the data from the larger form submit via ajax, but I'm hoping I can save some work by just changing where the smaller form displays.
EDIT 2020-02-05 14:40
Found a webpage that suggests some possible solutions, but doesn't give much direction on how to implement them. https://discourse.wicg.io/t/position-an-element-relatively-to-another-element-from-anywhere-in-the-dom/968
You could make use of the form attribute to avoid the nesting of form elements. You move the controls from the main form outside of that form element, and add the form attribute to all of them.
Now you can place the small form at its desired position, without violating the HTML rule that form elements should not be nested.
You would still need to apply some CSS on that small form element, so it does not flow to the left. Something like display: inline-block or similar could be useful.
Here is the suggested HTML part:
<form id="mainform" action="action1" method="post"></form>
<div>
Name <input type="text" name="name" form="mainform" value="">
Job Title <input type="text" name="job_title" form="mainform" value="">
Cell Number <input type="tel" name="mobile" form="mainform" value="">
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form">
</form>
Favorite Sport <input type="text" name="favorite_sport" form="mainform" value="">
Hobbies <input type="text" name="hobbies" form="mainform" value="">
<input type="submit" form="mainform" value="Save">
</div>

change a form element by ID with javascript

The problem:
Working within a Saas environment that processes a form in a way that needs to be altered. It's software-as-a-service so unique changes system wide are not an option.
Attempted Solution:
Attempting to use Javascript which the system is adding to the header area of the page to change the value of a form ID so when the form is submitted it contains the altered value.
The Code:
HTML
<div class="form-group " data-field="how_to_apply">
<label class="form-label">How to Apply </label>
<div id="application-settings" class="form--move-left clearfix row">
<div class="form-group form-group__half">
<input id="via-email" name="ha" value="1" checked="checked" onclick="displayInput(false, 'how_to_apply_1');" type="radio" />
<label for="via-email" class="form-label">
By Email<br/>
</label>
<input value="systemapplied#emailaddress.com" class="form-control" name="how_to_apply" id="how_to_apply_1" type="email" />
</div>
<div class="form-group form-group__half">
<input id="via-site" name="ha" value="2" onclick="displayInput(false, 'how_to_apply_2');" type="radio" />
<label for="via-site" class="form-label">
By URL
</label>
<input value="" class="form-control" name="how_to_apply" id="how_to_apply_2" disabled="disabled" type="url" required placeholder="e.g. http://www.yourwebsite.com"/>
</div>
</div>
Attempting to change the email address assigned to how_to_apply_1 ID
Javascript Used
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
It is important to add that this works as expected in a CodePen area but does not on the live site so my assumption is that there is something over writing this someplace I am not seeing, or I need to use something else to force the change, I don't know. Any suggestions or help would be GREATLY appreciated
Thanks in advance...
You need to run your script when the DOM is ready. You can wrap your script in DOMContentLoaded event like this:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
});

Replace form with another form on button click

I have 2 forms. I want when button is clicked to show another form on first form position. So just to replace that form.
Form 1
<div id="right">
<form id="contact" class="visible" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</form>
</div>
Form 2
<div id="form2">
<form id="contact2" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</div>
jQuery
$("#contact-submit").on("click", function() {
$("#contact").removeClass("visible");
$("#form2").addClass("visible");
});
So for some reason this is not working. Please help me to solve this. I tried to set opacity:0; of first form but it doesn't work. And please let me know which libary is should use.
Here is my example: http://codepen.io/anon/pen/PzKaPa
EDIT: So I looked at your pen and fixed it so it works: http://codepen.io/anon/pen/OXjEQd
It looks like you'll need to do a couple of things, one of which you might have already: first, place your jquery in a ready function (and make sure you've linked a jquery version in your head tag)--
$(function(){
// your code
});
Then, in your click handler, add a preventDefault():
$('#contact-submit').on('click',function(e){
e.preventDefault();
// rest of code
});
e.preventDefault() keeps your submit button from doing it's default action--submitting the form. This lets you perform other actions with the button. If you don't include this, the very first thing that will happen when your button is clicked is form submission, and you'll not get to any of the other code inside your click event.
This also assumes you have a .visible class defined in your css. If not, you'll need to add that as well, or instead of using addClass and removeClass, you'll need to change the display property on the form directly:
$('#contact').css('display','none');
$('#form2').css('display','block');
Unless you have defined the class visible somewhere else (and have set the CSS defaults for your forms to be hiddne, adding or removing it will have no effect.
Instead, I'd recommend you directly change the display property of the two:
$("#form2").css("display", "none"); // so it's initially invisible
$("#contact-submit").on("click", function() {
$("#contact").css("display", "none");
$("#form2").css("display", "");
});
This will directly alter the style attribute on each element, causing them to hide or show. Using css("display", "") will remove the setting.
You might also look into the hide and show methods in jQuery as they can do the same thing, only with a nice animation.
Unless you have specific CSS that applies to elements with or without the class 'visible', removing and adding that class to the elements will do nothing.
You may want to try
$("#contact-submit").on("click", function() {
$("#contact").toggle();
$("#form2").toggle();
});
to toggle form visibility, and you can initially apply visibility on the forms using CSS or built-in jQuery classes.

Redirecting after form submission in Javascript

I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.

Form Submit taking to a new page

I have a simple form. On submit (the submit action is a google docs form submission), it takes to a new page with focus on that page. I want to keep the focus on the current page.
What are my options?
This is the code (also present here )
<html><body>
<form action="https://docs.google.com/a/rangde.org/spreadsheet/formResponse?formkey=dFlSZkt0TzZTWHJyblBiQlNrcmZvZGc6MQ" method="POST" id="ss-form" target="_blank" onsubmit="submitted=true;">
<br>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" placeholder="Your Name">
<br>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" placeholder="E-mail Address">
<br>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" placeholder="Pledge Amount">
<br>
<input type="submit" name="submit" value="Submit"></form>
</body>
</html>
Depending on what you're trying to do with the resulting form, (and if you're not comfortable relying js do all the lifting) you could also create a hidden iframe on the page, give it a name, and set the form target to the name of the iframe. This is only if you have no interest in having the user ever see the google page itself.
Try AjaxForm, as found at http://jquery.malsup.com/form/, if you're using jQuery
A form's action parameter will always take you to that page.
Here is an example:
POST without Form Method (PHP)

Categories

Resources