2

im trying to clear the form fields after submitting (with ajax) right now after submitting the fields remain filled, how can I do this?

at the bottom of the script you can see my attempt. I think I should be able to do this with unset form, another option would be jquery. Been trying this for a while now, any ideas?

<?php

function social_links_form($form, &$form_state) {
$form['#suffix'] = '<script type="text/javascript">'
                 . 'jQuery(\'input#edit-url\').focus();'
                 . '</script>';

$form['box'] = array(
    '#type'         => 'markup',
    '#prefix'       => '<div id="box">',
    '#suffix'       => '</div>',
);
$form['url'] = array(
    '#type'         => 'textfield',
    '#required'     => TRUE,
    '#description'  => "Please enter your url name.",
    '#ajax'         => array(
    'wrapper'       => 'box',
    'name'          => 'url',
    ),
);
$form['title'] = array(
    '#type'         => 'textfield',
    '#required'     => TRUE, 
    '#description'  => "Please enter your title.",
    '#ajax'         => array(
    'wrapper'       => 'box',
    'name'          => 'title',
    ),
);
$form['icon'] = array(
    '#type'         => 'hidden',
    '#required'     => TRUE, 
    '#description'  => "Icon path",
    '#ajax'         => array(
    'wrapper'       => 'box',
    'name'          => 'icon1',
    ),
);

$form['file'] = array( 
    '#title'        => t('Upload image'),
    '#type'         => 'file',
    '#description'  => t('Images must be one of jpg, bmp, gif or png formats.'),
    '#ajax'         => array(
    'wrapper'       => 'box',
    'name'          => 'icon2',
    ),
); 

$form['submit'] = array(
    '#type'         => 'submit',
    '#ajax'         => array(
    'callback'      => 'social_links_insert',
    'wrapper'       => 'box',
    'name'          => 'submit1',
    'effect'        => 'fade',
    ),
    '#value' => t('Submit'),
);

return $form;
}

// save form values to database
function social_links_insert($form, $form_state){

  // first handle the image upload
  $file = file_save_upload('file', array(
  'file_validate_is_image' => array(), 
  'file_validate_extensions' => array('png gif jpg jpeg'), 
  ));

  if ($file) {
    if ($file = file_move($file, 'public://')){
      $form_state['storage']['file'] = $file;
    }
    else {
      form_set_error('file', t('Failed to write the uploaded file the site\'s file folder.'));
    }
  }
  else {
    form_set_error('file', t('No file was uploaded.'));
  }
  $file = $form_state['storage']['file'];
  unset($form_state['storage']['file']);
  $file->status = FILE_STATUS_PERMANENT;
  file_save($file);

  // display success message
  $element = $form['box'];
  $element['#markup'] = "
  <p style='font-weight: 700; color: green;'>Social link succesfully submitted</p>
  <b>URL:</b> {$form_state['values']['url']} & 
  <b>Title:</b> {$form_state['values']['title']} &
  <b>Icon:</b> {$file->filename}
  ";

  // save form values
  db_insert('social_links') ->fields(array(
  'url' => $form_state['input']['url'],
  'title' => $form_state['input']['title'],
  'icon' => $file->filename,
  'created' => date('c'),
  ))
  ->execute();

    return $element;

  // reset the form
  $form_state = form_state_defaults();
}

EDIT I've got this on top of my admin.inc file. I think I should continue in this fashion. (because that piece of code does work)

 $form['#suffix'] = '<script type="text/javascript">'
                 . 'jQuery(\'input#edit-url\').focus(); '
                 . '</script>';

Can anyone assist me with implementing a form clear function inside the above piece of code? To be honest im quite disappointed drupal made using jquery so hard :(

EDIT II

second attempt:

$form['#suffix'] = '<script type="text/javascript">'
             . 'jQuery(\'input#edit-url\').focus(); '
             . 'jQuery(\'input[type=text]\' , "form#social-links-form").each(function(){jQuery(this).val("")});'
             . '</script>';
1
(function ($) {
Drupal.behaviors.yourmodulename = {
    attach: function(context) {

     setTimeout(function (){
$(".button").click(function(){
    $("input[type=text]" , context).each(
        function(){$(this).val("")});
        }
        )}, 1000);
}
}
})(jQuery);
12
  • 2
    This will work however a better way would be to have this script run only on ajax success, which will require a bit of tweak IMO. – Minty Jul 23 '12 at 14:40
  • thanks for you answer minty, sadly, its not working. JS console says: Uncaught SyntaxError: Unexpected token ; I dont see any mistakes.. – mhmdrupal Jul 23 '12 at 15:02
  • TRy this :: (function ($) { Drupal.behaviors.yourmodulename = { attach: function(context) { var t = setTimeout( $(".form-submit").click(function(){ $("input[type=text]" , context).each( function(){ $(this).val("")}) } ), 1000); } } })(jQuery); – Minty Jul 23 '12 at 15:08
  • I had to change it to this: (function ($) { Drupal.behaviors.social_links = { attach: function(context) { var t = setTimeout( $("#edit-submit").click(function(){ $("input[type=text]" , context).each( function(){ $(this).val("")}) } ), 1000); } } }); (jQuery); now it doesn't throw any errors. However, the form is not being cleared :( I made sure the script is included – mhmdrupal Jul 23 '12 at 15:20
  • 1
    You are almost done. Now just stuff in the javascript that I wrote in my first answer right next to your's. In my code, you can see that you actually loop over all the input types that you want to target and go to each of that and apply an empty jquery value function 'val('')' – Minty Jul 24 '12 at 14:30
3

Try add this code to you submit callback:

function social_links_insert($form, $form_state){
  /*your code goes here*/

  $form_state['input'] = array();
  $form_state['rebuild'] = TRUE;
} 

Also remove "return $element;" from submit callback.

0

You can bind a simple jquery callback to ajax response. So if your response is successful then, do this

jQuery("input[type=text]" , "form#yourformid").each(function(){jQuery(this).val("")});
4
  • thanks for your answer minty, In the above script, where should I put that line of code? – mhmdrupal Jul 23 '12 at 14:23
  • You can create a new js file in your module. And add this into your new js file (function () { Drupal.behaviors.yourmodulename= function (context) {jQuery("input[type=text]" , "form#yourformid").each(function(){jQuery(this).val("")});}}(jQuery) – Minty Jul 23 '12 at 14:27
  • @Minty That's Drupal 6 style JS code, it's slightly different for Drupal 7...drupal.org/node/756722#behaviors – Clive Jul 23 '12 at 14:32
  • 1
    Yes, I rewrote the answer as its not formatted correctly and I pressed enter mistakenly without completing the answer. Sorry about that – Minty Jul 23 '12 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.