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
Related
I am trying to validate a bootstrap form with jQuery.
var formSubmit = $("#dl-mg-form-publish").validate({
rules: {
'dl-mg-input-youtube': {
required: true,
url:true,
},
'dl-mg-input-title': {
required: true,
minlength: 6 });
I am trying to validate this:
var videoInformation = {
youtubeID: $('#dl-mg-input-youtube').val(),
title: $('#dl-mg-input-title').val(), }
This is my html:
<form class="form-horizontal dl-mg-form-horizontal" id="dl-mg-form-publish" action="#">
<div class="form-group">
<label for="dl-mg-input-youtube" class="control-label col-xs-2">YouTube Video ID:</label>
<div class="col-xs-6">
<input type="url" class="form-control" id="dl-mg-input-youtube" name="dl-mg-input-youtube" placeholder="Youtube ID">
</div>
</div>
<div class="form-group">
<label for="dl-mg-input-title" class="control-label col-xs-2">Video Title:</label>
<div class="col-xs-6">
<input type="text" class="form-control" id="dl-mg-input-title" name="dl-mg-input-title" placeholder="Video Title">
</div>
</div>
I am new at programming I don't know how to validate first and then submit. I tried using a .click handler but it submits the fields with errors anyway. Please help!
Before submitting your form you need to validate the form. You can do this inside the click event like:
$("#target").click(function () {
// Validate the form first
if (!$("#dl-mg-form-publish").valid()) return false;
// Your form is valid, so continue with you submit logic..
});
More info here: .valid()
EDIT:
Disable auto validation on keypress
Use this options for the validate() method:
$("#dl-mg-form-publish").validate({
onfocusout: false,
onkeyup: false,
// other options here
})
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.
I have a form that works just fine when I try it out (with the correct address of course).
When I use that for in my site, inside a fancybox it doesn't work. Nothing happens (no error in the console either).
The relevant code is:
<a class="fancybox" href="#inline1" id="link_consultar">
Consultar
</a>
<div style="display: none">
<div id="inline1">
Producto: {$product->
name|escape:'htmlall':'UTF-8'}
<br>
<br>
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
Nombre:
<input type="text" name="firstname">
<br>
<br>
Consulta:
<br>
<textarea rows="4" cols="50">
</textarea>
<br>
<br>
<input type="submit" value="Enviar Consulta" />
</form>
</div>
</div>
The JS:
$(document).ready(function() {
$('#myForm').submit(function(){
alert("submitted");
});
});
I have also tried:
$(document).ready(function() {
$("#myForm").on("submit", function(event){
alert("submitted");
});
});
I have included the form plugin like this:
<script src="http://malsup.github.com/jquery.form.js"></script>
With no success, the end goal is to send form by AJAX, this is a simplified example to debug.
What I don't understand either is that even when I remove all js it wont direct me to the action page.
You can see a live example here (When you click consulta).
The problem is shown on your live site. Upon examining the source code, you can see that you're adding a form within another form
<form id="buy_block" action="http://danielvi.com/index.php?controller=cart" method="post">
[...]
<form id="myForm" action="http://danielvi.com/send_mail.php" method="post">
[...]
</form>
</form>
Which invalidates the second form you're working with. That is why it's not doing anything. Other than that, the code is valid.
On the live site, you seem to be missing the <form> element in the #fancybox-content.
You've got the contact form inside form#buy_block which is invalid. Try moving the whole <div id="inline1"> outside of the <form id="buy_block
$("input[type='submit']").click(function(){
$.ajax: {
type : "POST",
cache : false,
url : "http://danielvi.com/send_mail.php",
success: function(data) {
$.fancybox({
'width': 400,
'height': 400,
'enableEscapeButton' : false,
'overlayShow' : true,
'overlayOpacity' : 0,
'hideOnOverlayClick' : false,
'content' : data
});
}
}
});
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
});
});
I have a jquery dialog that pops up with a form. The form is split across multiple tabs within the dialog. I'm working on keyboard ease and would like for pushing the tab key on the last element of one tab to take me to the first element of the next tab. Right now the tab order is to go through the dialog tabs, then through the first tab of inputs, then to the OK button. Instead of Weight->OK I want it to go Weight->Price. Is there an easy way to do this?
The HTML:
<div id='add_dialog' title='Add'>
<form id="add_form" method="POST">
<input type="hidden" name="action" value="add">
<input type="hidden" name="ProductId" value="2">
<div id="jquery-ui-tabs">
<ul>
<li>Details</li>
<li>Financial & Comments</li>
</ul>
<div id="add_details">
Quantity: <input type="text" name="Quantity" value="1"><br />
QuantityPerPack: <input type="text" name="QuantityPerPack" value="0"><br />
Pc Weight: <input type="text" name="PieceWeight" value=" "><br />
</div>
<div id="add_financial">
Price: <input type="text" name="PriceHigh" value="0.00"><br />
Comment: <textarea name="StockComment"></textarea><br />
</div>
</div>
</form>
</div>
And the initializing javascript:
$('#add_dialog').dialog(
{
autoOpen: false,
maxHeight: 500,
width: 600,
minWidth: 600,
zIndex: 99999,
position: ['center', 50],
buttons:[{
text: "Ok",
class: "dialog_ok",
click: function() {
$(this).dialog("close");
$("#add_form").submit();
}
},
{
text: "Cancel",
class: "dialog_cancel",
click: function() {
$(this).dialog("close");
}
}]
});
It wasn't so bad. For posterity, here is the code I eventually used. I added IDs to the two inputs, then I attached a keydown event and if it's a tab I move to the next tab and then focus on the first element.
$('#add_form_pieceweight').keydown(function(e) {
var code = e.keyCode || e.which;
if (code == '9') {
$('#jquery-ui-tabs').tabs('select',1);
$('#add_form_price').focus();
return false;
}
});
This is happening because the other form inputs are hidden in a hidden tab div, and thus skipped over for tabbing through. So you have to manually listen for someone pressing tab and then show the other tab.
On "weight" input, bind to keydown. Look at the key they pressed in the event that your lister gets. If someone pressed "tab", select the add_financial href and send it a "click" event to get it to change to the next tab, then select the "price" input and focus() on it.