Question

In my web application I have created a form that will allow users to insert stories to an online newspaper.
In order to do this I have created a hidden table which I clone to allow users to create new stories which I later catch on the submit event of my form.

Here I am facing a problem regarding the contents of the story’s text.
For example, if the story contains double quotes on it, it will break my string when creating a new element on the submit event, like so;

$("form").submit(function () {

            var myForm = $(this);
            // begin cover stories process

            var stories = $("#newsBlock").find("table");

            if (stories != undefined) {
                stories.each(function (index) {
                    var cNew = new CoverNew($(this).find('[name="news_id"]').attr("value"), $(this).find('[name="editionDate"]').attr("value"), $(this).find('[name="newsTitle"]').attr("value"), $(this).find('[name="newsLink"]').attr("value"), $(this).find('[name="newsAuthor"]').attr("value"), $(this).find('[name="newsSource"]').attr("value"), $(this).find('[name="newsDescription"]').attr("value"), $(this).find('[name="newsImageListing"]').attr("value"), $(this).find('[name="newsImageStory"]').attr("value"), $(this).find('[name="newsImageStory_Author"]').attr("value"), $(this).find('[name="newsImageStory_Description"]').attr("value"), $(this).find('[name="newsVideo"]').attr("value"), $(this).find('[name="newsText"]').val(), $(this).find('[name="newsOrder"]').attr("value"));

                    var ids = '<input name="Cover[' + index + '].id" id="Cover[' + index + '].id" type="text" value ="' + cNew.id + '" style="display:none;" />';
                    var title = '<input name="Cover[' + index + '].title" id="Cover[' + index + '].title" type="text" value="' + cNew.title + '" style="display:none;" />';
                    var editionDate = '<input name="Cover[' + index + '].edition_date" id="Cover[' + index + '].edition_date" type="text" value="' + cNew.editionDate + '" style="display:none;" />';
                    var link = '<input name="Cover[' + index + '].link" id="Cover[' + index + '].link" type="text" value="' + cNew.link + '" style="display:none;" />';
                    var author = '<input name="Cover[' + index + '].author" id="Cover[' + index + '].author" type="text" value="' + cNew.author + '" style="display:none;" />';
                    var source = '<input name="Cover[' + index + '].source" id="Cover[' + index + '].source" type="text" value="' + cNew.source + '" style="display:none;" />';
                    var description = '<input name="Cover[' + index + '].description" id="Cover[' + index + '].description" type="text" value="' + cNew.description + '" style="display:none;" />';
                    var menuPicture = '<input name="Cover[' + index + '].photo_in_list" id="Cover[' + index + '].photo_in_list" type="text" value="' + cNew.menu_picture + '" style="display:none;" />';
                    var story_picture = '<input name="Cover[' + index + '].photo_in_news" id="Cover[' + index + '].photo_in_news" type="text" value="' + cNew.story_picture + '" style="display:none;" />';
                    var story_picture_description = '<input name="Cover[' + index + '].photo_in_news_desc" id="Cover[' + index + '].photo_in_news_desc" type="text" value="' + cNew.story_picture_description + '" style="display:none;" />';
                    var story_picture_author = '<input name="Cover[' + index + '].photo_in_news_author" id="Cover[' + index + '].photo_in_news_author" type="text" value="' + cNew.story_picture_author + '" style="display:none;" />';
                    var video = '<input name="Cover[' + index + '].video" id="Cover[' + index + '].video" type="text" value="' + cNew.video + '" style="display:none;" />';
                    var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content + '" style="display:none;" />';
                    var order = '<input name="Cover[' + index + '].order" id="Cover[' + index + '].order" type="text" value="' + cNew.order + '" style="display:none;" />';

                    myForm.append(ids);
                    myForm.append(title);
                    myForm.append(editionDate);
                    myForm.append(link);
                    myForm.append(author);
                    myForm.append(source);
                    myForm.append(description);
                    myForm.append(menuPicture);
                    myForm.append(story_picture);
                    myForm.append(story_picture_description);
                    myForm.append(story_picture_author);
                    myForm.append(video);
                    myForm.append(content);
                    myForm.append(order);

                    index++;
                });
            }
  });

In the above process, I collect the tables cloned by the user which contain stories.

Inside the variable content I place the text of the story.
But by the way I am concatenating it, if the text contains a double quote, the string will be broken at that point.
Is there anything I could do with javascript (even pure javascript) to fix this problem?

Answer 1

Yes – do var content = '<input name="Cover[' + index + '].content" id="Cover[' + index + '].content" type="text" value="' + cNew.content.replace(/"/g, "&quot;") + '" style="display:none;" />';