0

This one is really baffling me. I'm using replaceWith() to "clear" a file input field. However, when it replaces it, it puts it back in the wrong place, and I have no idea why. I used the term "suddenly" in the title because what's even more mysterious is that when I stopped working for the weekend the replacement was working exactly as expected. Now I get back to work and suddenly it's not.

Here's the source HTML before calling replaceWith():

<label>Audio</label>
<i style="color:#888888;">MP3 or OGG format recommended</i>
<br>
<button id="clear_audio_input" style="display:none;">Clear</button>
<input type="file" value="" name="source_audio" style="width:300px;">
<br>
<div style="margin-top:15px;">
    <b>Current: </b>
    <i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i>
    <br>
    <input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio">
    <span id="current_audio_info_a"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete">

Delete current audio? Current audio will be replaced

Note the location of the FILE input field, named "source_audio". It's immediately after the "Clear" button.

Now, after I call replaceWith(), the HTML looks like this:

<label>Audio</label>
<i style="color:#888888;">MP3 or OGG format recommended</i>
<br>
<button id="clear_audio_input" style="display: none;">Clear</button>
<br>
<div style="margin-top:15px;">
    <b>Current: </b>
    <i id="current_audio_source">1360954394_121RuleOfRosePianoEtudeI.mp3</i>
    <br>
    <input type="file" value="" name="source_audio" style="width:300px;">
    <input id="source_audio_value" class="required_media" type="hidden" value="1360954394_121RuleOfRosePianoEtudeI.mp3" name="source_audio">
    <span id="current_audio_info_a" style="display: inline;"><input type="checkbox" style="position:relative;top:3px;margin-left:0px;" value="yes" name="source_audio_delete">

Delete current audio? Current audio will be replaced

Notice that it is now several lines down and inside another DIV.

Here is the script that controls the "Clear" button's actions:

$("#clear_audio_input").live("click", function() {
    $("input[name='source_audio']").replaceWith($("input[name='source_audio']").val('').clone(true));
    $("#source_audio_value").val($("#current_audio_source").text());
    $(this).hide();
    $("#current_audio_info_a").show();
    $("#current_audio_info_b").hide();
    checkRequiredMedia();
    return false;
});

Here's the basic intended workflow. On load, the clear button is hidden because there is nothing yet to clear. After the user has selected a file, the clear button appears. Clicking the button will clear the file input (by replacing it) and then the button will hide again, essentially returning the form to the same state it was in on load.

Any reason why this oddity is happening (especially since it wasn't happening a few days ago, and I haven't changed anything since then)?

vertigoelectric
  • 1,307
  • 4
  • 17
  • 37
  • 1
    How is this any different than simply calling `$("input[name='source_audio']").val('')`? – Blazemonger Feb 19 '13 at 18:54
  • 1
    In IE at least, a FILE input field is read-only, so you cannot clear it this way. The entire element needs to be removed and replaced. This is something I learned here on Stack Overlow. – vertigoelectric Feb 19 '13 at 18:57

1 Answers1

4

The issue is because you have two inputs with the name source_audio. To get around this, you will need to either give the two inputs fields an id, or change the name.

For example:

$('#my_file_input').replaceWith('<input id="my_file_input" type="file" name="source_audio" />');
$('#my_hidden_file_input').val('');
Kyle
  • 4,421
  • 22
  • 32
  • I never caught that. This makes perfect sense, although that doesn't explain why it was working before and not now. Good eye. I'm glad I posted here. Let me rename the input(s) and make sure everything works. If it does, this answer is accepted. – vertigoelectric Feb 19 '13 at 18:58
  • Changed the input names and updated a couple other things and now it works fine. Sheesh. Thank you. Can't believe I missed that, but it happens. – vertigoelectric Feb 19 '13 at 19:09
  • Glad you were able to get it working. Selecting by name for input fields always throws me off too. – Kyle Feb 19 '13 at 19:13