2

I am trying to use the In-field labels plugin on the contact form of my webpage, but the script is not working (the in-field labels don't appear).

Also my form has positioning problems that I have been trying to work with for a while but in vain. Here is my code:

$(function(){
    $("label").inFieldLabels();
});

<form action="" method="get" name="contact-form" accept-charset="utf-8">
    <fieldset>
    <p>
        <label for="name">Name</label><br />
        <input type="text" name="name" value="Name" id="name">
    </p>
    <p>
        <label for="email">Email</label><br />
        <input type="text" name="email" value="Email" id="email">
    </p>
    <p>
        <label for="company">Company</label><br />
        <input type="text" name="company" value="Company" id="company">
    </p>
    <p>
        <label for="message">Message</label><br />
        <textarea name="message" id="message">Message</textarea>
    </p>
    </fieldset> 
    <input type="submit" value="Submit" id="submit-btn" />
    <input type="reset" value="Reset" id="reset-btn" />
</form>
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
James
  • 49
  • 6

2 Answers2

2

I see you used the following code for textarea : 

<textarea name="message" id="message" value="Message"></textarea>

but

<textarea id="mytxtarea"></textarea>

has no value property. if you want to add text within textarea then try with this

<textarea name="message" id="message">Message</textarea>
Ariful Islam
  • 7,639
  • 7
  • 36
  • 54
2

You need to get rid of the values of all inputs for this to work. They should be value="".

Using IE 9 Developer Tool, I see that you have the following CSS showing up for the <p> tag around the input fields:

body#contact .content #middle #right-col #form p {

left: -300px;
top: 22px;
color: #aaaaaa;
position:relative;

}

Get rid of that -300px. In IE it pushes the input fields off the form.

Edit: Okay, I think I've fixed it! Get rid of the left: -300px; offset for the <p> elements and add a clear: both; to the fieldset element. I tested it in IE and FF and it seemed to work just fine.

Watermark Studios
  • 1,173
  • 1
  • 10
  • 24
  • Try setting the div around your form to `position="relative"` and your form `position="absolute"` and let me know what happens. – Watermark Studios Oct 10 '11 at 17:47
  • You're actually right, I'm fixing up OP's question now to be salvageable and work with your answer a bit clearer. Wasn't sure how to work in the positioning part, please suggest an [edit](http://stackoverflow.com/posts/7710646/edit) to the question if you figure out how. – Wesley Murch Oct 10 '11 at 17:59
  • When I disabled the CSS I just added in my answer edit, in IE it worked just fine. Haven't tested it in FF to see if it pushes the input fields to the right yet. – Watermark Studios Oct 10 '11 at 18:12
  • I mean if you can fix the question to represent the CSS issue that would help. It's about to be closed as "too localized", because once OP fixes the issue, the link is meaningless. I'm hoping James is reading this, not sure why I'm asking you to do it. – Wesley Murch Oct 10 '11 at 18:14
  • I meant to the question itself, by clicking the link in my previous comment (make it useful by showing the problem). Nevermind, didn't mean to make you work - it's OP's responsibility. – Wesley Murch Oct 10 '11 at 19:41
  • Wow...that is a different interface than when I just tried to edit the question directly. My changes don't seem to have shown up, so maybe I have to use your link. I too hope he is reading this, because the answer is clear now that I've played with his code. Hopefully it's useful. – Watermark Studios Oct 10 '11 at 20:21