I want to keep track of certain timers. Upon clicking the button the clock ticks down to zero. However, after adding in a background frame and image my buttons have stopped working. I've implemented keyboard shortcuts that initiate the timer so my javascript functions are ok.
<body align="center">
<div id="header">
<h1>Welcome to LoL Buff Timers!</h1>
<h3>Like us on FB</h3>
</div>
This is where I insert the background "frame" which I declared in my CSS. The middle is a white image that goes over the background and the HTML button elements set to opacity. I declare this to have a z-index of -1 in my CSS.
<div id="frame">
<img id="middle" src="white.jpg">
<table align="center">
<th colspan="2">
<div id = "CustomHeader">
<img src = "shyvana.png">
<h1>Salazar44</h1>
<br>
<h3>Jungle</h3>
<h5>Shyvana</h5>
</div>
</th>
<tr>
<td>
<div id="container">
<div id = "buffs">
<label class="title">Blue Buff:</label>
<br>
<button class="buffbutton" type="button" id="yosb" onclick="startBlue();">Start Blue</button>
<label class="bluetime" id="mins">05:</label>
<label class="bluetime" id="sec">00</label>
</td>
<td>
<label class="title">Red Buff:</label>
<br>
<button class="buffbutton" type="button" id="yosr" onclick="startRed();">Start Red</button>
<label class="redtime" id="mins1">05:</label>
<label class="redtime" id="sec1">00</label>
</div>
</td>
</tr>
<tr>
<td>
<div id="globalobj">
<label class="title">Dragon:</label>
<br>
<button class="buffbutton" type="button" id="drag" onclick="startDrag();">Start Drag</button>
<label class="dragtime" id="mins2">06:</label>
<label class="dragtime" id="sec2">00</label>
</td>
<td>
<label class="title">Baron:</label>
<br>
<button class="buffbutton" type="button" id="worm" onclick="startWorm();">Start Baron</button>
<label class="wurmtime" id="mins3">07:</label>
<label class="wurmtime" id="sec3">00</label>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
change
#frame{
position: absolute;
}
http://jsfiddle.net/Cyf4Z/1/show/
Buttons are now clickable, but some error with the script/jsfiddle, try changing in your code.
Related
I am unsure why my javascript form submission validation is not working – any help would be much appreciated.
I have 2 tables with a class: table-first & table second
Using media query, when screen is less than 740px table-first is hidden and table-second is displayed
table-first has a class “voucher_input” on the input field for a voucher &
table-second has a class called “voucher-input2” on the voucher input field
I have written a javascript to prevent submission of the form if the voucher input field is empty
And if empty it should prompt up an error message
The code works well for “table-first” with the class “voucher-input” – a form is not submitted when the voucher input field is empty
But the code does not work well with “table-second” with the class “voucher-input2” – the form submits with an empty voucher input field.
Can one please advise me on what is wrong with my code as I want the input fields with the “voucher-input” & “voucher-input2” to prompt up an error message when the field is empty
My code are as below. Many thanks
my javascript code: is intended to prompt up an error message if the voucher fields with the class voucher_input & voucher_input2 are empty - it currently only prompts up an error message for voucher_input and not voucher_input2
$(document).ready(function () {
var form = $("#vouchers_form");
$("#vouchers_form").on("submit", function(e){
// e.preventDefault();
var voucher_input = $('.voucher_input').val();
var voucher_input2 = $('.voucher_input2').val();
if (voucher_input.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else if (voucher_input2.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else {
form.submit();
}
});
});
html code: table-first with the input field <input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<div class="main-table table-first">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</td>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<ul>
<li>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</li>
<li>
<p class="voucher-header">Do you have a Promo code?</p>
<div><input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
</li>
</ul>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
html code: table-second with the input field <input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<!-- reponsive design displayed when width screen is below 740px -->
<div class="main-table table-second">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content paypal">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content card">
<div class="cards-visa-master">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<p class="voucher-header ">Do you have a Promo code?</p>
<div><input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
</div>
The error may be due to a duplicate ID on the page.
If both of these tables are on the same page the error block shouldn't have the same ID (popupErrorConfirmVoucherEmpty) as there should only be one ID on the page. Try changing the name of the second one to popupErrorConfirmVoucherEmpty2 and altering the JS accordingly
I am having an issue on watir-webdriver(MacOSX 10.10.3) in Firefox with clicking a confirm button (input tag) after filling out a commerce form. My commerce form has a submit button (input tag) where a click works fine and forwards me to my confirmation page, but once I click the confirm button to process a transaction the page just refreshes and does not forward me to my next page(receipt). Upon clicking the confirm button "$("overlay_29").show(); and $("processing_29").show();" run and briefly shows me my screen that to transaction is processing then the page refreshes and nothing happens. I have tried the process manually and my pages work fine and everything works the way it is suppose to.
I have researched this issue for about a week now and read and implemented every topic that covers click issues, waiting for DOM, fire_event, execute_script, native_event on or off. I am a little stumped on this one and would appreciated any help.
I have tried all of these methods to click:
b = #browser
b.button(:src=> /btn_confirm/).click
b.button(:src=> /btn_confirm/).when_present.click
b.button(:src=> /btn_confirm/).fire_event "onclick"
b.input(:src=> /btn_confirm/).click
b.input(:src=> /btn_confirm/).when_present.click
b.input(:src=> /btn_confirm/).fire_event "onclick"
When I run these methods they all come out true:
b = #browser
puts b.button(:src=> /btn_confirm/).exists?
puts b.button(:src=> /btn_confirm/).enabled?
puts b.button(:src=> /btn_confirm/).visible?
I have tried the following watir-webdriver versions
0.6.4-0.7.0
I have tried every single release of Firefox that is not beta from v17-v38 with each watir-webdriver gem --version with no success.
This is the form html:
<!-- Generated Form CSS Start name="Confirm Payment Details" -->
<style type="text/css">
</style>
<!-- Generated Form CSS End name="Confirm Payment Details" -->
<!-- Generated Form HTML Start name="Confirm Payment Details" -->
<div id="twodialog_commerce_form_wrapper_5" class="commForm1 twodialog_form_wrapper twodialogEditableElement">
<h2 id="twodialog_commerce_form_description" class="twodialog_form_description twodialogEditableElement">Confirm Payment Details</h2>
<form class="twodialog_form twodialogEditableElement" id="commerce_5" name="commerce_5" target="_self" action="https://secure.2dialog.com/mt5/main.php/micro_sites/showpage/id/1/page_number/2" method="POST">
<input id="CommerceID" name="CommerceID" value="5" type="hidden">
<input name="widget_id" value="29" type="hidden">
<div id="twodialog_form_cart_wrapper" class="twodialog_form_cart">
<h2 class="twodialog_form_cart_description">Your Donation</h2>
<table id="twodialog_form_cart_table" class="twodialog_form_cart_table">
<thead>
<tr>
<th class="title_item" style="width: 75%;">Item</th>
<th class="title_amount">Cost</th>
</tr>
</thead>
<tbody>
<tr class="cartItem cartItemOneTime rowEven" id="cartRow2">
<td class="name">
<b>$10.00 Donation.</b><br>
<i>Donate $10.00.</i>
</td>
<td class="cost">
$10.00
<br>remove</td>
</tr>
<tr class="cartItem cartItemOneTime rowOdd" id="cartRow3">
<td class="name">
<b>$20.00 Donation.</b><br>
<i>Donate $20.00.</i>
</td>
<td class="cost">
$20.00
<br>remove</td>
</tr>
<tr><td class="cartEmpty cartEmptyOneTime" colspan="2" style="display: none" align="center">Your cart is empty</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan="1" class="alignRight total_label"><label>Total:</label></td>
<td class="total_value">$30.00</td>
</tr>
</tfoot>
</table>
</div>
<h2 id="twodialog_form_commerce_description" class="twodialog_form_description twodialogEditableElement">Credit Card Information</h2>
<div id="twodialog_form_commerce_wrapper" class="twodialog_form_commerce twodialogEditableElement">
<div id="twodialog_form_commerce_card_type_row" class="twodialog_form_item_list_row twodialogEditableElement odd">
<label id="twodialog_form_commerce_card_type_label" class="twodialog_form_label twodialogEditableElement">Card Type<span id="twodialog_form_commerce_card_type_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
Visa
</div>
<div id="twodialog_form_commerce_card_number_row" class="twodialog_form_item_list_row twodialogEditableElement even">
<label id="twodialog_form_commerce_card_number_label" class="twodialog_form_label twodialogEditableElement">Card Number<span id="twodialog_form_commerce_card_number_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
***********4290
</div>
<div id="twodialog_form_commerce_card_cvv_row" class="twodialog_form_item_list_row twodialogEditableElement odd">
<label id="twodialog_form_commerce_card_cvv_label" class="twodialog_form_label twodialogEditableElement">CVV<span id="twodialog_form_commerce_card_cvv_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
***
</div>
<div id="twodialog_form_commerce_card_expiration_row" class="twodialog_form_item_list_row twodialogEditableElement even">
<label id="twodialog_form_commerce_card_expiration_label" class="twodialog_form_label twodialogEditableElementl">Expiration<span id="twodialog_form_commerce_card_expiration_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
6/2015
</div>
<div id="twodialog_form_commerce_card_name_row" class="twodialog_form_item_list_row twodialogEditableElement odd">
<label id="twodialog_form_commerce_card_name_label" class="twodialog_form_label twodialogEditableElement">Name on Card<span id="twodialog_form_commerce_card_name_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
DonFN DonLN
</div>
<div id="twodialog_form_commerce_billing_address_row" class="twodialog_form_item_list_row twodialogEditableElement even">
<label id="twodialog_form_commerce_billing_address_label" class="twodialog_form_label twodialogEditableElement">Address<span id="twodialog_form_commerce_billing_address_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
123 Fruitful Ln
</div>
<div id="twodialog_form_commerce_billing_city_row" class="twodialog_form_item_list_row twodialogEditableElement odd">
<label id="twodialog_form_commerce_billing_city_label" class="twodialog_form_label twodialogEditableElement">City<span id="twodialog_form_commerce_billing_city_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
New York
</div>
<div id="twodialog_form_commerce_billing_state_row" class="twodialog_form_item_list_row twodialogEditableElement even">
<label id="twodialog_form_commerce_billing_state_label" class="twodialog_form_label twodialogEditableElement">State / Province<span id="twodialog_form_commerce_billing_state_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
<span id="CCDetails_State" class="twodialogEditableElement">NY</span>
</div>
<div id="twodialog_form_commerce_billing_postal_code_row" class="twodialog_form_item_list_row twodialogEditableElement odd">
<label id="twodialog_form_commerce_billing_postal_code_label" class="twodialog_form_label twodialogEditableElement">Postal Code<span id="twodialog_form_commerce_billing_postal_code_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
12345
</div>
<div id="twodialog_form_commerce_billing_country_row" class="twodialog_form_item_list_row twodialogEditableElement even">
<label id="twodialog_form_commerce_billing_country_label" class="twodialog_form_label twodialogEditableElement">Country<span id="twodialog_form_commerce_billing_country_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
<span id="CCDetails_Country" class="twodialogEditableElement">United States</span>
</div>
<div id="twodialog_form_commerce_billing_phone_row" class="twodialog_form_item_list_row twodialogEditableElement odd">
<label id="twodialog_form_commerce_billing_phone_label" class="twodialog_form_label twodialogEditableElement">Phone</label>
</div>
<div id="twodialog_form_commerce_billing_email_row" class="twodialog_form_item_list_row twodialogEditableElement even">
<label id="twodialog_form_commerce_billing_email_label" class="twodialog_form_label twodialogEditableElement">Email Address<span id="twodialog_form_commerce_billing_email_required_symbol" class="twodialog_form_required twodialogEditableElement">*</span></label>
donfnln#mail.com
</div>
</div>
<p id="twodialog_form_control_5" class="twodialog_form_control twodialogEditableElement"><input class="twodialog_form_button_confirm processorButton_29 zaptastic twodialogEditableElement twodialogEditableElement" name="commit" src="https://secure.2dialog.com/mt5/images/btn_confirm.png" alt=" " id="twodialog_confirmation_submit_button" value="" onclick=";" type="image"> <input class="twodialog_form_button_change twodialogEditableElement twodialogEditableElement" name="cancel" src="https://secure.2dialog.com/mt5/images/btn_change.png" alt="change" id="twodialog_confirmation_cancel_button" value="change" onclick=";" type="image">
</p>
<div class="processorOverlay" id="overlay_29" style="display: none;"></div>
<div class="processorMessage" id="processing_29" style="display: none">
Please wait while we process your credit card.
</div>
</form>
</div>
<!-- Generated Form HTML End name="Confirm Payment Details" -->
<!-- Generated Form JS Start name="Confirm Payment Details" -->
<script type="text/javascript">
Event.observe(document, "dom:loaded", function(){
getCurrentStateLabel("/mt5/main.php/micro_sites/", "COM", function(label){
$("CCDetails_State").update(label);
});
getCurrentCountryLabel("/mt5/main.php/micro_sites/", "COM", function(label){
$("CCDetails_Country").update(label);
});
if(true)
{
$$(".processorButton_29").each(function(element){
element.observe("click", function(event){
$("overlay_29").show();
$("processing_29").show();
});
});
}
});
</script>
<!-- Generated Form JS End name="Confirm Payment Details" -->
I have a form in Angular setup like the following.
Users can make changes and submit one at a time and it works as expected but I'd like to add a "Submit All" that would submit each item one at a time as though the user were pressing the submit button for each. Im a little stumped on the best way to do this. As of right now I cannot submit them as a batch due to API constraints. I would also like to keep jQuery out of the equation.
My first thought is to create a new object that contains the info for each item and then loop over it and submit that way. I am unsure how to set this up in my controller.
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th>Name</th>
<th></th>
<th>Age</th>
<th>Kids</th>
<th></th>
</thead>
<tbody>
<tr class="pending-item animate-repeat"
data-ng-repeat="user in Users"
data-ng-form="userForm"
role="form"
data-ng-submit="submitUser(user, userDetails)"
novalidate>
<td class="img-container">
<img data-ng-src="{{user['image']['url']}}"
alt="{{user['image']['alt'] || ' '}}"
class="img-responsive" >
</td>
<td class="col-xs-6">
<div class="user-info">
<p class="user-name">
{{user['name']}}
</p>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon">Age</span>
<input type="number" min="0"
name="age"
class="form-control age"
data-ng-init="userDetails.age = user['age']"
data-ng-model="userDetails.age"
required>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<input type="number" min="0" step="1"
name="kids"
class="form-control kids"
data-ng-disabled="user['kids'] === true"
data-ng-pattern="/^\d+$/"
data-ng-init="userDetails.kidsCount = user['kids']['quantity']"
data-ng-model="userDetails.kidsCount"
required>
<div class="input-group-addon"># of kids</div>
</div>
</td>
<td>
<div class="btn-group btn-col">
<button type="submit"
class="btn btn-success btn-sm"
data-ng-disabled="userForm.$invalid || userDetails.working"
data-ng-click="submitUser(user, userDetails)">
Submit
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<button ng-click="submitAllUsers()">Submit All Users</button>
</div>
Yes, create a object in your controller, say $scope.formData={}, and then bind it with your elements using ng-model or data-ng-model and then on button click pass this object in your controller and do the required stuff.
Below is JSP page
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="xyzRadio" value="sampleInputRadio" checked="checked"
onclick="loadXyz()"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="sampDtlsRadio" value="abcRadio"
onclick="loadabc()">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
In JS file I am hiding div based on user's selection.
Both page have some functionality which changes page's default look, Like row can be added or deleted, Now if user select other radio button and came back to page, default look should be displayed. I don't want to get into undo what user has done, util there is cleaner way to do it.
Currently I am reloading parent page.
Is there any way using ajax call I can request for xyz.jsp page again, so that I don't have to refresh parent page. Or any better solution.
First of all it's better to use onchange rather then onclick. Second, combine you radio buttons with the same name (to make it acting like radio buttons rather then as a checkboxes). Third, bind your handlers in js code rather then in html. And finally, of course you can load parts via Ajax.
$('[type="radio"]').on('change', function(){
if($('[type="radio"]:checked').val() === 'sampleInputRadio') {
$('#xyz').load('http://your.serv.er/xyz.jsp');
loadXyz();
} else {
$('#abc').load('http://your.serv.er/abc.jsp');
loadabc();
}
});
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="SampleInput" value="sampleInputRadio" checked="checked"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="SampleInput" value="abcRadio">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
P.S. Since I don't know what your original handler do, I just call its after load .jsp requests but maybe it is unnecessary.
Tried to get the text box value and display into the h3 element in above the textbox field
Here is my HTML Code :
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to get the input field value <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]"> and display the value into the "
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name">"**Here the text box value"</strong> </h3>
" on blur function and this was dynamic text box
My Jquery :
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
I added an id attribute to the h3 where you want to display it and use that as reference on the blur event callback: DEMO HERE
HTML
<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>
jQuery
$("input").blur(function () {
var string = $(this).val();
$('#output').html(string);
});
See a working demo here: http://jsfiddle.net/wPCZ5/
You need to do this in your handler:
$(this).closest('div').find('h3 > strong').html(string);
for all text boxes to work. The closest() call looks up the DOM hierarchy and returns the first matching element. In your case, it is the accordion div. The find() call then looks down the DOM hierarchy for the matching element. Finally html() replaces the current HTML within the element with the supplied string. Your original call to append() would add the string to whatever is already present.
There's a working fiddle here: http://jsfiddle.net/u63CU/ but I think you should not reuse class and ID names like you have. It can lead to many undesired results, as jquery selects by id or class name.
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong id="text-value" class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
$( "#attribute_name" ).blur(function() {
var string = $(this).val();
$('#text-value').text(string);
});
try something like this
$( "input" ).blur(function() {
$(this).closest('strong.attribute_name').text(this.value);
});
If you want to place text box value in place of **Here Text box value should be displayed**, please try this:
$( "input" ).blur(function() {
var string = $(this).val();
$(".attribute_name").text(string);
});