asked on

Trigger specific form submit button with jQuery dialog button

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!

Chris Stanyon

submit() is a form method, not a button one, so you call it on a form.

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

peps03

ASKER

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?

Chris Stanyon

If you want to simulate a click on a particular button, then call the click method for that button.

$('#myButton').click();

Chris Stanyon

$('#dialogButtonA').click(function(){
$('#formButtonA').click();
});

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

peps03

ASKER

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

Chris Stanyon

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

peps03

ASKER

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.

Chris Stanyon

Double check your 2 form buttons are 'Submit' buttons and they have the correct IDs - publish and submitform.

peps03

ASKER

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)

Chris Stanyon

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.

peps03

ASKER

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.

peps03

ASKER

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

Chris Stanyon

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

peps03

ASKER

setting

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

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

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

Chris Stanyon

If you set both dialog buttons to $("#submitform").click(); then both buttons will submit the form using only one button - #submitform!

peps03

ASKER

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..?

peps03

ASKER

i know. just as a test!

Chris Stanyon

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!

peps03

ASKER

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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

peps03

ASKER

Aaaaah!!! That did it!
Damn. Why does jQuery disable this!? obviously if i call the behavior again i need it!

peps03

ASKER

thanks a lot ChrisStanyon!

very glad its working now

Chris Stanyon

jQuery disables it because you ask it to ; that's what e.preventDefault() does!

Pleased it's working :)