submit form loaded on the bootstrap popover - javascript

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.

Related

JQuery Validate Input on Button Toggle

I'm using Jquery Validate in my web form. I have an empty input, however the input is populated dynamically with text on the click of a button. Validation doesn't seem to work when I do this.
when the input is empty, on submit validation works (input turns red).
when input is populated dynamically, it stays red, it should turn green
My code is below and here's a fiddle;
In the fiddle, click submit when the input is empty, then toggle the button to No - the input should change to green without having to submit the form again.
HTML
<p>Does this item have an inventory number?</p>
<p>
<form id="myForm" method="post">
<input type="checkbox" class="input-large" value='1' name="btn" id="btn">
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<input type="text" class="input-large" id="type" name="type" placeholder="Inventory Number">
</div>
</div>
</div>
<input type="submit" class="submit" value="Submit">
</form>
Jquery
$(function() {
$('#btn').bootstrapToggle({
on: 'No',
off: 'Yes',
onstyle: 'danger'
});
})
$("#myForm").validate({
rules: {
type: {
required: true,
minlength: 2
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
unhighlight: function(label) {
$(label).closest('.control-group').addClass('success');
},
});
$("#btn").on("change", function() {
if ($(this).prop('checked') == true) {
$("#type").attr("readonly", "true");
$("#type").val("Personal Item");
$("#type").rules("remove", "number minlength maxlength");
}
if ($(this).prop('checked') == false) {
$("#type").removeAttr("readonly");
$("#type").val("");
$("#type").rules("add", {
required: true,
minlength: 5,
maxlength: 6
});
}
});
You use some custom highlight and unhighlight on the control-group.
Just add this to the checked==true condition:
$("#type").closest('.control-group').removeClass("error").addClass("valid");
$("#type").next(".error").remove();
Since the rule is removed, it is not re-validated...
Your Fiddle updated.

JQuery validation plugin onclick link

I have a form that uses a link to submit the results.
I'm using Jquery validation plugin.
I can get the form to validate if I use a normal button to submit the form.
How can I call the Jquery function from a hyperlink instead of a button.
Here's my jquery:
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter_form').validate({
rules: {
CONTACTS_EMAIL: {
required: true,
email: true
},
CONTACTS_PRIVACY_POLICY_AGREE: "required",
},
messages: {
CONTACTS_PRIVACY_POLICY_AGREE: "<?php echo $FRM_ERRMSG_CONTACTS_PRIVACY_POLICY_AGREE;?>",
CONTACTS_EMAIL: {
required: "<?php echo $FRM_ERRMSG_CONTACTS_EMAIL;?>",
email: "<?php echo $FRM_ERRMSG_CONTACTS_EMAIL_FORMAT;?>"
}
},
submitHandler: function (form) {
form.submit();
}
});
});
</script>
And here is my html (with some php inside to be ignored)
<form id="newsletter_form" name="newsletter_form" action="newsletter_submit.php" method="post" >
<br>
<div class="mc-field-group">
<input type="text" name="CONTACTS_EMAIL" placeholder="*<?echo $EMAIL_FIELD_TEXT;?>" style="width: 280px;font-size: 20px;" /><br>
<input type="checkbox" name="CONTACTS_PRIVACY_POLICY_AGREE"> <?echo $PRIVACY_POLICY;?> * <label for="CONTACTS_PRIVACY_POLICY_AGREE" class="error" style="display:none;"></label>
<input type="hidden" name="CONTACTS_LANGUAGE" value="<?echo $language;?>">
<div>
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' name='newsletter_form'>
<a style="margin-top:22px;" class="wsite-button external-link" onclick="document.getElementById('newsletter_form').submit()">
<span class="wsite-button-inner"><?echo $BUTTON_TEXT;?></span></a>
</div>
</div>
</form>
Try using jQuery to trigger the submit event:
onclick="$('#commentForm').submit();"
There's a lot that could be improved here, but that may fix your core problem. I remember something like this happening to me a long time ago.

Show Bootstrap Popover on Blur not click

This seems like a pretty simple thing, but I am pulling my hairs on it for hours now: I want to check for uniqueness of usernames on a signup form. So I am writing a small AJAX jquery function that calls some endpoint, while I show a popover that the uniqueness is being checked.
https://jsfiddle.net/7p41z88h/
This is my html:
<div class="row">
<div class="col-lg-12" style="margin-top:200px">
<form method="post" action="#">
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="" name='name' id="username" >
</div>
</form>
</div>
</div>
and this is my js:
var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif" /> Checking if this username is available...';
$('#username').blur( function(){
$("#username").popover( {
title: '',
content: check,
html:true,
placement: 'top'
});
});
My expectation would be that this shows the popover on the blur event, but it shows it after I click somewhere and back into the input. Why? What am I'm missing here?
You have to create popover first, then show it on blur.
var check = '<img src="http://investors.boozallen.com/assets_files/spinner.gif"> Checking if this username is available...';
$('#username').blur(function() {
$(this).popover({
title: '',
content: check,
html: true,
placement: 'top',
trigger: 'manual'
});
$(this).popover('show');
});
$('#username').click(function() {
$(this).popover('hide');
});
CODEPEN

Trying to get jquery validator to work on specific button click

I am trying to get the jquery validator to run on the specific submit button not on all buttons.
<form id="incidentform" action="/emplincidata.php" method="get">
<input type="submit" class="button" name="updateincidentButton" value="Update Incident"/>
<input type="button" class="button" name="cancelincidentButton" value="Cancel Incident"/>
<br />
<div class="makescroll" id="bysuper">
<div class="incident">
<label class="title">TO BE COMPLETED BY THE SUPERVISOR</label><br />
<div>
<label class="eighth" for="incidate">Incident Date</label>
<input type="text" id="incidate" name="incidate" class="datepick" />
<label class="eighth" for="incidtime">Incident Time</label>
<input type="text" id="incidtime" name="incidtime" class="timeinput" />
<label class="eighth" for="shift">Shift</label>
<select id="shift" name="shift">
<option selected="selected"></option>
<option>Day</option>
<option>Evening</option>
<option>Night</option>
</select>
</div>
</div>
</div>
</form>
Here is the javascript. This code does not work when I have the submit catptured. I also tried click here and it failed.
$(function(){
$("#updateincidentButton").submit(function(){
$("form").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
})
})
You have not given Id selector to your submit button. so please give Id selector as below:
<input type="submit" class="button" id="updateincidentButton" name="updateincidentButton" value="Update Incident"/>
Please try as shown below:-
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
}
})
/* Bind Click() to Button*/
$("input[name=updateincidentButton]").click(function () {
if ($(#incidentform).valid()) {
// post stuffs
}
return false;
});
});
Try this:
$(document).ready(function(){
/* Bind Validate() to Form */
$("#incidentform").validate({
rules: {
incidate: "required",
incitime: "required",
shift: "required"
},
submitHandler :function() {
// DO STUFF HERE WHEN EVERYTHING IS VALIDATED e.g submit form
alert('VALID');
}
})
});
Fiddle: http://jsfiddle.net/ZKge8/
Just scroll to the bottom of the page to skip the validate plugin script.

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/

Categories

Resources