Solved

Using Jquery to validate and submit a pop up form

Posted on 2009-05-12
11
6,283 Views
Last Modified: 2012-05-06
Hi

I am looking to add a popup layer with an html form in it. The popup needs to be 100% customisable using images & CSS.

I would like to be able to validate the form inline via a php script, with visual confirmation supplied after each field s typed out.

I then require the form to be submitted to another php script to process the data.

I then require a status message be returned to the popup.


I am confident that Jquery is perfect for the job and have found numerous tutorials for all the above elements but am reluctant to start trying to piece them all together without seeking advice from the pros.

1. Can anyone offer any advice/ links on the best way to implement my requirements?

I am going to be using popups throughout my site for forms, confirmation boxes and such so need a solution that is easily expandable.

2. Is there a better framework/ plugin to use for this use of JQuery?

Being very new to JQuery I find I have loads of questions to ask and soon get rather confused by so many differing opinions on the net.

I look forward to hearing your thoughts.

Many thanks

--s--
0
Comment
Question by:socross
  • 6
  • 5
11 Comments
 
LVL 7

Expert Comment

by:ycTIN
ID: 24371061
0
 
LVL 1

Author Comment

by:socross
ID: 24372421
Many thanks

This is exactly what i require fr form validation.

What about integration with a good customisable popup pugin?

Thanks

--s--
0
 
LVL 7

Expert Comment

by:ycTIN
ID: 24372558
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Author Comment

by:socross
ID: 24372924
Ok Great

I am statring with a list of pages, and each page will have a link to edit title/description etc so the pop up I am trying to create will need to load in the current details for the page into the form displayed in the pop up. Im assuming i would load it using ajax/ php (as shown inthe Ajax example).

1. Is this correct?

2. Can I customise the popup box to ensure that it is the only one on the page and that the background layer displays? (just like the question popups in the examples)

Many thanks

--s-
0
 
LVL 7

Accepted Solution

by:
ycTIN earned 500 total points
ID: 24374952
1. you can do this.

I share my ajax solution here, just for your reference.
Needed plugin:
jquery.validate.js        //validate ajax forms
jquery.metadata.js     //support validate plugin allow inline validation rule
jquery.boxy.js             //covert forms to dialog
jquery.updateWithJSON.js   //update forms value using json data
Steps:
prepare the forms
call boxy plugin convert the inline forms to dialog forms
call validate plugin binding the validation rule

------------------
user click the edit or other button                                     //  onclick="edit(1234)"
use jquery $.getJSON function pass the id 1234 to server
and get the returned JSON data
use updateWithJSON plugin update dialog form
call boxy show dialog
user modified the information and click save button    // onclick="save()"
use jquery  $.post() function submit dialog form
===================================================================
2. set the boxy optional , modal = false;
0
 
LVL 1

Author Comment

by:socross
ID: 24375351
This look exactly like what I am going to try.

Can I be really cheeky and ask if you have any examples or if you would be willing to help out?

Many thanks

--s--
0
 
LVL 7

Expert Comment

by:ycTIN
ID: 24375588
i only can provide some code snippet in my project

.........
 
<a href="javascript:;" onclick="edit('.$user['id'].');" class="csportal_txtbutton">Edit</a>
 
.........
 
<div id="user_information" style="display:none;">
	<form id="user_form" name="user_form" class="csportal_form" onsubmit="return false;">
		<div style="width:210px;float:left; padding-right:10px;">
			<p>
				<label>Login Name <span>
</span><br /><input type="text" name="login" id="login" class="required" maxlength="20" style="width:200px" /></label>
			</p>
			<p>
				<label>Display Name <span>
</span><br /><input type="text" name="name" id="name" class="required" maxlength="100" style="width:200px" /></label>
			</p>
			<p>
				<label>Password <br /><input type="text" name="pw" id="pw" class="" maxlength="20" style="width:200px" /></label>
			</p>
			<p>
				<label>Status <span>
</span></label><br />
				<label class="option"><input type="radio" name="status" id="status_active"  value="A" class="required" checked="checked" />Active</label>
				<label class="option"><input type="radio" name="status" id="status_blocked"  value="B" />Blocked</label>
				<label for="status" class="error" style="display: none;">Please select the status</label>
			</p>
			<br style="clear:both" />
		</div>
		<br style="clear:both" />
		<div style="display:block;">		
			<input type="hidden" name="action" id="action" value="CREATE" />
			<input type="hidden" name="id" id="id" value="0" />
			<input type="button" onclick="save()" value="Save" />
		</div>
	</form>
</div>
 
...........
 
 
var $user_dialog = null;
var $user_dialog_validator = null;
 
$(function() {
	$user_dialog = new Boxy($("#user_information"),{title:"User"});
	$user_dialog_validator = $("#user_form").validate();
	$("#user_list").tablesorter({
		ajaxPager:"#main_pager",
		ajaxSorter:function(page,sort){
			filter(true,$.param({pager:$.param(page),"sorter[]":sort}));
		}
	});	
	filter();
});
 
function edit(id){
	$.getJSON(getAjaxUrl("edit"),{id:id},function(data){
		$.updateWithJSON(data);
		$("#action").val("EDIT");
		$user_dialog.show();
	});
}
 
function save() {
	if($user_dialog_validator.form()){
		$.post(getAjaxUrl("save"),$("#user_form").serialize(),function(data){
			if( data != "false"){		
				$user_dialog.hide();
				filter(true);
			}
		});
	}
}

Open in new window

0
 
LVL 1

Author Comment

by:socross
ID: 24380001
Thank you very much, i will need to go over your last 2 posts and see if i can implement them.

Many thanks for you help so far!

--s--
0
 
LVL 1

Author Comment

by:socross
ID: 24382797
ycTIN

Many thanks for your input and providing your code samples, unfortunately I cant get my head around the sample code. If yo had an example/ tutorial of all this working I think i could work it out, but I understand if you don't.

Any further advice you have would be greatly appreciated.

Best

--s--
0
 
LVL 7

Expert Comment

by:ycTIN
ID: 24382924
Many plugin combination can do this

jQuery UI example(modal form)
http://jqueryui.com/demos/dialog/#modal-form
0
 
LVL 7

Expert Comment

by:ycTIN
ID: 24382997
I am consumed  many time to learning or testing too.
user friendly = difficulty



ss.JPG
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

806 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question