By RobertoGA on

I have a content type with a filefield with 50 max values and this is horrible when a user is creating or editing this kind of contents.

I've used hook_form_alter to load a jQuery functionality

function personal_form_alter( &$form, $form_state, $form_id )
{
	if($form_id == 'personal_node_form') {
		drupal_add_js('/sites/all/themes/jquery/filtro.num_adjuntos.js');
	}
}

This javascript is only used to .hide() most of the fields, showing only one and creating a button to show with a click, the first of the hidden filefield. All is working like a charm with jQuery code except when I click on my button, which shows the next field first and then, makes the form submit and this is not necesary.

$('#show-file-upload').click(function(){			
        //Try to disabled the submit form button
	$('#edit-submit').attr('disabled','disabled');
        //Show a new filefield 
	jQuery(this).parent().find('div:hidden:first').toggle();
});

$('#edit-submit').click(function(){
	$(this).removeAttr('disabled');	
});

The real problem is that I don't understand why skips the form, the button that use my JQuery code is of type >button< and not an >input type='submit'<. Could somebody guide me a bit!!!

Any help would be greatly appreciated.
Thanks

⋅ Categories: Drupal 6.x

Comments

nadeemagaskar’s picture

nadeemagaskar commented

Check html and button type in source code at client side.
I think it is not over riding submit button properly and because of which although u disable submit button and it is submitting form.
Better 1st change the submit button type before disabling it.
or call your funtion on submit event nad retuen false and true based on your requirement.

RobertoGA’s picture

RobertoGA commented

I've changed the input type to a link and the problem disappeared.

I think jQuery is using >button< like an alias for >input type = 'submit'<

Thanks for your help ;)

Anonymous’s picture

Anonymous (not verified) commented

You just need to cancel the default JS event by passing it into the function and calling preventDefault:

$('#show-file-upload').click(function(e){
        e.preventDefault();			
        //Try to disabled the submit form button
	$('#edit-submit').attr('disabled','disabled');
        //Show a new filefield 
	jQuery(this).parent().find('div:hidden:first').toggle();

});

Alternatively you can just return false from the function, this will have the same effect.

RobertoGA’s picture

RobertoGA commented 
$('#show-file-upload').click(function(){			
	$('#edit-submit').attr('disabled','false');
	jQuery(this).parent().find('div:hidden:first').toggle();
	$('#edit-submit').removeAttr('disabled');
});

This was the final function