Solved

Using Jquery to validate and submit a pop up form

Posted on 2009-05-12
11
6,279 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now