Here is my form
<form method="POST" action="adddriverprocess.php" enctype="multipart/form-data">
<...>
<...>
</form>
It works good in the submit <input type="submit" value="Submit"/>
I am trying to have the jquery popup in it, where by pressing the form should do the post action.
So, i had this jquery button
<button class="delete-btn btn-sm"><span class="icon"></span></button></td>
With
$('.btnActivation').click(fnActivation);
function fnActivation() {
var url =$(this).attr("id");
$("#dialog-confirms").html("Are you sure you want to submit this form ?");
var buttonsConfig = [
{
text: "Yes",
"class": "ok",
click: function() {
$(this).dialog('close');
window.location.href=url;
}
},
{
text: "Cancel",
"class": "cancel",
click: function() {
$(this).dialog('close');
}
}
];
$("#dialog-confirms").dialog({
resizable: false,
modal: true,
title: "Ma$na Taxi",
height: 250,
width: 400,
buttons: buttonsConfig,
});
}
The popup comes good, but when i press the ok button it takes me to the adddriverprocess but in get method but i want it to do in post method with the datas that is filled in the name.
How can i do this ?
Put an ID on your form and change your "Yes" click function to post your form instead of the location.
Change this:
click: function() {
$(this).dialog('close');
window.location.href=url;
}
To this:
click: function() {
$('#MyForm').submit();
$(this).dialog('close');
}
Here's the jQuery submit() documentation:
http://api.jquery.com/submit/
Related
I have two web form e.g. webform1 and webform2 . i am calling webform2 as dialog from webform1. I want to access ui element(e.g. hidden field) on click button event of dialog.
When focus was on dialog (webform2) then i am able to get hidden filed value in console but when i click on dialog button and code executing button event in JS that time hidden field value becomes undefined.
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 950,
title: "Add Lines to Manual Invoice",
close: function () {
$(this).dialog("close");
},
buttons: {
okay: function () {
console.log($('#HiddenField1').val()) // This is undefined while i want to access webform2 vlaue
$(this).dialog("close");
}
},
show: {
effect: "slide",
duration: 1500
}
});
$("#opener").click(function () {
$("#dialog").dialog('open');
return false;
});
});
i have load webform2 in iframe tag like below:
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title"><iframe style="border: 1px;height:700px;width:930px;" src="WebForm2.aspx"></iframe></div>
I have resolved this with below line of code.
$(this).find('iframe').contents().find('[id="HiddenField1"]').val()
First time I am using JqueryUI.
I am trying to pop a conditional modal to alert the user.
In my ajax call I have the following code:
.done(function (result) {
$('#reportData').append(result);
var totalColumns = '#(ViewBag.TotalColumns)';
if (totalColumns > 10) {
callDialog();
}
else {
print();
}
})
The callDialog function is:
function callDialog() {
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizeable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 600,
dialogClass: 'ui-dialog-osx',
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
};
The HTML for the modal is:
<div style="margin-left: 23px;">
<p>
Some Text
</p>
</div>
The issue I am seeing is the the modal appears, but then quickly goes away and the print() is then called.
I would expect the modal to appear and if the user clicks the OK button the print() would fire off and if the user clicks the cancel it woudl just close the modal.
From the API documentation: http://api.jqueryui.com/dialog/#option-buttons
The way you are using the button option is not correct.
Here is the working snippet:
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
I have a HTML page which has a model as follows:
#model ViewModel.Ekranlar.ModelVM
I call a Confirm Dialog written with JavaScript in the html page as in the following:
<script type="text/javascript">
$(document).ready(function () {
$(".confirmDialog").on("click", function (e) {
// e.preventDefault(); use this or return false
var url = $(this).attr('href');
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location = url;
}, "Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog('open');
return false;
});
}); </script>
And the controller is as in the following:
public ActionResult DUDBaskaniBuro2GidenIptal(ModelVM model)
How can I pass ModelVM model to the Action in the controller?
Thanks for your helps.
Though not sure if you are using jquery modal or your custom one, but:
1) If you want to do full page postback, you may make the 'OK' button a 'submit' button type so that on click it will postback to the url mentioned in the form tag.
<input type="submit" value="OK" .../>
2) If you want to do partial postback, you may use something like:
"OK": function () {
$.post('#Url.Action("ActionMethod","ControllerName")',
<captured values via jquery/javascript as json>, //E.g. {"Id":1,"Name":"My Name"}
function(data){
//Code you want to do here
$(this).dialog("close"); //Just an example
window.location = data.url; //Just an example
});
}
I have a PHP-based form that will insert data into a database.
What I want to happen is when I click the submit button, a popup box would appear with a yes and no. If yes is chosen, then it will redirect to the page that will insert the form data into the database.
How can this be done? Thanks.
You can make it with js and jQuery. I don't know your context, but it might be like this:
$('<div></div>').appendTo('body')
.html('<div><h6>Do you really want to do this?</h6></div>')
.dialog({
modal: true,
title: 'Title',
buttons: {
Yes: function () {
doFunctionForYes();
$(this).dialog("close");
},
No: function () {
doFunctionForNo();
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
$('#msg').hide();
function doFunctionForYes() {
alert("Yes");
$('#msg').show();
}
function doFunctionForNo() {
alert("No");
$('#msg').show();
}
I have a form that when the submit is hit i want a modal box to pop up with a YES and NO button i want the both the yes and no button to submit the form but i need to know which button they clicked.
Here is my code
<input onclick="$.msgbox('confirm text',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />
My problem is the form is submitting when the user clicks submit.
Any help or ideas would be great
thanks
While I'm not familiar with the $.msgbox plugin but you should be opening the modal dialog on <form> submit and not on a button press, as the form can also be submitted by an enter/return on certain input fields (like text boxes <input type="text|password">)
var confirmed = false;
$('#myform').bind('submit', function() {
if (confirmed) {
return true; // confirmation received, continue form submission process
} else {
$.msgbox(
'my modal message',
{
buttons : [
{ type: 'button', value: 'YES' },
{ type: 'button', value: 'NO' }
]
},
function(buttonPressed) {
confirmed = buttonPressed.value; // Update the confirmed variable
$('#myform').submit(); // re-submit the form
}
);
return false; // cancel form submission
}
});
Add return false:
<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
buttons : [
{type: 'submit', value:'YES'},
{type: 'submit', value:'NO'}
]
}, function(buttonPressed) {
}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />
Not sure about the msgbox either but some remarks about your code:
Don't attach your JS logic directly to your code, but use jQuery to attach click event to your markup (see unobtrusive javascript):
Instead of
<input onclick="$.msgbox('confirm text',{
Use
$('#btnApply').click(function(e) {
You can stop the click handling by setting as false one property of the event parameter:
$('#btnApply').click(function(e) {
e.preventDefault(); // stop click handling and so form submitting
Finally, handle the form submitting or not in the msgbox callback function:
$.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
{
type: "submit",
value: "Yes"},
{
type: "submit",
value: "No"},
{
type: "cancel",
value: "Cancel"}
]
}, function(result) {
if(result == "Yes") // display the form on submit
$('form').submit();
});
jsFiddle available.