How to know submit function is working or not with click function

Question

I am trying to get the value once the form is submitted by using submit() jquery function and also trying to alert the particular value but going in vain... here is my code

 $('.saving_account .list-radio').click(function() {
   $('.saving_account .selected_radio').removeClass('selected_radio');
   $(this).toggleClass('selected_radio'); 

   $('input[type="radio"]').prop("checked", false);
   $(this).find('input[type="radio"]').prop("checked", true);
   //submit action
   $('form#target').submit(function() {
 alert( $(this).find('input[type="radio"]').val());
});
// alert( $(this).find('input[type="radio"]').val());

   });

jsfiddle url https://jsfiddle.net/y3axmsah/1/

You need to prevent form submition first: `$('form#target').submit(function(e) { e.preventDefault(); ....}` — skobaljic, Jul 13 '16 at 10:18
Possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Jul 13 '16 at 10:19
`fiddle.jshell.net/y3axmsah/1/show/:84 Uncaught ReferenceError: onButtonClick is not defined` — Anonymous Duck, Jul 13 '16 at 10:19
i need on click of list (li) it should call the submit function and the value in alert — Divya Sharma, Jul 13 '16 at 10:52

score 2 · Answer 1 · answered Jul 13 '16 at 10:28

The button with type="submit" will submit the form and you can't see any results. You need to prevent form submission jQuery way:

$('form').on('submit', function(e) {
    e.preventDefault();
    /* your code */
});

or simply by returning true or false in submit event:

 $('#target').submit(function(e) {
     var thisForm = $(this);
     var checkedRadio = thisForm.find('input:checked');
     if (confirm('Selected value is: ' + checkedRadio.val() +', continue?')) {
         return true;
     } else {
         return false;
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="saving_account live-search-list">
    <form id="target">
        <li class="list-radio">
            <input type="radio" name="bankname" value="hdfc" checked> sample text</li>
        <li class="list-radio">
            <input type="radio" name="bankname" value="hdfc1"> sample text1
        </li>
        <li class="list-radio">
            <input type="radio" name="bankname" value="hdfc2"> sample text2
        </li>
        <button type="submit" class="btn btn-lg btn-block btn_green" id="bank527">CONTINUE</button>
    </form>
</ul>

Also on Fiddle

Note: `return false` and `e.preventDefault();` [do not do the same thing](http://stackoverflow.com/a/1357151/542251) — Liam, Jul 13 '16 at 10:31
i need on click of list (li) it should call the submit function and the value in alert — Divya Sharma, Jul 13 '16 at 10:51

score 0 · Answer 2 · edited Jul 13 '16 at 10:30

0

for submit form

change

$('#bank527').submit();

to

$('#target').submit();

edited Jul 13 '16 at 10:30

Liam

27,717
28
128
190

answered Jul 13 '16 at 10:21

Mohammad

497
3
15

i need on click of list (li) it should call the submit function and the value in alert – Divya Sharma Jul 13 '16 at 10:51

How to know submit function is working or not with click function

2 Answers2