Submitting information in a form field populated with Jquery

Question

So I have a form with questions, each question has a value and the values are added up to get your "score". The score is displayed in an input field and when you submit it, it sends the information in the input fields (the score along with name and email). The problem im having is, even though the "score" field is visually updating, its not sending the information in the field. I have tried using both the .attr and .val and both update the field but don't sent the value.

$("input[name=score]").attr('value', score);

$("input[name=score]").val(score)

The only way I get it to send the information is when I enter the value manually, so I know that part of it is working, its just not seeing the value that the jquery fills in.

Update: Here is the full code that does the calculating

$(document).ready(function(){

function calcscore(){
var score = 0;
$(".hs-input:checked").each(function(){
    score+=parseInt($(this).val(),10);
});
$("input[name=score]").attr('value', score);
}
$().ready(function(){
$(".hs-input").change(function(){
    calcscore()
});

$("input[name=score]").prop("readonly", true);

});

}); //end doc rdy

the form is quite long but the field in question is:

<input class="hs-input score" type="text" name="score" /><br>

I am using HubSpot for the form submission so I cant really see exactly what they are receiving, only that the score is blank unless I remove the "read only" and input into the field manually.

You are able to enter the value manually that means control is enabled, disabled input control doesn't send the value!!! Please show us the html and your script (only required portion). — Sudipta Kumar Maiti, Oct 27 '15 at 19:02
Could you also post an example of what the form submission data looks like? Could it be that what has a name of score is being submitted by an id that is different? — JB King, Oct 27 '15 at 19:14
Is there a difference between data entered by a user and via jquery. Could it be that Hubspot is just not accepting the value unless it is entered by a person? — Erin, Oct 27 '15 at 19:55

score 2 · Accepted Answer · edited Jun 21 '16 at 22:36

2

Just wanted to let everyone know I figured it out, I needed to add following into the form creation so that the value was updated just before submitting:

onFormSubmit($form){
    $('input[name="score"]').val(sum).change();
}

The .change() part at the end is the important thing to, it is required to update a form field for hubspot.

edited Jun 21 '16 at 22:36

Umut Sirin

2,462
1
21
31

answered Oct 28 '15 at 13:36

Erin

93
7

score 1 · Answer 2 · answered Oct 27 '15 at 19:22

here's a functional demo of value being changed by jquery and showing up in the console in the .serialize()

$(document).ready(function() {
    $('.changeScore').on('click', function() {
     $("input[name=score]").val('99');
    });
 
    $('.submit').on('click', function() {
     var data = $('form').serialize();
        console.log(data);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input name="score" />
</form>
<button class="submit">Submit</button>
<button class="changeScore">change score</button>

Submitting information in a form field populated with Jquery

2 Answers2