Ajax submit certain field

Question

I'm new to Jquery ajax, and I'm trying to submit certain field only for checking instead of submitting the whole form. Here I have made a function for checking the username whether is it available, and it works fine, but I doesn't want it to submit the whole form when doing the checking.

Here is my script:

<form id="userCheck">
<input type="text" class="register_field" name="fr_username" id="fr_username" />
<input type="text" class="register_field" name="fr_password" id="fr_password" />
<input type="text" class="register_field" name="fr_password1" id="fr_password1" />
</form>

<script>
$.validator.addMethod("duplicateCheck", function(value, element) {
            $.ajax({
        type: 'POST',
        url: '../a/checkDuplicate',
        data: $("#userCheck").serialize(),
        dataType: 'json'
    }).success(function(data){
        if(data.status == '1'){
            console.log('Available!');
        }
        else {
            console.log('not available');
            $('#fr_dupChkU_msg').html('');
        }
    });
        });
</script>

Just put the user name field data into your ajax call data field. — Jurik, Jun 13 '16 at 09:56
Your code shows ... well it should end in an javascript error. — Jurik, Jun 13 '16 at 09:58
Maybe this is related? http://stackoverflow.com/questions/2628413/jquery-validator-and-a-custom-rule-that-uses-ajax — Ninigi, Jun 13 '16 at 10:01

Jurik · Answer 1 · 2016-06-15T07:37:27.237

1

In short, that is how you get a value of an input field with jQuery:

<script type="text/javascript">
  var username = $('#fr_username').val();

  $.validator.addMethod('duplicateCheck', function(value, element) {
            $.ajax({
        type: 'POST',
        url: '../a/checkDuplicate',
        data: {username: username},
    }).success(function(data){
        if(data.status == '1'){
            console.log('Available!');
        }
        else {
            console.log('not available');
            $('#fr_dupChkU_msg').html('');
        }
    });
        });
</script>

edited Jun 15 '16 at 07:37

answered Jun 13 '16 at 10:04

Jurik

3,244
1
31
52

I followed your instruction, sadly to say as what I expected. Empty submission. http://prntscr.com/bfs1be – MuthaFury Jun 13 '16 at 10:28
What do you mean with 'empty submission'? Could you share us your network traffic? What data was sent to your server? – Jurik Jun 13 '16 at 11:02
you can refer the screenshot I have attached on my previous comment – MuthaFury Jun 15 '16 at 03:28
Did you use my example? Because I deleted `data-type`. – Jurik Jun 15 '16 at 07:18
yeah I did, but still the same. I felt pretty unsafe to submit a form with empty value. Probably caused by conflicts with my framework? – MuthaFury Jun 15 '16 at 07:29
What happens when you use `var username = $('#fr_username').val();` in your console - is there a value? – Jurik Jun 15 '16 at 07:30
empty too... That is the funny thing, however, if I put outside of the function,the username variable contains the value – MuthaFury Jun 15 '16 at 07:35
still nope :( Probably it needs the form name – MuthaFury Jun 15 '16 at 10:17
I added this code seems to work.... `var username = $('#userCheck').find('input[name="fr_username"]').val();` Anyway thanks! – MuthaFury Jun 15 '16 at 10:32

Ajax submit certain field

1 Answers1