php DOMDocument: complete transform of form element? wrapping and removing?

Question

hey guys, $form holds this...

<form method="post" action="">
    <input type="hidden" name="ip" value="127.0.0.1">
    <label for="s2email">Your Email</label>
    <input type="text" name="email" id="s2email" value="email..." size="20" onfocus="if (this.value == 'email...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'email...';}">
    <input type="submit" name="subscribe" value="Subscribe">
    <input type="submit" name="unsubscribe" value="Unsubscribe">
</form>

Since I have no idea what's possible with the DOMDocument class I need to ask for help. I actually have two things I need to transform on the $form above.

1.) label-s2email and its input#sd-email should be wrapped inside a <div class="name"> Is that even possible to select those two (via id or for-attribute) and wrap those two into a div?

2.) Is it possible to remove the onfocus and onblur attribute with php?

thank you for your help

Answer 1

Since I cannot find a suitable duplicate that shows how to wrap nodes with DOM, here is the solution:

// Setup DOMDocument and XPath
$dom = new DOMDocument;
$dom->loadHTML($form);
$xpath = new DOMXPath($dom);

// Create <DIV> with class attribute name
$div = $dom->createElement('div');
$div->setAttribute('class', 'name');

// Find <input id="s2email"> and remove event attributes
$input = $xpath->query('/html/body/form/input[@id="s2email"]')->item(0);
$input->removeAttribute('onfocus');
$input->removeAttribute('onblur');

// Find <label for="s2email"> and insert new DIV before that
$label = $xpath->query('/html/body/form/label[@for="s2email"]')->item(0);
$label->parentNode->insertBefore($div, $label);

// Move <label> and <input> into the new <div>
$div->appendChild($label);
$div->appendChild($input);

// Echo the <form> outer HTML
echo $dom->saveHTML($dom->getElementsByTagName('form')->item(0));

The above code will produce (live demo):

<form method="post" action="">
    <input type="hidden" name="ip" value="127.0.0.1"><div class="name">
<label for="s2email">Your Email</label><input type="text" name="email" id="s2email" value="email..." size="20">
</div>
    <input type="submit" name="subscribe" value="Subscribe"><input type="submit" name="unsubscribe" value="Unsubscribe">
</form>

Note that in order to pass a node to saveHTML, you need PHP 5.3.6. See

• http://gooh.posterous.com/the-dom-goodie-in-php-536
• How to return outer html of DOMDocument?

for possible workarounds before that.

Answer 2

The lazy solution would be to use phpQuery or QueryPath which allow for:

print qp($html)
   ->find("*[onfocus], *[onblur]")->removeAttr("onblur")->removeAttr("onfocus")
   ->top()->find("label[for=s2email], input#s2email")->wrapAll("<div class='name'></div>")
   ->top("form")->xml();

Albeit in this case you could use DOMDocument directly. Only the wrapping part would be a bit more elaborate there. You could simpify this if you wrapped the <label> around the <input> instead of using a for= and name= relationship.