I am looking for a way to change the text under a name form element on a squarespace site. This is a website that helps you build websites, but you cannot change the source code yourself. You can, however, inject JavaScript.

I know the id of the two elements I want to change. Looking from the developer tools I see the elements are labels and have an input field with a string underneath as follows:

<label id="theLabel1">
<input type="text"></input>

"First Name"
</label>

The HTML above only appears after having clicked an element with class name "theClickedClass".

While injecting the following code (with jQuery available):

<script type="text/javascript">
$(function() {
    $('.theClickedClass').click(function() {
        $('#theLabel1').text("THE NEW TEXT");
    });
});
</script>

The HTML stays exactly the same as above.

I know that the clicked function works since I put a console.log there. Adding a wait period (to wait for the label to actually exist) does not make a difference.

I don't know why it does not work. Does anyone else have an idea how the text in the label can be changed?

Thanks.

I am looking for a way to change the text under a name form element on a squarespace. site. This is a website that helps you build websites, but you cannot change the source code yourself. You can, however, inject JavaScript.

I know the id of the two elements I want to change. Looking from the developer tools I see the elements are labels and have an input field with a string underneath as follows:

<label id="theLabel1">
<input type="text"></input>

"First Name"
</label>

The HTML above only appears after having clicked an element with class name "theClickedClass".

While injecting the following code (with jQuery available):

<script type="text/javascript">
$(function() {
    $('.theClickedClass').click(function() {
        $('#theLabel1').text("THE NEW TEXT");
    });
});
</script>

The HTML stays exactly the same as above.

I know that the clicked function works since I put a console.log there. Adding a wait period (to wait for the label to actually exist) does not make a difference.

I don't know why it does not work. Does anyone else have an idea how the text in the label can be changed?

Thanks.

• javascript
• jquery
• html
• css

• 1 That missing quote is a typo, right? – Shomz Commented Jan 21, 2015 at 23:08
• @Shomz Yes, I corrected it. – user2609980 Commented Jan 21, 2015 at 23:11
• Input's are self closing ? – adeneo Commented Jan 21, 2015 at 23:13
• The code you have written works just fine. Here is your code with a simple button added to create an element with the class "theClickedClass" jsfiddle/etgjszqn – RhapX Commented Jan 21, 2015 at 23:13

2 Answers 2

I think you are looking something like this :)

<label id="theLabel1">
<input class="my-text" type="text"></input>
"First Name"
</label>



$(document).ready(function(){
 var field = $('.my-text');
   $('#theLabel1').click(function() {
      $("#theLabel1").text('hello there');
      field.insertBefore('#theLabel1');          
});
});

Fiddle here

I give you this JSfiddle. It changes the value after the input.

With this code you can change the value you want:

$('#theLabel1')[0].lastChild.textContent = 'THE NEW TEXT';

http://jsfiddle/xggbz60o/1/