?
Solved

Trigger specific form submit button with jQuery dialog button

Posted on 2012-08-30
23
Medium Priority
?
2,281 Views
Last Modified: 2012-08-30
Hi,

I have a form with 4 submit buttons. Two are different buttons, two at the top of the form, 2 similar at the bottom. (because form is long)
First is called submit A
Second is called submit B

When submit B is pressed the form just submits.

When submit A is pressed, a dialog appears with 2 buttons. A and B. When button A is pressed i would like form submit button A to submit the form.
When dialog button B is pressed i would like submit button B to submit the form.

This because the buttons have different names, so the post handling will be different.

My question, how can i trigger a specific form submit button with a dialog button?

I tried by giving two of the same form submit buttons a class and then:
$(".submitA").submit();

But this doesn't work.

Thanks for the help!
0
Comment
Question by:peps03
  • 12
  • 11
23 Comments
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38349872
submit() is a form method, not a button one, so you call it on a form.

$('#myForm').submit();
0
 

Author Comment

by:peps03
ID: 38349883
Thank you for your reply.

Ok, i have 2 submit buttons in my form, i would like
dialog button A to trigger form submit button A
and
dialog button B to trigger form submit button B

How should i do this?
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38349890
If you want to simulate a click on a particular button, then call the click method for that button.

$('#myButton').click();
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38349895
$('#dialogButtonA').click(function(){
     $('#formButtonA').click();
});

$('#dialogButtonB').click(function(){
     $('#formButtonB').click();
});
0
 

Author Comment

by:peps03
ID: 38349936
tried that. that doesn't work... (also no errors)

i assigned an id to the 2 submit buttons.

this is my dialog code:

$(".alert8").click(function(e) {
	e.preventDefault();
	$("#alert2").dialog({
		autoOpen:false, modal:true, draggable:false, width: 412,
		buttons : 
		{
			"publish" : function() {
				$("#publish").click();//submit button A id
			},
			"close" : function() {
				$(this).dialog("close");
				$("#loader").css('display', 'none'); $("#loader1").css('display', 'none');
			},
			"save" : function() {
				$("#submitform").click();//submit button B id
			}
		},
		
		open: function(event, ui) { 
			// Get the dialog 
			var dialog = $(event.target).parents(".ui-dialog.ui-widget");

			// Get the buttons 
			var buttons = dialog.find(".ui-dialog-buttonpane").find("button");

			var saveButton = buttons[2]; 

			// Add class to the buttons 
			$(saveButton).addClass("alleenopslaan"); 
		}
	});
	$("#alert2").dialog("open");
});	  	  

Open in new window

0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38349997
The reason it's not working is because you've set your Dialog box to modal, so it maintains control until it's closed (i.e can't 'click' the buttons). 2 options:

1. Set modal:false
2. close the dialog before calling click()

buttons : 
		{
			"publish" : function() {
				$(this).dialog("close");
				$("#publish").click();
			},
			"close" : function() {
				$(this).dialog("close");
				$("#loader").css('display', 'none'); $("#loader1").css('display', 'none');
			},
			"save" : function() {
				$(this).dialog("close");
				$("#submitform").click();
			}
		}

Open in new window

0
 

Author Comment

by:peps03
ID: 38350166
Thanks!
For some strange reason this is only working now for:
$("#submitform").click();

$("#publish").click(); give no visible reaction or error..

strange.

Disabling modal didn't help this error.
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38350181
Double check your 2 form buttons are 'Submit' buttons and they have the correct IDs - publish and submitform.
0
 

Author Comment

by:peps03
ID: 38350211
checked it 20 times already... :/ no luck

i noticed, when clicking the "publish" button in the dialog, the dialog also doesn't close.

(the publish submit button does work when i remove the whole dialog)
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38350287
For some reason the dialog's publish button isn't being fired. Any chance of seeing all your code - preferably as a live link so I can test it.
0
 

Author Comment

by:peps03
ID: 38350396
No sorry, i understand that that would be ideal, but i'm developing it on my localhost, and when i put it online, it must work.
0
 

Author Comment

by:peps03
ID: 38350436
maybe we could enable 'default' onclick of the dialog button that is not working?

how do i do that?

because the default is what it should do...
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38350506
Not sure I follow.

The Code I've provided will do what you want it to do, so there must be some other reason the Publish button isn't firing it's click event.

If I can't see your code, I can't identify the problem. Here's a working version of what you're trying to do. Have a look through it and see if you can identify the problem in your code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dialog Buttons</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/sunny/jquery-ui.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#openDialog").click(function(e) {
	e.preventDefault();
	$("#dialogBox").dialog({
		autoOpen:false, modal:true, draggable:false, width: 412,
		buttons : 
		{
			"publish" : function() {
				$(this).dialog("close");
				$("#publish").click();
			},
			"close" : function() {
				$(this).dialog("close");
			},
			"save" : function() {
				$(this).dialog("close");
				$("#submitform").click();
			}
		}
	});
	
	$("#dialogBox").dialog('open');
});
});
</script>
</head>

<body>

<?php var_dump($_POST) ?>

<form action="" method="post">
	<button type="submit" value="publish" name="publish" id="publish">Publish button</button>
	<button type="submit" value="submitform" name="submitform" id="submitform">Submit button</button> 
</form>

<p><a href="" id="openDialog">Open Dialog Box</a></p>

<div style="display:none;" id="dialogBox">This is the dialog box</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:peps03
ID: 38350721
setting

$("#publish").click();
to:
$("#submitform").click();

so both buttons have "#submitform", does fire...

And individually, the publish button also works (without dialog)
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38350748
If you set both dialog buttons to $("#submitform").click(); then both buttons will submit the form using only one button - #submitform!
0
 

Author Comment

by:peps03
ID: 38350766
difference with your example is that a different link triggers the dialog.

in my scenario the publish button itself triggers the dialog.

the dialog has 3 buttons:
1 "publish" (this would be its default behaviour which is disabled)
2. close
3. save (which is another submit button of the form)

so i think the problem is that the button triggers the dialog to show, and is disabled, and therefore won't fire..?
0
 

Author Comment

by:peps03
ID: 38350770
i know. just as a test!
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38350803
In your original code it's an $(".alert8") element that triggers the Dialog Box - not a #publish button!

If you have attached a click event to your #publish button that opens a dialog, and call the click event from within the dialog - you're simply calling the dialog open code from within the dialog - doesn't make any sense!
0
 

Author Comment

by:peps03
ID: 38350842
i have 2 'publish' buttons,  1 at the beginning of the form, 1 at the end,
1 with id #publish and both with class .alert8

when either publish buttons is clicked, i want to give my users 3 options, continue publishing (buttons default behaviour), do nothing (close) or don't publish (save)

and this save button is also the other submit button my form has.
1 at the beginning, 1 at the bottom. 1 has id #submitform
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38350872
OK. Because you've applied e.preventDefault() to your button so that you can open the dialog, calling it from the dialog won't submit it. It'll just open the dialog again.

You need 2 buttons to open the dialog (.alert8), and one button to publish (#publish). You can hide the publish button (display:none) and the $('#publish').click() will still work (because you haven't prevented the default action).
0
 

Author Comment

by:peps03
ID: 38350931
Aaaaah!!! That did it!
Damn. Why does jQuery disable this!? obviously if i call the behavior again i need it!
0
 

Author Closing Comment

by:peps03
ID: 38350936
thanks a lot ChrisStanyon!

very glad its working now
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38350965
jQuery disables it because you ask it to ; that's what e.preventDefault() does!

Pleased it's working :)
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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
Course of the Month13 days, 20 hours left to enroll

809 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