My Javascript note ( include JQuery )

Selector

Find by multi classes

<element class="a b">

$('.a.b')
$('.b.a')

Find the last element

<div id='hello'>
  <p class='world'>a</p/>
  <p class='world'>b</p/>
  <p class='world'>c</p/>
</div>

$(#hello).find('.world:last')
// => c

form

metaprogramming like form submit

Good for grecapcha call-back v2 workaround.

onSubmit = function(){
  const formName = $('.agreement').find('input').attr('name').split('[')[0]
  $(`form[id*=${formName}]`)submit();
}

stop event bubbling

event.preventDefault();

Manipulation

add/append a element

It appends hidden input that gives a param 'force_invalid'.

<form class="my-form">
</form>

function invalid_submit(document) {
  $(document).append("<input name='force_invalid' value='1' type='hidden'></input>" );
  $(document).closest('form').submit();
}

set a value

$('input[name="some_request[policy_agreement]"]').val("0");

if checkbox is checked, open a panel

$.each($(".checkbox"), function(){
    // scope of 'this' is the checkbox
    if($(this).is(":checked")){
        $(this).closest("div").slideToggle("fast");
    }
});

Dynamically change the iframe height from inside

n350071🇯🇵 ・ Oct 29 '19

#javascript

Tips

expression substitution inside a string literal. (式展開)

${} inside the backquote (`) substitute the expression.

const formName = 'my-form'
$(`form[id*=${formName}]`)submit();

$('form[id*=`formName`]').submit(); // ❌doesn't work
$('form[id*=formName]').submit();   // ❌doesn't work

Uncaught Syntaxerror: Unexpected token u

It's same as console.log(JSON.parse(undefined));.
JSON.parse is actually undefined.