Develop Reference

Alertify confirms and submits a form automatically without clicking OK

I'm creating a blog with bootstrap and I have a form to submit categories:
<form action="categories.php" id="category-form" class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<input type="text" name="category" class="form-control" id="category" placeholder="Category">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" name="submit" id="btn-submit" class="btn btn-primary" value="Add Category">
</div>
</div>
</form>
When I press the form button "Add Category" the dialog appears but after a few seconds it submits itself immediately and the dialog disappears without clicking the buttons "yes" or "no", searching the web I found some solutions but doesn't work for me. The code I use for Alertify JS is the following:
$("#btn-submit").on("click", function(){
alertify.confirm("This is an alert dialog?", function(e){
if (e) {
alertify.success("Category was saved.")
} else {
alertify.error("Category not saved.");
}
});
return false;
});
I also try event.preventDefault();:
$("#btn-submit").on("click", function(event){
event.preventDefault();
alertify.confirm("This is an alert dialog?", function(e){
if (e) {
$("#category-form").submit();
alertify.success("Category was saved.")
return true;
} else {
alertify.error("Category not saved.");
return false;
}
});
});
But does not work as well. Any help please... Thank you.

try something like this. i think you want the confirmation before submitting the form so added the confirm message part. hope it will help.
$("#category-form").submit(function (e) {
var result = confirm("Are you sure ?");
if(result){
// do something
} else {
alertify.error("Error mesage.");
e.preventDefault(); // this will prevent from submitting the form.
}
});

Could you please try following code:
You need to remove type="submit" from your button. Otherwise it submits the form by default.
HTML:
<form action="categories.php" id="category-form" class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<input type="text" name="category" class="form-control" id="category" placeholder="Category">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" id="btn-submit" class="btn btn-primary" value="Add Category">
</div>
</div>
</form>
JQuery Code:
//your button click code
$("#btn-submit").on("click", function(event){
event.preventDefault();
alertify.confirm("This is an alert dialog?", function(e){
if (e) {
$("#category-form").submit();
alertify.success("Category was saved.")
return true;
} else {
alertify.error("Category not saved.");
return false;
}
});
});

alertify basically take 4 arguments in confirm function
alertify.confirm(title, message, onconfirm, oncancel);
You don't have to do if(e)this code
$("#formID").on("click", function(){
alertify.confirm("This is an alert dialog?", function(e){
if (e) {
alertify.success("Category was saved.")
} else {
alertify.error("Category not saved.");
}
});
return false;
});
will now become
$("#formID").submit(function(e){
e.preventDefault();
alertify.confirm('Confirm Title', 'Confirm Message', function(){
// call the function that will handle your form submission may be ajax don't write $('#fomr').submit() becasue it will start an endless loop through this function
}, function(){
// when user click cancel
});
});

Ok, This was posted and answered a long time ago. But as I was developing asp net
core in 2020, I came across AlertifyJS. I like the library. A solution for this
issue is:
1) I used <button>
2) I used e.preventdefault()
3) I used ('#category-form').submit()
4) Make sure you add id='category-form' in your form and also and id for button.
5) Use button and not input type=submit.
There could be a difference in how they work.
The difference is that <button> can have content,
whereas <input> cannot (it is a null element).
$('#btn-submit').on('click', function (e) {
e.preventDefault();
alertify.confirm('Save Category', 'Do you want to proceed?', function (e)
{
if (e) {
$("#category-form").submit();
alertify.success('Category Saved Successfully.');
return true;
}
else {
alertify.error("Category was not saved.");
return false;
}
}, function () { alertify.error('Cancel') });
});

submit form loaded on the bootstrap popover

I have dynamically created rows, on each rows i have a add button when user click on the add button then dynamically created form will be loaded on the bootstrap propover.
FIDDLE DEMO
my problem is :
why this code is NOT getting call?
Basically i am Submitting this form From bootstrap popover ?
...............
...............
console.log($("#"+formidd));// NOTE: i have accurate form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
...............
...............
Any help will be highly appreciated.Please help me...
Form looks like this:(I want to validate It & submit it when user press ENTER)
My html data look like this:
<div id="project-div-id">
<ul style="padding: 0px 0 2px;margin-left: 0px;">
<li><span class="slilink"> tour </span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="160subproj" id="160subproj" style="display:none;">
<input type="text" value="1st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> personal</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj" style="display:none;">
<input type="text" value="2st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> business</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="162subproj" id="162subproj" style="display:none;">
<input type="text" value="3rd form">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
</div>
This is my FULL jquery code:
<script type="text/javascript">
$(document).ready(function() { var formidd='';
$('.add_btn').popover({
html: true,
title: function () {
formidd=$(this).parent().find('.projform_id').html();
return $(this).parent().find('.sub_proj_head').html();
},
content: function() {
return $(this).parent().find('.sub_proj_content').html();
}
});
$('.add_btn').click(function(e) {
console.log($("#"+formidd));//i have loaded form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
$('.add_btn').not(this).popover('hide');
e.stopPropagation();
});
$(document).click(function(e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.add_btn').popover('hide');
}
});
});
</script>

I think I see what you're trying to do. The enter button will not work by default unless you have an <input type='submit' /> somewhere in the form.
Some hackery you can try is to place a submit button right after your input, give it a classname like "invisible", and set that class to remove all borders, margins, padding, etc... Warning, setting display:none will not work because some browsers effectively remove the element.
For example: jsfiddle
EDIT: I only got tour to work in the fiddle, but the idea is the same. There has to be a submit input inside the form.

Jquery UI dialog to check form

