This question already has answers here:
</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/10398783/jquery-serialize-form-and-other-parameters" dir="ltr">jQuery: serialize() form and other parameters</a>
<span class="question-originals-answer-count">
(9 answers)
</span>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/11661187/form-serialize-javascript-no-framework" dir="ltr">form serialize javascript (no framework)</a>
<span class="question-originals-answer-count">
(20 answers)
</span>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/20711919/how-to-serialize-the-current-form" dir="ltr">How to serialize the current form?</a>
<span class="question-originals-answer-count">
(2 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2018-11-07 21:48:30Z" class="relativetime">2 years ago</span>.</div>
</div>
</aside>
In my wordpress theme I made a form and used ajax to manipulate form inputs. The question is how can I use form.serialize() rather than get every input.val and send it in a json object in data_to_pass.
I want use this
'data_to_pass' : $('#my_form').serialize();
instead of this
'data_to-pass' : {user_id : user_input,user_id2:user_input2}
and this my ajax code in my-script.js file
$(function(){
$('#search_user_id').on('submit', runMyAjax);
function runMyAjax(e){
e.preventDefault();
var user_input = $('#search_user_id #user_input').val();
var user_input2 = $('#search_user_id #user_input2').val();
var form_data= $('#my-form').serialize();//this sent string not url i cannot use $_POST['field'] in my functions.php handler
var data = {
'action': 'my_ajax_function', //the function in php functions to call
//i want to pass form_data to my functions to handle
'data_to_pass': {user_id : user_input,user_id2:user_input2},
'nonce': frontEndAjax.nonce
};
//send data to the php file admin-ajax which was stored in the variable ajaxurl
$.post(frontEndAjax.ajaxurl, data, function( response ) {
$('#search_user_id').append(response.data_from_backend);
//simple test. if new string brought back doesn't match old string.
}, 'json' );
} //end runMyAjax
});
and my functions.php code here
function shukr_scriptFiles(){
/*jquery js files*/
wp_deregister_script('jquery');
wp_register_script("jquery",get_template_directory_uri()."/js/jquery-3.3.1.slim.min.js",array(),false,true);
wp_enqueue_script("jquery");
/*ajax-scripts.js*/
wp_enqueue_script("ajax-script-file",get_template_directory_uri()."/js/ajax-scripts.js",array(),false,true);
//passing variables to the javascript file
wp_localize_script('ajax-script-file', 'frontEndAjax', array('ajaxurl' =>
admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce('ajax_nonce')
));
}
add_action('wp_enqueue_scripts','shukr_scriptFiles');
and here my handler function
//now we can get the data we passed via $_POST[]. make sure it isn't empty first.
//need to get field input value using serialize form here
$_POST['form_field']
if(! empty( $_POST['data_to_pass'] ) ){
$my_paragraphs_text = esc_html($_POST['data_to_pass']['user_id']);
}
$ajax_response = array('data_from_backend' => $my_paragraphs_text);
echo json_encode( $ajax_response ); //always echo an array encoded in json
wp_die();
}
add_action( 'wp_ajax_nopriv_my_ajax_function', 'my_ajax_function' );
add_action( 'wp_ajax_my_ajax_function', 'my_ajax_function' );
</div>
