HTML / Javascript append multiple words from data

Question

I am trying to append a text from a button to a modal window.

It works so far, but if the data contains more than 2 word, it just prints the first one what am I doing wrong?

...
<button type="submit" class="observeSubmit deleteProject" data-title={{ $productValue->title }} name="removeProj">
...

Js function:

$('button[name="removeProj"]').on('click', function(e){
    var $form = $(this).closest('form'); // closest parent form
    e.preventDefault();

    $("#prodTitle").empty().append($(this).data('title') || '-');

    $('#confirm').modal({ backdrop: 'static', keyboard: false })
    $('#delete').click(function() {
        $form.trigger('submit'); // submit the form
    });
});

So if I click on the button a modal opens and shows the value inside $productValue->title.

If $productValue->title holds for example Jon Doe.

The window just shows Jon.

I am not sure if it is due to the data attribute, maybe it can just hold one value, or if it due to the javascript function.

Answer 1

You need to wrap custom attributes in quotes.

<button data-title="{{ $productValue->title }}"></button>

Answer 2

<button type="submit" class="observeSubmit deleteProject" data-title="{{ $productValue->title }}" name="removeProj">

The way it is now, it assigns the value "Jon" to data-title, and sees Doe as a seperate attribute.

Answer 3

working fine here https://jsfiddle.net/

<form action="">
<button type="submit" class="observeSubmit deleteProject" data-title="test sdfg" name="removeProj">btntest</button>
</form>
<div id="prodTitle"></div>
$('button[name="removeProj"]').on('click', function(e){
    var form = $(this).closest('form'); // closest parent form
    debugger
    e.preventDefault();

    $("#prodTitle").empty().append($(this).data('title') || '-');

    $('#confirm').modal({ backdrop: 'static', keyboard: false })
    $('#delete').click(function() {
        $form.trigger('submit'); // submit the form
    });
});