I have sat here and fiddled with multiple different examples and none work. What I am trying to do is take a form that has three buttons (save, cancel, and delete). The delete button needs to come up with a prompt asking if the user is sure. Here is the code i have so far... and have tried multiple examples... none are working for me.
<form id="templateEdit" method="post" action="/admin/template/{{ var temp }}/{{ var page }}">
<div class="control right"><input type="submit" name="save" value="submit" /><input type="submit" name="cancel" value="cancel" /><input type="submit" name="delete" id="delete" value="delete" /></div>
<textarea name="editor" class="ckeditor">{{ var contents }}</textarea>
</form>
The following code is in a document ready Jquery function:
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
"Yes": function () {
$('#templateEdit').off("submit").submit();
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#templateEdit').submit(function (event) {
event.preventDefault();
$('#dialog-confirm').dialog('open');
});
Edit: The no button does work, but yes button is now submitting, but no post data is getting sent with submit.
Update: So this is how I have fixed my issue completly:
$(document).ready(function(){
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
modal: true,
width: 500,
buttons: {
"Yes": function () {
$("#templateEdit").attr('action', "/admin/templates.php?temp={{ var temp }}&page={{ var page }}&action=delete");
$('#templateEdit').get(0).submit();
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#delete').click(function (event) {
$("#dialog-confirm").dialog("open");
event.preventDefault();
});
});

You have a spelling mistake in the selector temaplteEdit instead of templateEdit
You need to rename the button with name submit
<input type="submit" name="save" value="submit" />
then call
$('#templateEdit').get(0).submit();
Demo: Fiddle
or
$('#templateEdit').off('submit').submit();
Demo: Fiddle
Update:

Submit form with Jquery UI

I want the download now button to submit the form.
I have tried
getElementById("forms").submit();
$("form").submit();
$("#forms").submit();
and still nothing works.
The UI pops up and does everything else it is suppose it but does not submit the form
Java script
$(document).ready(function(){
$("#dialog-download ").dialog({
autoOpen: false,
resizable: false,
height: 140,
width: 325,
modal: true
});
$(".opener").click(function(){
var that = this;
var checkbox = $(that).next(":checkbox");
$("#dialog-download").dialog("option", {
buttons: {
"Download Now": function(){
$(checkbox).prop("checked", !$(checkbox).attr("checked"));
$("#dialog-download").dialog("close");
$("#forms").submit();
},
"Download Later ": function(){
$(checkbox).prop("checked", !$(checkbox).attr("checked"));
$("#dialog-download").dialog("close");
},
"Cancel": function(){
$("#dialog-download").dialog("close");
}
}
});
$("#dialog-download").dialog("open");
});
});
HTML
<div id="dialog-download" title="Download Now?">
<p><span style="float:left; margin:0 7px 20px 0;"></span>Download the file now or later?</p>
</div>
<form id = "forms" method="post" action="<?php echo $PHP_SELF;?>">
<a class="opener" href="#">db1.csv:</a>
<input id="c1" type="checkbox" name="download[]" value="db1.csv" /><br />
<...>
<input id="submit" type="submit" name="submit" value="submit" >
</form>

See the jQuery doc on submit().
Forms and their child elements should not use input names or ids that
conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures. For a complete list of
rules and to check your markup for these problems, see DOMLint.
http://jsfiddle.net/Fj2cC/4/

transfer data from javascript popup multiline textbox to a select control

I am trying to transfer data from a multiline textbox to a select control.
The multiline textbox appears as a popup and I want all the records pasted in the textbox to be transferred to the select control once the user will click submit in the popup window.
Probably with jquery or javascript, or maybe something else. The page is built in MVC3 Razor.
Here is the code from the page:
The script for the popup control:
<script type="text/javascript">
$(function () {
$("a[id^=opener]").click(function () {
$("#dialog").dialog('destroy');
$("#dialog").attr("title", "Please paste your products")
.html("<p><textarea name=\"TextMessage\" rows=\"10\" cols=\"72\" /><br /><input type=\"submit\" value=\"Submit\" /></p>");
$("#dialog").dialog({
height: 420,
width: 650,
modal: true
});
});
});
</script>
The .cshtml page:
#using (Html.BeginForm("ASPXView", "Report", FormMethod.Post)) {
#Html.ValidationSummary(true, "Password change was unsuccessful. Please correct the errors and try again.")
<div>
#Html.Hidden("Id", Model.Report.Id)
<div id="accordion">
#{int i=0;}
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="editor-label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="editor-field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed" style="clear:both; float:left; margin-left:440px;">
Remove selection
<a id= "opener#(i)" class="OpenDialogClass" href="#" >Open Dialog</a>
</div>
</div>
i++;
}
</div>
<p style="text-align: right">
<input type="submit" value="Generate Report" />
</p>
</div>
}
<div id="dialog" title="Basic dialog">
</div>
Screenshot from the page:
So the data which will be pasted in the popup textbox, I would like to have it in the select control once the submit button is clicked.
Any idea how I can do that?
Thanks in advance, Laziale

You could serialize the contents of the textarea and then do what you need to do with it (Post it to a controller or perhaps hand it off to the underlying page somewhere)
$('form').submit(function(e){
e.preventDefault();
e.stopPropagation();
var o = {};
$( $('textarea').val().split(/\n|\r/) ).each(function(i){
o[i] = this;
});
var jsonString = JSON.stringify(o);
// DO SOMETHING WITH JSON OBJECT HERE
});​
http://jsfiddle.net/vUH3a/

This will give you a start.
$("Button Selector").click(function(){
var SelectOptions= [];
$("list Selector").each(function () {
SelectOptions.push($(this).attr('id'));
});
SelectOptions.each(function () {
//build your mark up here and return
});
});