1

I am submitting a form using jquery onclick. On the PHP side, it checks to see if there is already an existing document by the same name. If true, a small form is returned in the response with 3 options, dependent on the record data. Those options are displayed in a message window. One of those selections needs to resubmit the previous form data, substituting the new name.

The problem is, the change name form does not exist when the page is loaded and thus does not recognize the ClickCheck class in the new form.

How can I resubmit this form with the new DocName?

The submit in the main form (actually this is one of four submits)

    <a class="ClickCheck" id="Create" href="javascript:void(0)">Create Bill</a>

The jQuery:

$('.ClickCheck').click(function()
{
    var ButtonID = $(this).attr('id');
    $('#Clicked').val(ButtonID);
    var Form = $('#TheForm');
    if(ButtonID == "Save")
    {
        // Do save code
    }
    else
    {
        var FormData = Form.serialize();
        $.ajax(
        {
            type: "POST",
            url: "scripts/Ajax.php",
            data: FormData,
            success: function(response)
            {
                $('#MWContent').html(response);
                $('#MessageWindow').show();
            }
        });    
    }
});

Then, in the response, I have:

<form id="ChangeName" name="ChangeName">
  Use another name:
  <input type="text" id="DocName" name="DocName" size="60" maxlength="60" value="" placeholder="Document Name" />
  <a class="ClickCheck" id="NewName" href="javascript:void(0)">Go</a>
</form>

The idea is to have the "NewName" resubmit the form (with the new name, of course.) I can, of course, detect that in the click function.

RationalRabbit
  • 1,037
  • 13
  • 20

1 Answers1

1

You can attach the click() event to the document to make it global.

$(document).on('click', '.ClickCheck', function(e){
  e.preventDefault() // <<<< Either this
  // Do stuff
  return false      // <<<< Or this
})

http://api.jquery.com/on/

Also don't use href="javascript:void(0)", use return false or e.preventDefault() in the callback function.

Mina
  • 1,508
  • 1
  • 10
  • 11
  • Cool! Do I have to deal with the event variable in some way? also, just curious - what's wrong with javascript:void()? Are you talking about eliminating the href altogether? – RationalRabbit Nov 02 '17 at 07:55
  • @RationalRabbit - It's very well explained here https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean. You can use the event variable with `e.preventDefault()` - I prefer using `href="#"` and have Javascript contained to its own domain and not in the markup. – Mina Nov 02 '17 at 07:59
  • @RationalRabbit - if that worked for you please consider accepting my answer :) - Thanks! – Mina Nov 02 '17 at 08:07
  • The problem with href="#" is it sends it back to the top of the page, which I don't want. – RationalRabbit Nov 02 '17 at 08:09
  • 1
    See the updated answer, `return false` or `e.preventDefault()` prevent the anchor `#` to trigger. – Mina Nov 02 '17 at 08:19