CODEWITHSUNDEEP
jquery
Jeff
Jeff

Reputation: 6140

jQuery append() won't append to my element

jQuery append() doesn't work with either of my code examples below for some reason. Do you see what I'm doing wrong? I am trying to disable the submit button and append some text that says "Processing...".

Example Code 1:

$( "input[type='submit']" ).click( function()
{
    $( this ).attr( "disabled", "disabled" );
    $( this ).parents( "form" ).submit();
    $( this ).append( " Processing..." ); // no worky
    //$( "input[type='submit']" ).append( " Processing..." ); // no worky
});

Example Code 2:

$( "form" ).submit( function()
{
    //$( "#submit_button" ).append( " Processing..." ); // no worky
    $( this ).find( "input[type='submit']" ).prop( "disabled", "disabled" );
    $( "#submit_button" ).append( " Processing..." ); // no worky
});

Upvotes: 0

Views: 309

Answers (8)

user4088854
user4088854

Reputation:

user .after() would attempt to add or change nodes in the current jQuery 

Check this JS Fiddle (https://jsfiddle.net/548acobq/1/)

Upvotes: 0

Shridhar
Shridhar

Reputation: 339

You are appending text after form submition instead of that you have to append "processing" before form submission as below

$( this ).append( " Processing..." ); 
$( this ).attr( "disabled", "disabled" );
$( this ).parents( "form" ).submit();

and i think you need to display button value as "processing" for that you have to do as follow

$( this ).val( " Processing..." ); 
$( this ).attr( "disabled", "disabled" );
$( this ).parents( "form" ).submit();

replace append with val.

Upvotes: 0

Optimus
Optimus

Reputation: 2210

try this

$( this ).after( " Processing..." );

$( this ).append( " Processing..." ); actually append the text inside the input tag like this <input type="submit">processing</input> and it will not display in front end but if you use after it will append the text just after the input element

Upvotes: 2

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

Try this

$("#submit_button").val(' Processing...');

Upvotes: 0

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

Try this

$( "input[type='submit']" ).click( function()
{
    $(this).attr( "disabled", "disabled" );
    $(this).parents( "form" ).submit();
    $(this).val( " Processing..." ); // no worky
    //$( "input[type='submit']" ).append( " Processing..." ); // no worky
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="prog"></div>

<input type="submit" />

Upvotes: 0

Dileep
Dileep

Reputation: 515

Try this : $( this ).attr('value','Processing...');

Upvotes: 0

Spokey
Spokey

Reputation: 10994

I am guessing you are trying to change the displayed text.. since it's an input however, the displayed text is the value of the input. 

$("input[type='submit']").val(' Processing...'); // worky
$("#submit_button").val(' Processing...'); // worky

Upvotes: 1

Jai
Jai

Reputation: 74748

use this:

$(this).val(" Processing..."); // if <input type="submit"> 
$(this).text(" Processing..."); // if <button type='submit'>

Upvotes: 1

Related Questions