Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
another_noob

Modal Window With A Form Problem

Recommended Posts

I am using a modal window as a container for a simple form. This "POST" form submission works fine in Firefox every time. In IE9 and Chrome the form action and method is apparently being ignored. In IE and Chrome the submission redirects the user to a random page because the method defaults to "GET" and  all of the POST data ends up in the query string.  The form should should "POST" data to a PHP script that saves the data and then redirects the user back to the original page.

 

Here is the form action:

<form id="edit_form" action="update_question.php" method="POST">

The submission ignores the action and method.

 

So, I guess the question is: Should I be able to use a modal window as a form container...that will work in all modern browsers of choice?

 

 

 

 

Share this post


Link to post
Share on other sites

Well, before anybody wastes any time trying to help me. I find the problem has nothing to do with the modal window. I copied the form code to a new script outside of the modal and I am having the same issue. I will look over my code and report my error. Sorry for wasting bandwidth.

Share this post


Link to post
Share on other sites

Is the modal window in an iframe or just a div on top of the page?

 

If done properly, a modal window should work in all browsers (even IE6, etc.). If it's not working, then you're doing something wrong.

  • Upvote 1

Share this post


Link to post
Share on other sites

I am using the code from the book to make the modal, just a div. The way I am using the modal is this:

 

A row of questions in an HTML table is clicked by the user. This sends the row id of the clicked row to an ajax function that sends the row id to a PHP script that fetches the question and returns the string and this HTML inside the modal window:

<?php
echo'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
	<div style="margin-top: 100px; margin-left:10px; overflow: hidden;">
		<form id="edit_form" action="update_question.php" method="POST" >
		<fieldset>
		<legend>Edit the selected text and submit the changes</legend>
			<textarea name="editText" rows="10" cols="100">This is some text to send to the script</textarea>
			<input type="hidden" name="quest_id" value="1">
			<div style="text-align: center; margin-top: 50px;"> 
				<input type="submit" name="submit" value="submit">
			</div>
		</fieldset>	
		</form>
	</div>
</body>
</html>';
?>

I simplified the script for clarity. Up to this point everything works fine. When I click submit, The form's action is ignored and the method defaults to GET and I get redirected to the same page every time. I var_dumped the POST at update_question.php, but I never actually get there. If I take the same code and put it into a separate script without using the modal window, it works as expected. It works fine in Firefox every time. It must be a problem with how I am using this echoed string as my response text to create the form in the first place. I am perplexed at this point. Thanks for your time.

Share this post


Link to post
Share on other sites

I refactored my javascript to jquery just for fun and the problem is fixed. Due to the lack of experience when I originally wrote the javascript, I had some ugly code. Lessons learned from my last thread helped me get through this and fix it. I am not sure really what was causing the problem specifically, but I suspect several things. That darn learning curve! Thanks.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...