I'm trying to show the .hideme message on click of submit only when it is disabled.
And the .hideme should be unique for each submit. I'm not sure if I should use data-attributes to associate them.
$(document).ready(function() {
$("#post-1").hide();
$("#post-1").click(postNotification);
});
function postNotification() {
$("#post-1")
.show()
.animate({
height: "30px",
opacity: 1
}, 250)
.delay(2000)
.animate({
height: "0px",
opacity: 0
}, 250);
}
.hideme {
background: blue;
height: 0px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
<div class="hideme" id="post1">Message 1</div>
<input type="text" name="name" autocomplete="off" required/>
<input type="submit" data-submit="1" id="post1" disabled></input>
</div>
<div class="second">
<div class="hideme" id="post2">Message 2</div>
<input type="text" name="name" autocomplete="off" required/>
<input type="submit" data-submit="2" id="post2"></input>
</div>
instead of using (disabled) you can use css to make element seem to be disabled
.disabled
{
color:#C0C0C0;
}
then add this class to input instead of disabled
<input type="submit" data-submit="1" class="btn disabled" id="post1" ></input>
and in jquery detect that element has enabled or disabled class and decide which action should be done
$(document).ready(function() {
$(".btn").click(
function(event){
if($(event.target).hasClass("disabled")){
event.target.parentElement.querySelector(".hideme").style.opacity="1";
event.target.parentElement.querySelector(".hideme").style.height="30";
}else{
alert("action");
}
});
});
You can't click on disabled tags.
You can use a class "disabled":
<style>
.hideme {
background: blue;
height: 0px;
opacity: 0;
color: #fff;
}
.disabled{
color: #000;
opacity: .65;
}
</style>
Use the same class to show onclick
<div class="first">
<div class="hideme ">Message 1</div>
<input type="text" name="name" autocomplete="off" required/>
<input type="submit" data-submit="1" id="post1" class="disabled" ></input>
</div>
<div class="second">
<div class="hideme ">Message 2</div>
<input type="text" name="name" autocomplete="off" required/>
<input type="submit" data-submit="2" id="post2" class="disabled"></input>
</div>
Use siblings to get the class ".hideme". Now every disabled button will show the message:
<script>
$(document).ready(function() {
$(".msg").hide();
$(".disabled").click(function(){
var id = "#"+ this.id;
$(id).siblings(".hideme")
.show()
.animate({
height: "30px",
opacity: 1
}, 250)
.delay(2000)
.animate({
height: "0px",
opacity: 0
}, 250);
});
});
</script>
Related
So i'm trying to remove the label and its value from my input html tag whenever the person enters a value, and the code that I have right now does the job but it only removes the value when I click on the input box. Once I enter a value the label is stuck there along with the value of the input. Can someone help me make it so the label is removed completely not just when it's clicked on. And is this something I can do with css? if I can't then how would I do it with javascript?
.text-input-wrapper {
position: relative;
}
.text-input-wrapper label {
position: absolute;
left: 0;
}
.text-input-wrapper label::before {
transition: 0s;
}
.text-input-wrapper label.icon1::before {
content: 'Email';
}
.text-input-wrapper label.icon2::before {
content: 'Password';
}
.text-input-wrapper input {
padding: 0 2rem 0;
}
.text-input-wrapper input:focus+label::before,
.text-input-wrapper input:active+label::before {
display: none;
}
<form class="clearfix credentials-form login-form" method="POST">
<div class="credentials-form__fields">
<div class="text-input standard login-text-input login-email">
<div class="text-input-error-wrapper">
</div>
<div class="text-input-wrapper">
<input type="email" id="login_email2812380460348143" class="text-input-input" name="login_email" value="" autocomplete="off" aria-invalid="false" inputmode="text">
<label for="login_email2812380460348143" class="icon1"></label>
</div>
</div>
<div>
<div class="tooltip-container">
</div>
<div class="text-input standard login-text-input login-password">
<div class="text-input-error-wrapper">
</div>
<div class="text-input-wrapper">
<input type="password" id="login_password5101720956289264" class="text-input-input password-input" name="login_password" value="" autocomplete="off" aria-invalid="false" inputmode="text">
<label for="login_password5101720956289264" class="icon2"></label>
</div>
</div>
</div>
</div>
<button class="login-button signin-button button-primary" type="submit">
<div class="signin-text">Sign in
</div></button>
</form>
Try this way...
const inputs = document.querySelectorAll('.text-input-wrapper input');
const labels = document.querySelectorAll('.text-input-wrapper label');
inputs.forEach((input, i) => {
input.addEventListener('input', () => {
labels[i].style.opacity = 0;
});
});
Use an onInput event instead of an onChange one.
I'm having a problem with an error: jQuery input val() is undefiend.
I have 3 inputs which are referring to one item.
On add Row i can add an new Item ( 3 rows ).
All those rows have to be prepared in array to be sent to a PHP file.
I believe that my id="item[0]['name']" is wrong.
$(document).ready(function() {
var counter = 1;
$("#addRow").click(function() {
$("#ItemContainer").append(`
<div class="item">
<div><input type="text" id="item[${counter}]['name']" placeholder="Name" ></div>
<div><input type="text" id="item[${counter}]['amount']" placeholder="Amount" ></div>
<div><input type="text" id="item[${counter}]['count']" placeholder="Count" ></div>
<div></div>
</div>
`);
counter = counter + 1;
});
$("#setKasse").click(function() {
for (let i = 0; i <= (counter - 1); i++) {
console.log($(`#item[${i}]`));
console.log($(`#item[${i}]["name"]`).val());
};
});
});
*{
padding: 0;
margin: 0;
}
body{
background-color: #E6E6FA;
color : #191970;
padding-left : 5%;
padding-top : 70px
}
#Container, #ItemContainer, .item {
width: 20%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap : 18px;
}
#ItemContainer, .item{
width: 100%;
row-gap : 2px;
}
input{
height: 30px;
width: 100%;
border: none;
box-sizing: border-box;
padding-left: 4px;
font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Container">
<div><button id="addRow"> Add Row </button></div>
<div id="ItemContainer">
<div class="item">
<div><input type="text" id="item[0]['name']" placeholder="Name" ></div>
<div><input type="text" id="item[0]['amount']" placeholder="Amount" ></div>
<div><input type="text" id="item[0]['count']" placeholder="Count" ></div>
<div></div>
</div>
</div>
<div><button id="setKasse"> Set Kasse </button></div>
</div>
So, I want a way to be able to cycle and loop into objects|Arrays
My main goal is to send the data via Ajax Post request, and for that I want to refactor the Array in another Format.
In selectors, [ is used to indicate an attribute selector. If you want to use it as a literal character in the ID, you need to escape it with backslash. You also need to escape the ' characters.
You also need to include the ['name'] part of the ID (or ['amount'] or ['count'] if you want to get those inputs).
$(document).ready(function() {
var counter = 1;
$("#addRow").click(function() {
$("#ItemContainer").append(`
<div class="item">
<div><input type="text" id="item[${counter}]['name']" placeholder="Name" ></div>
<div><input type="text" id="item[${counter}]['amount']" placeholder="Amount" ></div>
<div><input type="text" id="item[${counter}]['count']" placeholder="Count" ></div>
<div></div>
</div>
`);
counter = counter + 1;
}); // end of $("#addRow").click
$("#setKasse").click(function() {
for (let i = 0; i <= (counter - 1); i++) {
console.log($(`#item\\[${i}\\]\\[\\'name\\'\\]`).val());
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Container">
<div><button id="addRow"> Add Row </button></div>
<div id="ItemContainer">
<div class="item">
<div><input type="text" id="item[0]['name']" placeholder="Name"></div>
<div><input type="text" id="item[0]['amount']" placeholder="Amount"></div>
<div><input type="text" id="item[0]['count']" placeholder="Count"></div>
<div></div>
</div>
</div>
<div><button id="setKasse"> Set Kasse </button></div>
</div>
In my opinion, it's best to avoid using characters that have special meaning in CSS selectors in your IDs, it complicates the code unnecessarily. You could use id="item-${counter}-name". Or don't use IDs for dynamically created elements at all. Use a class like class="name", and then use dynamic indexing. $(".item").eq(i).find("input.name").
$(document).ready(function() {
var counter = 1;
$("#addRow").click(function() {
$("#ItemContainer").append(`
<div class="item">
<div><input type="text" class="name" placeholder="Name" ></div>
<div><input type="text" class="amount" placeholder="Amount" ></div>
<div><input type="text" class="count" placeholder="Count" ></div>
<div></div>
</div>
`);
counter = counter + 1;
}); // end of $("#addRow").click
$("#setKasse").click(function() {
for (let i = 0; i < counter; i++) {
console.log($(".item").eq(i).find(".name").val());
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Container">
<div><button id="addRow"> Add Row </button></div>
<div id="ItemContainer">
<div class="item">
<div><input type="text" class="name" placeholder="Name"></div>
<div><input type="text" class="amount" placeholder="Amount"></div>
<div><input type="text" class="count" placeholder="Count"></div>
<div></div>
</div>
</div>
<div><button id="setKasse"> Set Kasse </button></div>
</div>
I'm trying to add an input field when clicking on add, and it should be removed when clicking on delete click.
Here is JS Bin link:
JS issue with deletion
var newTextBoxDiv;
var rowCount = 0;
var counter = 1;
var delCounter = 1;
$(document).ready(function() {
$(document).on('focus', '.txtFocus', function() {
$(this).next('.clearContent').hide()
});
$(document).on('focusout', '.txtFocus', function() {
$('.clearContent').show()
})
});
function addTags(obj) {
var newTextBoxDiv = '<div class="col-md-4 TextBoxMainDiv"><div style=""><div class="input-group" id="" style="width: 40%;margin: 0;padding: 0;padding: 2px;float:left;width:80%;"><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" class="txtFocus" required placeholder="Add Tag" autocomplete="false" style="width: 100%" ><span class="clearContent"><i class="fas fa-times"></i></span> </div><div style="width: 15%;display: inline-block;text-align:right;"><span id="addMore" onClick="addTags(this);"><i class="fas fa-plus-square"></i></span></div></div></div>';
$(obj).hide();
$("#tagElement").append(newTextBoxDiv);
$('.txtFocus').focus();
counter++;
if (counter == 1) {
$(obj).show()
}
}
function deleteTag(obj) {
$(obj).closest('.TextBoxMainDiv').last().find('#addMore').show();
$(obj).closest('.TextBoxMainDiv').last().find('#addMore').css('display', 'block');
$(obj).closest('.TextBoxMainDiv').remove();
counter--;
if (counter == 1) {
$('#addMore').show()
}
}
<div class="row">
<div id="tagElement">
<div> </div>
<div class="col-md-4 TextBoxMainDiv">
<div style="">
<div class="input-group" id="" style="width: 40%;margin: 0;padding: 0;padding: 2px;float:left;width:80%;">
<input type="text" class="txtFocus" required placeholder="Add Tag" id="textBox" autocomplete="false" autofocus="autofocus" style="width: 100%">
<span class="clearContent">
Add
</span>
</div>
<div style="width: 15%;display: inline-block;text-align:right;">
<span id="addMore" onClick="addTags(this);">
cancel
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
I manage to add the input fields properly, but have issues deleting them. They seem to be deleted randomly.
I think the add and delete button are mixed up, but I couldn't spend time on analysing the code because it's too much code for something that does very little. The following demo:
has a single button that adds a row of form controls:
a checkbox
a text input
a button that deletes it's own row as well as itself.
Demo
var index = 0;
var template = `
<figure class='frame'><input class='status' type='checkbox'><label class='tag'></label><input class='text' type='text' placeholder='Enter New Task'><button class='del' type='button'>➖</button></figure>`;
$('.set').on('click', 'button', function(e) {
if ($(this).hasClass('add')) {
index++;
$('.set').prepend(template);
$('.status:eq(0)').attr('id', 'chx' + index);
$('.tag:eq(0)').attr('for', 'chx' + index);
} else {
$(this).prevUntil('.del, .add').add(this).remove();
}
});
.set {
position: relative;
padding: 2px 0 1px 2px;
min-height: 28px;
border-radius:7px;
}
.frame {
padding: 0;
margin: 0;
min-width:90vw;
}
.add {
position: absolute;
right: 6px;
top: 3px;
display:block;
}
.status {
display: none
}
.tag {
display: inline-table;
font-size: 28px;
line-height: 1;
vertical-align: middle
}
.tag::before {
content: '\2610';
}
.status:checked+.tag::before {
content: '\2611'
}
.text {
display:inline-table;
width: 75%;
margin: 2px 5px 0
}
<form id='ui'>
<fieldset class='set'>
<figure class='frame'>
<input id='chx0' class='status' type='checkbox'>
<label for='chx0' class='tag'></label>
<input class='text' type='text' placeholder='Enter New Task' style='margin:2.5px 2px 0 0' autofocus>
<button class='del' type='button'>➖</button>
</figure>
<button class='add' type='button'>➕</button>
</fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I think your code's logic is working, however, the icon for addition and deletion of inputs is not being rendered.
You can replace your newTextBoxDiv with this:
var newTextBoxDiv = `
<div class="col-md-4 TextBoxMainDiv">
<div style="">
<div class="input-group" id="" style="width: 40%;margin: 0;padding: 0;padding: 2px; float:left; width:80%;">
<input type="text" name="textbox${counter}" id="textbox${counter}" value="" class="txtFocus" required placeholder="Add Tag" autocomplete="false" style="width: 100%" >
<span class="clearContent">
Delete<i class="fas fa-times"></i>
</span>
</div>
<div style="width: 15%;display: inline-block;text-align:right;">
<span id="addMore" onClick="addTags(this);">
Add
</span>
</div>
</div>`;
Notice that I added the word "Add" and "Delete" between the tags, so that you have something to click on
Also, I think you need to swap the word "Add" and "Cancel" in the initial HTML to convey a clearer message, as they are now doing the opposite thing.
Another fix that's needed is to replace the id="addMore" with class="addMore"
<span class="addMore" onClick="addTags(this);">
Since id is meant to be unique. In your code, however, when you append new element, you added new elements with duplicate id, making jquery's selector not selecting the element you want.
After replacing id with class, you also need to change the deleteTag function to select the last "addMore" span and show it.
function deleteTag(obj) {
$(obj).closest('.TextBoxMainDiv').last().find('.addMore').show();
$(obj).closest('.TextBoxMainDiv').last().find('.addMore').css('display', 'block');
$(obj).closest('.TextBoxMainDiv').remove();
counter--;
$('.addMore').last().show();
}
For the layout, you need to do it with css, removing float and setting the div tag with appropriate width and display: inline-block. I suggest you use a separate css file to style the elements instead of doing it inline.
function deleteTodo() {
$(this).parent().remove();
}
function addTodo() {
var inputTemplate =
'<div class="todo-input-wrapper">' +
'<input class="todo-input" type="text" placeholder="Add Tag" />' +
'<button class="delete-button">Delete</button>' +
'</div>';
$('.todo-wrapper').append(inputTemplate);
$('.delete-button').last().on('click', deleteTodo);
$('.todo-input').last().focus();
}
$(document).ready(function () {
$('.delete-button').on('click', deleteTodo);
$('.add-button').on('click', addTodo);
});
.todo-wrapper {
display: inline-block;
width: max-content;
font-size: 0;
}
.todo-input-wrapper {
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="todo-wrapper">
<div class="todo-input-wrapper">
<input class="todo-input" type="text" placeholder="Add Tag" />
<button class="delete-button">Delete</button>
</div>
</div>
<button class="add-button">Add</button>
I have a popup form and I have to validate fields in this form before I close this popup, I need to use this validation with a normal button, not a submit, if the fields are emty I need to mark these on a red box and put the 'This field is empty' after. After I close the form I need to clean up data from form. How should I do this using jQuery and Javascript?
<form id="frmUsers" data-userid="">
<img id="btnClose" src="resources/img/close_window.png">
<h2 id="popupTitle"></h2>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required"/>
<p></p>
</li>
<li>
<label for="level">Level:</label>
<input type="number" id="level" name="txtLevel" placeholder="Please select level"/>
<p></p>
</li>
<li>
<label for="registrationStatus">RegistrationStatus:</label>
<select name="txtRegistrationStatus" id="registrationStatus"
placeholder="Please select registration status">
<option value="Registered">Registered</option>
<option value="Unregistered">Unregistered</option>
</select>
<p></p>
</li>
<li>
<label for="registrationDate">RegistrationDate:</label>
<input type="text" id="registrationDate" name="txtRegistrationDate"
placeholder="Please select date"/>
<p></p>
</li>
<div class="btnZone">
<input class="btnDown" type="button" value=" " id="btnPopup" />
<input class="btnDown" type="button" value="Cancel" id="btnCancel"/>
</div>
</ul>
</form>
And my form validation function:
function validateForm() {
var txtUsername = $("#username").val();
if(txtUsername == ""){
("#username").css("border-color", "red");
}
// $(":input").each(function () {
// if ($(this).val() == "") {
// $(this).css("border-color", "red");
// // $("p").html("This field is empty");
// // $("input").val("This field is required");
// // alert($(this).attr("id") & " validate error");
// }else{
// $(this).css("border-color", "black");
// }
//
// });
}
You can use one of many popup/modal plugins, but if you want to create your own, than you should do something similar to this:
var txtUsername = $("#username");
function validateForm() {
txtUsernameValid = $.trim(txtUsername.val());
txtUsername.toggleClass('invalid-input', !txtUsernameValid);
return txtUsernameValid;
};
$('[data-popup]').each(function(i) {
var thisButton = $(this);
var toPopup = $(thisButton.data('popup'));
toPopup.wrap('<div class="popup-container"><div class="popup-content"></div></div>');
var popupContainer = toPopup.closest('.popup-container').hide();
popupContainer.find('.popup-content').append('<span class="popup-close">X</span>')
thisButton.on('click', function(e) {
e.preventDefault();
popupContainer.show();
});
popupContainer.find('.popup-close').on('click', function(e) {
popupContainer.hide();
});
popupContainer.find('#btnSave').on('click', function(e) {
/* Save your data, than reset the form */
if( validateForm() ) {
popupContainer.find('form')[0].reset();
popupContainer.hide();
};
});
popupContainer.find('#btnCancel').on('click', function(e) {
popupContainer.find('form')[0].reset();
popupContainer.hide();
});
});
body {
font-family: sans-serif;
}
.popup-container {
background: none rgba(0, 0, 0, .5);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
}
.popup-container::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.popup-content {
position: relative;
display: inline-block;
vertical-align: middle;
background: none #fff;
padding: 10px 20px;
text-align: left;
}
form ul {
list-style: none;
padding: 0;
}
.popup-close {
display: inline-block;
padding: 4px;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
.invalid-input {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-popup="#frmUsers">
Open form
</button>
<form id="frmUsers" data-userid="">
<img id="btnClose" src="resources/img/close_window.png">
<h2 id="popupTitle"></h2>
<ul>
<li>
<label for="username">Username:</label>
<input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required" />
<p></p>
</li>
<li>
<label for="level">Level:</label>
<input type="number" id="level" name="txtLevel" placeholder="Please select level" />
<p></p>
</li>
<li>
<label for="registrationStatus">RegistrationStatus:</label>
<select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status">
<option value="Registered">Registered</option>
<option value="Unregistered">Unregistered</option>
</select>
<p></p>
</li>
<li>
<label for="registrationDate">RegistrationDate:</label>
<input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" />
<p></p>
</li>
<div class="btnZone">
<input class="btnDown" type="button" value="Save" id="btnSave" />
<input class="btnDown" type="button" value="Cancel" id="btnCancel" />
</div>
</ul>
</form>
It is not complicated indeed, but I never try to invent hot water, I just take one of existing plugins, as Magnific Popup.
Same code on JSFiddle.
I used an animation which expands/collapses a form on an event. Works fine in FF, Chrome and Safari but IE10+ behaves unexpectedly and disturbs the alignment.
HTML:
<div id="w_oCExpandFormWrapper" style="position:absolute !important;">
<div class="w_oInput2" id="w_oCFirstField">
<input type="hidden" id="w_oCRecomendTxt1" />
</div>
<input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND"/>
<textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/>
<div class="w_oInput2" id="w_oCThirdField">
<input type="hidden" id="w_oCRecomendTxt3" />
</div>
<input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..."/><br/>
<input id="w_oCRecommendButton" type="button" style="margin-left: 239px;" value="RECOMMEND"/>
</div>
JavaScript:
to expand/collapse
//Expand
$('#w_oHExpandFormWrapper').css({"height":"auto","overflow":"auto"})
//Collapse
$('#w_oHExpandFormWrapper').css({"height":"20px","overflow":"hidden"})
and for animation is.
$('#w_oHExpandFormWrapper').animate({"height":"20px","overflow":"hidden"},"fast");
Please help!
This animation code is based on Animate element to auto height with jQuery. Press the Trigger button to cycle through the jQuery function calls that mutate the styles in the snippet.
Your form wrapper id is different in the html and js in the question. The auto height you had wasn't working in Chrome either, but after 5 years who knows if this is still an issue, but you just edited the question to add a character...
let count = 0;
$('#trigger').on('click', function() {
if (count == 0) {
//Expand
console.log('expand');
$('#w_oHExpandFormWrapper').css({
"height": "auto",
});
} else if (count == 1) {
//Collapse
console.log('collapse');
$('#w_oHExpandFormWrapper').css({
"height": "20px",
});
} else if (count == 2) {
//Expand Animation
console.log('expand animation');
$('#w_oHExpandFormWrapper').animate({
"height": $( '#w_oHExpandFormWrapper' )[0].scrollHeight,
}, "fast");
} else if (count == 3) {
//Collapse Animation
console.log('collapse animation');
$('#w_oHExpandFormWrapper').animate({
"height": "20px",
}, "fast");
}
count = (count + 1) % 4;
});
#w_oHExpandFormWrapper {
background: red;
top: 40px;
min-width: 200px;
overflow: hidden;
height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="trigger">Trigger</button>
<div id="w_oHExpandFormWrapper" style="position:absolute!important;">
<div class="w_oInput2" id="w_oCFirstField">
<input type="hidden" id="w_oCRecomendTxt1" />
</div>
<input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND" />
<textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/>
<div class="w_oInput2" id="w_oCThirdField">
<input type="hidden" id="w_oCRecomendTxt3" />
</div>
<input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..." /><br/>
<input id="w_oCRecommendButton" type="button" style="margin-left: 239px;" value="RECOMMEND" />
</div>