Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Using Jquery to validate and submit a pop up form

Posted on 2009-05-12
11
Medium Priority
?
6,295 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

927 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