I have a form where a user fills out words in a text input field and clicks an "add" button that takes the word(s) they typed and puts them in an empty div as list items. (see screenshot here: http://d.pr/i/BLYp ). The entered word is also put into a hidden field as " • word" to be spit out as a bulleted list on the next page (the "review" page). When the Add button is clicked it does these two things and also clears the input area to be ready for another word.
Here's the problem:
If I have words entered (just like in the screenshot) and click my "next" button, the form page refreshes with "#gf_2" appended to the URL but the form stays on the same page. My hidden field still holds all the words I added, my div does not (all other form fields remain as filled out before hitting next"). If I hit "next" again without changing anything the form moves on as expected. If I add another word with the add button and hit "next" the form refreshes again but still doesn't move to the next page. My div and input fields are HTML Blocks with the input and div written in there. The hidden field is a GF hidden field type.
My jquery for adding and removing words is:
//Add words to list (and hidden field) when Add button is clicked
$('#add_word').click(function() {
var word = $('#word_entry').val(); //The word(s) in the input box
$('#word_entry').val(''); //Clear the input box
$('div.word_list').html(function( index, value) {
if(word != '') //If they clicked "Add" but didn't type anything, ignore it
return value + ' <li class="listed_word">' + word + '</li>'; //Turn the word into a list item and add it to the others
});
$('input.gform_hidden').val(function( index, value) {
if(word != '') //If they clicked "Add" but didn't type anything, ignore it
return value + ' $bull; ' + word;
});
$('#word_entry').focus();
});
//Remove words from list (and hidden field) when clicked
$('.word_list').on("click", "li", function(e) {
var word = $(this).html();
$(this).remove();
$('input.gform_hidden').val(function(index, val) {
removed = val.replace(' • ' + word, '').trim();
return removed;
});
});It seems like it doesn't like there being extra html added in my div, that seems to be the only common factor when it doesn't submit properly. Any ideas? The form is on a site that is not live yet, hidden behind a "coming soon" plugin. If you'll need to see it I'll need to be able to send a login to someone.
