2017-01-24 5 views
2

Webプレースに事前入力が必要なNetresultsフォームがあります。フォームがjavascriptでページに挿入されているため、ソースコードのフォームフィールドが表示されません。JQuery - サードパーティのフォームにフォームフィールドを事前入力

フォームが私のページにあったが、そうでない場合は、どのようにフィールドをターゲットにするかわからない。誰も助けることができますか?

var keywords = getUrlParameter('keywords'); 

$('input[name=netres-keywords]').val(keywords); 

netresults形態は、このコードが挿入されている:

(function() { 
    var $__MAForm; 
    ($__MAForm =function(){ 
     if(typeof($__MA)=="undefined"){ 
      return window.setTimeout($__MAForm,50); 
     }else{ 
      $__MA.addMAForm("43788303-2b62-4774-ad0f-63542e3ed92a", "forms.example.com"); 
     } 
    })(); 
})(); 
+0

あなたは、挿入されたフォームは、ページ上の*点検の要素*を実行して、HTMLで表示する方法を含めることはできますか? – Santi

+0

でも可能ですが、多くのページに多数のフォームがありますので、可能な場合は避けてください。 – LeeTee

+0

すべてのページから完全なHTMLは必要ありませんが、私たちは何も知らない形です。 – Santi

答えて

2

これはMutation Observerの使用を必要とし得ます。

突然変異観測者は、DOM(追加された要素など)に対する変更をチェックし、これを使用してイベントを発生させることができます。次のコードは、要素が<body>に追加されるたびに、名前がnetres-keywordsの入力値を変更します。

この記事の最後にあるJSFiddleの例では、ページに追加されるフォームをシミュレートするボタンを作成しました。ご覧のとおり、テキストボックスはあらかじめ設定されています。

EXAMPLE JSFIDDLE

$(document).ready(function() { 
 

 
    var keywords = "this is a test keyword"; 
 
    var formCount = $("form").length; 
 

 
    var observer = new MutationObserver(function() { 
 
     var newFormCount = $("form").length; 
 
     if (newFormCount > formCount) { 
 
      $('input[name=netres-keywords]').last().val(keywords); 
 
     } 
 
    }); 
 

 
    $("button").click(function() { 
 
     $form = $("<form>").html("<h1>New form:</h1><input type='text' name='netres-keywords'>"); 
 
     $("body").append($form); 
 
    }); 
 
    
 
    var observerConfig = { 
 
     attributes: true, 
 
     childList: true, 
 
     characterData: true 
 
    }; 
 
    
 
    var targetNode = document.body; 
 
    observer.observe(targetNode, observerConfig); 
 
});
form { 
 
    padding: 10px; 
 
    border: 1px solid red; 
 
    margin-bottom: 20px; 
 
} 
 

 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button> 
 
    SIMULATE ADDING FORM 
 
</button> 
 
<br> 
 
<br>

+0

ありがとう私はこれを試してみます – LeeTee

+1

@LeeTee私の更新されたコードを見てください。 – Santi

+0

@LeeTee質問に奨励金を追加したことに気付きました。私が答えた*あなたのために*働かない理由はありますか? – Santi

関連する問題