I am trying to intercept changes to a WooCommerce Extra product options datetimepicker component. Essentially, it's just a datetimepicker.
I have:
<script>
var box = document.getElementById("myDateTimePicker");
//console.log("#devlog: Active");
box.addEventListener("blur", function(){
var selectedDate = box.value;
console.log(selectedDate);
});
</script>
Which is almost working. It outputs the previous value contained by the datetimepicker, not the value it has just been changed to.
I've tried a range of events in the eventListener but nothing seems to do the trick. Could some kind soul put me out my misery and clue me in to how to get the NEW value from the datetimepicker when it is changed? Thanks.
Update:
Here is the html from the form. The component I'm fighting with is the date-picker inside the last <tr>.
<form class="cart" action="http://blahblahblah:8888/product/191/" method="post" enctype='multipart/form-data'>
<input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="name_of_skater,tel_number,which_day" />
<table class="thwepo-extra-options thwepo_simple" cellspacing="0">
<tbody>
<tr>
<td colspan="2" class="section-title">
<h3 class="">Mandatory information</h3></td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Name of skater</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" id="name_of_skater" name="name_of_skater" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Telephone number</label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="tel" id="tel_number" name="tel_number" value="" class="thwepof-input-field validate-required">
</td>
</tr>
<tr class="">
<td class="label leftside">
<label class="label-tag ">Pick a day <b>only</b></label> <abbr class="required" title="Required">*</abbr></td>
<td class="value leftside">
<input type="text" autocomplete="off" id="which_day" name="which_day" value="" class="thwepof-input-field thwepof-date-picker validate-required" data-readonly="no">
</td>
</tr>
</tbody>
</table>
<div class="quantity hidden">
<input type="hidden" id="quantity_5e583e6ca4c48" class="qty" name="quantity" value="1" />
</div>
<button type="submit" name="add-to-cart" value="191" class="single_add_to_cart_button button alt">Add to basket</button>
</form>
You can try this:
document.getElementById('myDateTimePicker').onChange = function() {
console.log(document.getElementById('myDateTimePicker').value);
}
You might be able to use this.value, but I wrote it the long way just in case.
Hope this helps.
Related
I have a table which should have an option to add a row and delete a row. I used jquery to insert HTML and it worked perfectly, but I was told this method may have drawbacks and I should rather consider cloning. After doing some more research, I tried implementing it in my website. It doesn't seem to be working.
My html code:
<div class="row">
<div class="col-md-12">
<br/>
<!--A card inside the second tab, and the table is inside the card-->
<div class="card">
<div class="header">
<h4 class="title">1.1 Teaching</h4>
<p class="category">Please Add the Courses taught in the academic year</p>
</div>
<div class="content">
<div class="content table-responsive table-full-width" id="t_table">
<table class="table table-hover table-striped" id="t_tab_logic">
<thead>
<th>#</th>
<th>Course</th>
<th>Section</th>
<th>Session</th>
<th>Term</th>
<th>Day/Evening</th>
<th>%age Taught</th>
<th>Load/Overload</th>
<th>Enrolment</th>
<th>Number of T.As/IAs</th>
</thead>
<tbody>
<tr class="tr_clone">
<td>
1
</td>
<td>
<input type="text" name='t_name0' placeholder='Name' class="form-control"/>
</td>
<td>
<input type="text" name='t_section0' placeholder='Section' class="form-control"/>
</td>
<td>
<input type="text" name='t_session0' placeholder='Session' class="form-control"/>
</td>
<td>
<input type="number" name='t_term0' placeholder='Term' class="form-control"/>
</td>
<td>
<input type="text" name='t_day0' placeholder='D/E' class="form-control"/>
</td>
<td>
<input type="number" name='t_%age0' placeholder='%age' class="form-control"/>
</td>
<td>
<input type="text" name='t_load0' placeholder='Load/Over' class="form-control"/>
</td>
<td>
<input type="number" name='t_enrolment0' placeholder='#' class="form-control"/>
</td>
<td>
<input type="number" name='t_number0' placeholder='#' class="form-control"/>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-sm-2">
<a id="t_add_row" class="btn btn-primary btn-fill pull-left">Add Row</a>
</div>
<div class="col-sm-2 col-sm-offset-8">
<a id="t_delete_row" class="btn btn-submit btn-fill pull-right">Delete Row</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And my java script code looks like:
$(document).ready(function () {
$("#t_add_row").live('click', function(){
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(":text").val('');
$tr.after($clone);
});
});
I would also like to implement the delete row link, which I felt would be implemented after I implement the add row link.
Any help would be greatly appreciated, thank you for being patient, I am sort of a beginner at jQuery.
try this code
$("body").on('click','#t_add_row', function(){
var tr = $('#t_tab_logic .tr_clone:last');
var clone = tr.clone();
clone.find("input").val('');
tr.after(clone);
});
I would like to think that if you do something in the first id = "benodigheden" that there is something specific then a second rule is for id = "benodigheden" I also couldn't find anything on the internet. I think you need to have java but here is my knowledge still too small for.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
If I understand correctly you want an extra line (rule?) to appear once you enter text in it, and that this should happen for those inputs that have a sequence number in their id.
For this I suggest you include jQuery and add a script that detects input changes, and adds a new input if needed, with the next available sequence number:
$(document).on('keyup change input', 'input, textarea', function() {
if (!$(this).val().replace(/\s/g, '').length) {
// no text entered, so don't add line
return;
}
var id = $(this).attr('id');
// Extract name and linenumber from id
var res = id.split(/(\d+$)/);
if (res.length < 2) {
// No line number, so don't add line
return;
}
var newId = res[0] + (parseInt(res[1]) + 1);
if ($('#' + newId).length) {
// Not the last line, so don't add line
return;
}
// Add a line, and make it non-mandatory
$(this).clone()
.attr('id', newId).removeAttr('required')
.val('')
.insertAfter(this)
.before($('<br>'));
});
Although the above can be done in pure javascript it is much more cumbersome, and harder to deal with cross-browser issues.
You can see it work in this fiddle.
I need a message to pop up to tell the user that their enquiry has been submitted. The validation works, however I had to remove my old popup message as it was conflicting with the validation code. I need to know where to put the pop up message code in that exisiting javascript code that I am using to validate. The code i was using to make a pop up message was:
<script>
function EnquireButton() {
alert("Thank you for your enquiry!");
}
</script>
I'm sure it's simple enough, I have tried to implement it into the validation code, however it just reloads the page without showing the pop up.
HTML:
<form name="Contact_Us_Form" method="post" action="">
<table width="450px">
<p>One time Message</p>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="landline">Landline Number *</label>
</td>
<td valign="top">
<input type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="Email">Email Adress *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" placeholder="you#yourdomain.com" title="Your email" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="house_number">House Number *</label>
</td>
<td valign="top">
<input type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
</td>
</tr>
<tr>
<td>
<label for="postal_code">Post Code *</label>
</td>
<td>
<input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="">Enquiry</label>
</td>
<td valign="top">
<textarea name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button onclick="Enquirebutton()">Enquire</button>
<script>
$(document).ready(function (){
validate();
$('#full_name, #landline, #Email').change(validate);
});
function validate(){
if ($('#full_name').val().length > 0 &&
$('#landline').val().length > 0 &&
$('#Email').val().length > 0) {
$("input[type=Enquirebutton()]").prop("disabled", false);
}
else {
$("input[type=Enquirebutton()]").prop("disabled", true);
}
}
</script>
</td>
</tr>
</table>
</form>
Just add one property to form tag onsubmit="EnquireButton()"
that is
<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">
First, make your button a submit one:
<button type="submit">Enquire</button>
Then you can either use the onclick="Enquirebutton()" in your submit button or the onsubmit="Enquirebutton()" in your form.
Take a look at onsubmit Event for more information.
I want my site to display differently based on the size of the web browser. Based on the questions/answers from other users, I got this to work with JavaScript onload. But I can't get it to work dynamically -- that is to say, in real-time, as users are adjusting the window. They have to refresh to get the format of the webpage to change.
Here is my current code:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
Note: I know I shouldn't be used tables, I should be using divs. But that's another issue... I started building this website before I knew that. I also know it's pretty sloppy. So just bear with me. I'm trying to just go with it until I have time to fix it up.
You shouldn't use JavaScript to make responsive web design. Use CSS instead, with media querys. So you write your HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
Use the following CSS:
#media all and (max-width: 899px) {
#big_device_index {
display: none;
}
#media all and (min-width: 900px) {
#small_device_index {
display: none;
}
You can find out more about media queries here
}
Add this outside of if (window.innerWidth > 900){.....
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
hope this will help you, make sure to include fisrt jquery.min.js
I have tried several solution found on stackoverflow and cannot make it work. Here is my html code:
<div class "rowdiv">
<tr>
<td width="5%">
<div class='text-center'> <i class="icon-trash"></i>
</div>
</td>
<td width="45%">
<input class="form-control input-sm" id="description_<%=k%>" placeholder="Description" value="<%= #hash[k][0] %>">
</td>
<td width="10%">
<select class="form-control input-sm" data-rule-required="true" id="unit_<%=k%>" name="validation_select">
<option></option>
<option>ml</option>
<option>m2</option>
<option>u</option>
</select>
</td>
<td width="5%">
<div class='text-center'>
<input class="form-control input-sm" id="qte_<%=k%>" placeholder="Qte" value="<%= #hash[k][1] %>" onchange="priceUpdate(<%=k%>)">
</div>
</td>
<td width="20%">
<div class='text-right'>
<div class="input-group">
<input class="form-control input-sm text-right" placeholder="PUHT" value="<%= #hash[k][2] %>" id="puht_<%=k%>" onchange="priceUpdate(<%=k%>)"> <span class="input-group-addon">
E
</span>
</div>
</div>
</td>
<td width="15%">
<div class='text-right' id="montant_<%=k%>">
<%=# hash[k][2]*#hash[k][1] %>e</div>
</td>
</tr>
</div>
And I try to delete the whole tr group when clicking on the tag at the beginning with the function deleteLine(this). Here is the JS script:
function deleteLine(item){
item
i2=item.closest('tr');
i2.remove();
}
So item works well and is my tag component but for i2 it gives me an Uncaught TypeError : undefined is not a function.
I have tried unsuccessfully (same error as above) the following different code for i2:
i2=item.closest('.rowdiv').find('tr');
i2=item.siblings('tr');
i2=item.next('tr');
Thanks for your help!!
item is a dom element not a jQuery object
You need to wrap it in $() to use jQuery methods
function deleteLine(item){
$(item).closest('tr').remove();
}