Javascript function not changing value of element

Question

So I don't know if I am just overlooking a typo but I have the following two buttons on a form

<button id="saveAffidavit "class="btn btn-primary">Save Affidavit</button>
<button id ="submitAffidavit" class="btn btn-primary">Submit Affidavit</button>

Then this is the Javascript

$('#submitAffidavit').click(function(){

    console.log("Submit Affidavit Button Clicked");

    submitAffidavit();
});

$('#saveAffidavit').click(function(){

    console.log("Save Affidavit Button Clicked");

    saveAffidavit();
});

function saveAffidavit(){
    console.log("Save Affidavit Ran");

    document.getElementById('submitType').value = 'Save';

    console.log(document.getElementById('submitType').value);

    document.getElementById("jpFormInput").submit();

}

function submitAffidavit(){

    console.log("Submit Affidavit Ran");

    document.getElementById('submitType').value = 'Submit';

    console.log(document.getElementById('submitType').value);

    document.getElementById("jpFormInput").submit();
}

The .click for 'submitAffidavit' seems to function and successfully calls the submitAffidavit() method.

the .click for 'saveAffidavit' does NOT seem to function at all.. but the form is still submitting when the button is clicked. I do not get any of the console messages printed out.

any ideas are appreciated. thanks

You have a trailing space in the saveAffidavit button element id... — Paul T.
– Paul T., Commented Nov 27, 2017 at 20:26
Default button type is "submit" so both will submit form unless you prevent it — charlietfl
– charlietfl, Commented Nov 27, 2017 at 20:26
You have an extra space at id ="submitAffidavit" in the button tag. That should be id="submitAffidavit". — dferenc
– dferenc, Commented Nov 27, 2017 at 20:27

Neil · Accepted Answer · 2017-11-27 20:27:20Z

1

You have an extra space after your ID name, making that id not work properly. ("idName ").

$('#submitAffidavit').click(function() {
    console.log("Submit Affidavit Button Clicked");
    submitAffidavit();
});

$('#saveAffidavit').click(function() {
    console.log("Save Affidavit Button Clicked");
    saveAffidavit();
});

function saveAffidavit() {
    console.log("Save Affidavit Ran");
    document.getElementById('submitType').value = 'Save';
    console.log(document.getElementById('submitType').value);
    document.getElementById("jpFormInput").submit();
}

function submitAffidavit() {
    console.log("Submit Affidavit Ran");
    document.getElementById('submitType').value = 'Submit';
    console.log(document.getElementById('submitType').value);
    document.getElementById("jpFormInput").submit();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="saveAffidavit" class="btn btn-primary">Save Affidavit</button><!-- removed a space here after before the " when ending the id-->
<button id ="submitAffidavit" class="btn btn-primary">Submit Affidavit</button>

answered Nov 27, 2017 at 20:27

Neil

14.3k3 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TonyO Over a year ago

and there it is. ugh. thank you for taking the time to point out this silly mistake.

Bsalex · Accepted Answer · 2021-06-29 23:13:24Z

1

The default type attribute of <button> is submit.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
So your buttons actually look like this <button type="submit"></button>, after defaults are applied.

Add type="button" attribute to your buttons to prevent submitting.

edited Jun 29, 2021 at 23:13

answered Nov 27, 2017 at 20:28

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript function not changing value of element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related