通过jQuery更改输入后提交表单

Question

I got HTML like this:

<table>
    <form action=\'food.php\' method=\'POST\'>
    <tr><h4>
        <td><span><input type="submit" name="food_edit" class="food_edit" value="Edytuj" /></span></td>
       </h4>
    </tr>
    </form>
</table>

And then a function in jQuery which change input field:

wrap.find('.food_edit')
    .replaceWith('<input type=\'submit\' name=\'food_edit_confirm\' value=\'Potwierdź\' />');

My problem is that after change submitting button, send form doesn't work.

Answer 1

you may try this after replacement of submit button:

$('form').on('click','input[type=submit]',function(){
   //rest of code goes here.
});

Answer 2

you either need to use $( document ).ready() around the particular jquery code or u can try and use the .attr to change the attribs of your class or u can use 'focus' to wrap around it. or u can do something like

$('form').live('submit',function(){
// do the rest of ur code and then submit it....
});

Answer 3

You have invalid HTML. It should look like this:

<form action=\'food.php\' method=\'POST\'>
    <table>
        <tr>
            <td>
                <span>
                    <input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
                </span>
            </td>
        </tr>
    </table>
</form>

If you're looking to add a confirmation you should look into the onsubmit="" in the <form> tag.

Example:

<form action=\'food.php\' method=\'POST\' onsubmit=\'return checkForm();\'>
    <table>
        <tr>
            <td>
                <span>
                    <input type="submit" name="food_edit" class="food_edit" value="Edytuj" />
                </span>
            </td>
        </tr>
    </table>
</form>

JS Code:

function checkForm() {
    return confirm("Submit this form?");
}

Answer 4

<script type="text/javascript">
$(function(){
$('.food_edit').replaceWith("<input type='submit' name='food_edit_confirm' value='Potwierdz' onclick='document.getElementById(\"submit\").click();' />");

});
</script>


<form action='food.php' method='POST'>
        <input type="submit" name="food_edit" class="food_edit" value="Edytuj" onclick="document.getElementById('submit').click();" />
        <input type="submit" style="display:none" id="submit" />
    </form>

The hidden button always do submit the form regardless you do anything with the submit button which is replacable.