jQuery Submit Form on Enter Not Working - javascript

In the script below I've got the code to allow me to add a new line by pressing shift+enter but when I just press enter the code does nothing. I also get no errors. I've removed the resize caret so there is no need to mess with that. What is the bug in my code keeping me from submitting the form?
Disclaimer: yes I know there are multiple posts on this subject but none of them fix my problem so I'm hoping it's a new problem.
<script>
$('#myFormActivity .commentTextarea').keypress(function(event){
if (event.keyCode==13 && !event.shiftKey) {
event.preventDefault();
$( "#myFormActivity" ).submit(function(event1) {
alert("sent");
// Stop form from submitting normally
event1.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
activityid = $form.find( "input[name='activityid']" ).val(),
comment = $form.find( "textarea[name='comment']" ).val(),
url = "process/insertComment.php";
// Send the data using post
var posting = $.post( url, { activityid: activityid, comment: comment } );
// Put the results in a div
posting.done(function( data ) {
$(this).children('.commentTextarea').val('');
});
return false;
});
return false;
}
});
</script>
The class commentTextarea is the class assigned to the textarea element inside of the form which has the ID of myFormActivity.

What you are doing in your keypress event when you say
$( "#myFormActivity" ).submit(function(event1) {
is binding an event to the form submit, not triggering it. Something like (I haven't actually tested it) the following is more what you want I think (note the mime-type on the script tag and that the events should be bound in a document ready):
<script type="text/javascript">
$(function(){
$('#myFormActivity .commentTextarea').keypress(function(event){
if (event.keyCode==13 && !event.shiftKey) {
event.preventDefault();
$( "#myFormActivity" ).submit();
return false;
}
});
$( "#myFormActivity" ).submit(function(event1) {
alert("sent");
// Stop form from submitting normally
event1.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
activityid = $form.find( "input[name='activityid']" ).val(),
comment = $form.find( "textarea[name='comment']" ).val(),
url = "process/insertComment.php";
// Send the data using post
var posting = $.post( url, { activityid: activityid, comment: comment } );
// Put the results in a div
posting.done(function( data ) {
$(this).children('.commentTextarea').val('');
});
return false;
});
});
</script>

Related

Sending file upload form submit results to a specific DIV

I have a form with a fileupload input.
I would like the returned results of the URL the form submits to, to be returned in a specific DIV.
The below script works AOK for forms that do not have an input TYPE="FILE".
I suspect perhaps an issue with the .serialize in the $.post command perhaps?
Any ideas?
<script>
/* attach a submit handler to the form */
$("#&[l.formID]").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$('#unclickableDiv').fadeIn();
$.post( url, $("#&[l.formID]").serialize(),
function( data ) {
var content = data;
$( "#&[l.formTARGET]" ).empty().append( content );
$('#unclickableDiv').fadeOut();
}
);
});
</script>

jQuery error on Custom Javascript variable in Google tag manager

Why am I getting an error when I run a jquery as a Custom javasript variable? The error description is "Error at line 10, character 2: Parse error. ')' expected"
function(){
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});
};
Please advise.
Regards,
Sree
Remove the last semicolon ; on the last line:
function(){
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});
}
I think you did some conceptual mistake, when you working with GTM. Custom variable should return some value when trigger is fired.
I think your initial goal in GTM is:
Send some tag (to Universal analytics or something else) when user clicks on button button[class="panel__link panel__link--btb"]. This tag should contain some text information, which you can find like that .parent().find("h2").text();
If i am correct, then you should do the following:
Go to Variables. Built-in variables-> Configure-> Enable Click Element
Go to Triggers -> New -> Type: All Elements -> Click Element:matches CSS selector:button.panel__link.panel__link--btb
Go to Variables. New -> Custom JavaScript: function(){return {{Click Element}}.parent().find("h2").text();} -> Name: 'H2 text'
Go to Tags. New -> Assign trigger from step #2. -> Type: (you can choose what you need) -> And here you can use your variable {{H2 text}}, it will return necessary text
The error is caused because there no name for the function. I think you are trying to do a Self Invoking function which should be
(function(){
//your code
}());
Your code should be,
(function(){
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});
}());
Or
Remove the function() {} and simply execute the code with .ready
$( document ).ready(function() {
$('button[class="panel__link panel__link--btb"]').on( 'click', function(e) {
var $label = $( this ).parent().find("h2").text();
return $label;
});
});

Grab Form Data as an Object

