I'm having trouble traversing a newly appended DOM element with jQuery

Question

I have a form that I want to be used to add entries. Once an entry is added, the original form should be reset to prepare it for the next entry, and the saved form should be duplicated prior to resetting and appended onto a div for 'storedEntries.' This much is working (for the most part), but Im having trouble accessing the newly created form... I need to change the value attribute of the submit button from 'add' to 'edit' so properly communicate what clicking that button should do. heres my form:

  <div class="newTruck">
    <form id="addNewTruck" class='updateschedule' action="javascript:sub(sTime.value, eTime.value, lat.value, lng.value, street.value);">

        <b style="color:green;">Opening at: </b>
            <input id="sTime" name="sTime" title="Opening time" value="Click to set opening time" class="datetimepicker"/>

        <b style="color:red;">Closing at: </b>
            <input id="eTime" name= "eTime" title="Closing time" value="Click to set closing time" class="datetimepicker"/>

        <label for='street'>Address</label>
            <input type='text' name='street' id='street' class='text' autocomplete='off'/>
            <input id='submit' class='submit' style="cursor: pointer; cursor: hand;" type="submit" value='Add new stop'/>
        <div id='suggests' class='auto_complete' style='display:none'></div>
            <input type='hidden' name='lat' id='lat'/>
            <input type='hidden' name='lng' id='lng'/>

  </form>

 </div>

ive tried using a hundred different selectors with jquery to no avail... heres my script as it stands:

function cloneAndClear(){
    var id = name+now;
    $j("#addNewTruck").clone(true).attr("id",id).appendTo(".scheduledTrucks");
    $j('#'+id).filter('#submit').attr('value', 'Edit');

    $j("#addNewTruck")[0].reset();

    createPickers();
}

the element is properly cloned and inserted into the div, but i cant find a way to access this element... the third line in the script never works.

Another problem i am having is that the 'values' in the cloned form revert back to the value in the source of the html rather than what the user inputs.

advice on how to solve either of these issues is greatly appreciated!

Answer 1

have you tried using .val()? and instead of .filter(), use .find()

$j('#'+id).find(':submit').val('Edit');

Answer 2

I think you want to use find not filter

$j('#'+id).find('#submit')

That should work in practice, though you've got problems there because there are multiple elements with the same id. I'd change your HTML to use classes, or in this specific case, you don't need either:

$j('#' + id).find(":submit")

Answer 3

Hi Culov,

nickf solution works. (just wrote a piece of code to check that). Do check the definition of filter in jquery documentation.

Reduce the set of matched elements to those that match the selector or pass the function's test.

You have use find in this case. Also as nick mentioned having multiple elements with same id is troublesome, especially when you are doing dom manipulation. Better go with appropriate classes.