I have a HTML/PHP code as shown below in which on click of a button conversion of mp4 into mp3 starts happening.
HTML/PHP Code:
<?php foreach ($programs as $key => $program) { ?>
<tr data-index="<?php echo $key; ?>">
<td><input type="submit" id="go-btn" name="go-button" value="Go" data-id="<?php echo $key; ?>" ></input></td>
</tr>
<?php }?>
Php code (where mp4=>mp3 conversion happens):
$f = $mp4_files[$_POST['id']];
$parts = pathinfo($f);
switch ($parts['extension'])
{
case 'mp4' :
$filePath = $src_dir . DS . $f;
system('C:\ffmpeg\bin\ffmpeg.exe -i ' . $filePath . ' -map 0:2 -ac 1 ' . $destination_dir . DS . $parts['filename'] . '.mp3', $result);
break;
}
As soon as the button is clicked from the HTML/PHP Code above, the text gets changed from Go to Converting in the UI because I have added JS/jQuery code in my codebase but this JS/jQuery code which I have added just change the text only.
It doesn't actually know that the Conversion is happening in the background.
JS/jQuery code:
$("input[name='go-button']").click( function() {
// Change the text of the button, and disable
$(this).val("Converting").attr("disabled", "true");
});
Problem Statement:
I am wondering what modification I need to do in the JS/jQuery code above so that UI actually knows that conversion is happening in the background.
Probably, we need to add make establish some connection between JS/jQuery and php code above but I am not sure how we can do that.