My goal is to contruct an object with data of my form.
After doing some googling, people suggested me to use serialize()
Now, I got this from my form data
_method=PUT&_token=rs8iLxwoJHSCj3Cc47jaP5gp8pO5lhGghF1WeDJQ&max_down=256&max_up=256&cpe_mac=000D6766F2F6&device_mac=503275AE7A69
Is there a way to convert that long string into an object ?
Is there a any other way to achieve this ?
Any direction on this will mean a lot to me !
I've tried
$( "form#editRateLimitForm" ).on( "submit", function( event ) {
event.preventDefault();
var serialize = $( this ).serialize() ; // Nothing printing out
console.log(serialize); // _method=PUT&_token=rs8iLxwoJHSCj3Cc47jaP5gp8pO5lhGghF1WeDJQ&max_down=256&max_up=256&cpe_mac=000D6766F2F6&device_mac=503275AE7A69
});
I have used this approach many times.
$("form#editRateLimitForm").on("submit", function( event ) {
event.preventDefault();
var formObj = {},
formData = $(this).serializeArray(),
i;
for (i in formData) {
formObj [formData[i]['name']] = formData[i]['value'];
}
console.log(formObj);
});
console.log should show
{_method: 'PUT', token:'rs8iLxwoJHSCj3Cc47jaP5gp8pO5lhGghF1WeDJQ', max_down: '256',
max_up: '256', cpe_mac: '000D6766F2F6', device_mac: '503275AE7A69'}

History.js first load

I'm using History.js with jQuery.
My page is a search engine.
The form is submitted via $.ajax() and the result is loaded in div#results with pagination.
A click on next page's link is handled by $.ajax too.
Each result is a link to another page.
When I first load my form, I want div#results to be empty. But when I click on result's link then the back button, I want the div#results with the same results.
$('.link_page').on('click', function(e){
e.preventDefault();
var page = $(this).data('page');
$.ajax({
url: '/search',
method: 'POST',
data: {
create_date : $('#create_date').val(),
page : page
}
}).done(function( html ) {
$( "#results" ).html( html );
History.pushState({results: html}, "Search", "/search");
});
});
History.Adapter.bind(window, 'statechange', function (evt) {
var state = History.getState();
$( "#results" ).html( state.data.results );
});
History.Adapter.onDomLoad(function(){
var state = History.getState();
History.replaceState({results: state.data.results}, "Search", "/search");
});
It works well but if I submit my form then I go to any pages of my site and finally I return to my form, the div#results is still filled with the previous search.

jQuery: having trouble with code to disable link after ajax event

Goal:
Disable links before ajax:success is received. (then i'll tell my app server thing to enable the links. I'm writing a simple board game, and don't want to be recieving multiple ajax requests before the first one is responded to, because it messes with the game logic.
<script type="text/javascript">
var disableLinks = false;
$("a").click(function(e){
if (disableLinks){
e.preventDefault();
}
});
$("a").ajaxStart(function(){
disableLinks = true;
});
$("a").ajaxStop(function(){
disableLinks = false;
});
</script>
And here are what the links look like:
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true">
<div class="ttt_square">
</div>
</a>
This is because your AJAX start and finish events never fire. Why? Because simply clicking a link isn't an AJAX request, and doesn't trigger the global AJAX events. To use the global AJAX events, you need to use an AJAX function such as .get( ), .load( ), or $.ajax( )
The code below, is mostly yours... I've just added 2 lines (which could even be reduced to 1, but I think it looks better this way)
var disableLinks = true;
$('a').click( function( e )
{
if( disableLinks )
{
e.preventDefault( );
}
var self = $(this);
$.ajax( { "url": self.attr( 'href' ) } );
} );
$('a').ajaxStart( function( )
{
disableLinks = true;
} );
$('a').ajaxStop( function( )
{
disableLinks = false;
} );
You've got a typo. e.prevenDefault(); should be e.preventDefault();
And this should be enough for disabling the default action. So you can rid of your onclick.
$("a").click(function(e){
e.preventDefault();
});
Edit:
Maybe this: jQuery - How can I temporarily disable the onclick event listener after the event has been fired?
or this: jQuery - How can I temporarily disable the onclick event listener after the event has been fired?
should solve your problem (if understand you correctly)
try this:
$('a').click(function(){
if (!this.hasClass('disabled')) {
this.addClass('disabled');
var self = this;
$.ajax({url: this.attr('href'),
complete: function(jqXHR, textStatus)
self.removeClass('disabled');
}
});
}
return false;
});

Categories

Resources