Save jquery to custom field

Hi,

As per your query you cannot save variable value of jquery to php unless if use any hidden input field.
Assume you have metabox in there register a input type with hidden field like
<input type="hidden" id="metavalue" name="metavalue" value=""/>

and then add the value to input field via js

jQuery('your id').on('change',function() {
jQuery('#metavalue').val(your value);
});

On upon save it post the metavalue so that you can make use of that data.

Note: Above code is just illustration of how it can be done.

Hope it helps.

viky081 is correct about using a field to send the data to the server, but that’s not the entire picture. You need PHP code server side to grab that data, validate and sanitize it, then insert it into the DB. You can hook into an action like “save_post” to do this.

If you were to configure your form data to mimic that of the default custom field data, it might be enough so that WP will handle the saving for you automatically. I’ve not tried this particular approach, there could be some tragic flaw. There are good reasons to add your own code to handle this anyway.

Thanks for the info. So how do I save data to an input? I’ve tried $("#metavalue").val(); and it didn’t save it to the input.

I was able to figure out my problem (feel free to point out any problems with my code below) but the problem is that when I update a post, the custom fields get erased. Is there a way to not clear the custom fields when a post is being updated unless the input fields have a value in them?

function analyize_mp3_add_meta_box() {
	add_meta_box(
		'analyize_mp3-analyize-mp3',
		__( 'Analyize MP3', 'analyize_mp3' ),
		'analyize_mp3_html',
		'post',
		'normal',
		'default'
	);
}
add_action( 'add_meta_boxes', 'analyize_mp3_add_meta_box' );
function analyize_mp3_html( $post) {
	wp_nonce_field( '_analyize_mp3_nonce', 'analyize_mp3_nonce' ); ?>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
    audio {
    display: none;
}
  </style>
<script type='text/javascript'>//<![CDATA[
$(function(){
var objectUrl;

$("#audio").on("canplaythrough", function(e){
    var seconds = e.currentTarget.duration;
    var duration = moment.duration(seconds, "seconds");
    
    var time = "";
    var hours = duration.hours();
    if (hours > 0) { time = hours + ":" ; }
    
    time = time + duration.minutes() + ":" + duration.seconds();
    $("#duration").text(time);
    $('#timelength').val(time);
    
    URL.revokeObjectURL(objectUrl);
});

$("#file").change(function(e){
    var file = e.currentTarget.files[0];
   
    $("#filesize").text(file.size);
    $('#size').val(file.size);
    
    objectUrl = URL.createObjectURL(file);
    $("#audio").prop("src", objectUrl);
});

});//]]> 

</script>

<p>Select a .mp3 file</p>
<input type="file" id="file" />

<audio id="audio"></audio>

<p>
  <label>File Size:</label>
  <span id="filesize"></span>
  <input type="hidden" id="size" name="size" value=""/>
</p>

<p>
  <label>Song Duration:</label>
  <span id="duration"></span>
  <input type="hidden" id="timelength" name="time" value=""/>
</p>
    
    <?php
}

function analyize_mp3_save( $post_id ) {
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	if ( ! isset( $_POST['analyize_mp3_nonce'] ) || ! wp_verify_nonce( $_POST['analyize_mp3_nonce'], '_analyize_mp3_nonce' ) ) return;
	if ( ! current_user_can( 'edit_post', $post_id ) ) return;

	if ( isset( $_REQUEST['size'] ) )
        update_post_meta( $post_id, 'length', sanitize_text_field( $_POST['size'] ));
    if ( isset( $_REQUEST['time'] ) )
        update_post_meta( $post_id, 'time', sanitize_text_field( $_POST['time'] ));
}
add_action( 'save_post', 'analyize_mp3_save' );

Thanks again for the help, I really appreciate it.

You need to add some PHP code prior to or within the jQuery that tries to get the saved values from the DB.

If the values exist, generate jQuery code that assigns these values to the corresponding jQuery variables. It may not matter, but you might also assign the same values to the hidden fields so they are setup to re-save the same should nothing change here when the post is updated.

If the DB values don’t exist, the file has not been uploaded, and what you have is adequate. No need to do anything additional.

Now it’s done. Thanks again for the help.

function analyize_mp3_add_meta_box() {
	add_meta_box(
		'analyize_mp3-analyize-mp3',
		__( 'Analyize MP3', 'analyize_mp3' ),
		'analyize_mp3_html',
		'post',
		'normal',
		'default'
	);
}
add_action( 'add_meta_boxes', 'analyize_mp3_add_meta_box' );
function analyize_mp3_html( $post) {
	wp_nonce_field( '_analyize_mp3_nonce', 'analyize_mp3_nonce' ); ?>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
    audio {
    display: none;
}
  </style>
<script type='text/javascript'>//<![CDATA[
$(function(){
var objectUrl;

$("#audio").on("canplaythrough", function(e){
    var seconds = e.currentTarget.duration;
    var duration = moment.duration(seconds, "seconds");
    
    var time = "";
    var hours = duration.hours();
    if (hours > 0) { time = hours + ":" ; }
    
    time = time + duration.minutes() + ":" + duration.seconds();
    $("#duration").text(time);
    $('#timelength').val(time);
    
    URL.revokeObjectURL(objectUrl);
});

$("#file").change(function(e){
    var file = e.currentTarget.files[0];
   
    $("#filesize").text(file.size);
    $('#size').val(file.size);
    
    objectUrl = URL.createObjectURL(file);
    $("#audio").prop("src", objectUrl);
});

});//]]> 

</script>

<p>Select a .mp3 file</p>
<input type="file" id="file" />

<audio id="audio"></audio>

<p>
  <label>File Size:</label>
  <span id="filesize"></span>
  <input type="hidden" id="size" name="size" value=""/>
</p>

<p>
  <label>Song Duration:</label>
  <span id="duration"></span>
  <input type="hidden" id="timelength" name="time" value=""/>
</p>
    
    <?php
}

function analyize_mp3_save( $post_id ) {
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	if ( ! isset( $_POST['analyize_mp3_nonce'] ) || ! wp_verify_nonce( $_POST['analyize_mp3_nonce'], '_analyize_mp3_nonce' ) ) return;
	if ( ! current_user_can( 'edit_post', $post_id ) ) return;

    if ( isset( $_POST['size'] ) )
    if (!empty($_POST["size"])) {;
        update_post_meta( $post_id, 'length', sanitize_text_field( $_POST['size'] ));
    };
    if ( isset( $_POST['time'] ) )
    if (!empty($_POST["time"])) {;
        update_post_meta( $post_id, 'time', sanitize_text_field( $_POST['time'] ));
    };
}
add_action( 'save_post', 'analyize_mp3_save' );