Selector is not working in jquery - javascript

Hi I've HTML code which is
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">
Now I want to search a value in my notes fields which is Towing amount paid Order ID 000000001 and I want to empty these fields and my javascript/jquery code is
$(document).ready(function() {
if($("input[name^=notes]").val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
But this code is giving me not found message what is wrong in my code I've tried different selectors but didn't work for me.

You can use jQuery :contains pseudo it will find the first element that contains the required text
Ref: https://api.jquery.com/contains-selector/
Code:
if($("input[name^='notes']:contains('Towing amount paid Order ID ')")) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
Demo: http://jsfiddle.net/La1bq789/

This code searches only in the input which has value - This is test notes.
To look in all fields use $.each:
$(document).ready(function () {
$("input[name^='notes']").each(function () {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
} else {
$("#testing").text('not found');
}
});
});
JSFiddle - http://jsfiddle.net/FakeHeal/362o548n/
Edit for clearing the fields: http://jsfiddle.net/FakeHeal/362o548n/1/

The main problem is that you checking only one element value and you need to check all elements.
I did make some changes with your code, now it's working:
$("input[name^=notes]").each(function(){
if($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
} else {
$("#testing").text('not found');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

$(document).ready(function() {
$("input").each(function() {
if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
$("#testing").text('found it');
/*var current = $("input[name^=notes]");
var onePrevious = $(current).prev();
var twoPrevious = $(current).prev().prev();
current.attr('value', '');
onePrevious.attr('value', '');
twoPrevious.attr('value', '');*/
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">
<hr />
<hr />
<hr />
<hr />
<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

$("input[name^=notes]").val() will only ever return the value of the first element in the page than matches that selector.
In order to check all of them you need to look at each instance
I would suggest you modularize the repeating groups by wrapping each group in a container to help locate other related elements within each group
<div class="input-group">
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">
</div>
Then loop over the inputs you want to focus on
var hasNotes = $("input[name^=notes]").filter(function(){
return this.value.indexOf("Towing amount paid Order ID ") > -1
}).length;
var message = hasNotes ? 'found it' :'not found'
$('#testing.text(message);
If you need to make adjustments to other values, use an each lopp and traverse within the container

Related

onclick radio button change form fields

I have two radio button like:
Field_One
Field_Two
When I check Field_One it will show First_Name, Last_Name field but when I check Field_Two it will show reference_id field.
But one thing if this reference_id comes from url
like myurl.com?reference_id=12345 then the radio field will auto selected and only reference field will show on form list.
My problem is when reference_id found on url Field_Two not showing it always showing Field_One on load found
Here is my snippet:
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
}
if ($(this).attr("value") == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
}
});
$('input[type="radio"]').trigger('click'); // trigger the event
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked/> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<div class="Field_One">
<input type="text" name="first_name" placeholder="First Name" />
<br><br>
<input type="text" name="last_name" placeholder="Last Name"/>
</div>
<br>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" placeholder="reference_no" />
</div>
try this:
$(document).ready(function () {
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
}
if ($(this).attr("value") == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
}
});
//$('input[type="radio"]').trigger('click'); // trigger the event
let url = new URL(window.location.href);
let reference_id = url.searchParams.get("reference_id");
if (reference_id == null) {
$(".Field_One").show();
$(".Field_Two").hide();
}else{
$(".Field_Two").show();
$(".Field_One").hide();
$(".Field_Two").find('input[name="reference_no"]').val(reference_id);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<div class="Field_One">
<input type="text" name="first_name" placeholder="First Name" />
<br><br>
<input type="text" name="last_name" placeholder="Last Name" />
</div>
<br>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" placeholder="reference_no" />
</div>

How to shift values from one div panel to other in jquery?

In a Form, there are multiple div Panels
<form>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
</form>
Requirement:
If user left panel1 blank and entered text to panel 2;
then we want to shift all values from panel 2 to panel 1; during final submission of form.
In real use case we have 10 such panels.
Fiddle: https://jsfiddle.net/rop5f0d6/
Try this.
var inputsValue = [];
$("button").click(function () {
$(".panel2 input").each(function () {
inputsValue.push(this.value);
});
$(".panel1 input").each(function (i, value) {
$(this).val(inputsValue[i]);
});
inputsValue = [];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>
This will only move the data from panel 2 to panel 1 if the first panel is left blank (what I read from the requirements).
Also it wipes panel 2 data to prevent duplicate form data being posted. From your question I think this is what you are aiming for?
Here is how you can implement this functionality in jQuery:
$("button").click(function(){
var moveData = true, formvalues = [];
$(".panel1 input").each(function(e, field){
if( field.value != '' ){
moveData = false;
return false;
}
});
// only move data if first panel is blank
if( moveData ){
$(".panel2 input").each(function(){
formvalues.push( this.value );
this.value = '';
});
$(".panel1 input").each(function (i) {
this.value = formvalues[i];
});
}
});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<hr>
<button>Submit</button>
I've also written the solution in vanilla JS for your reference (possibly useful) as plain JS is more efficient in performance.
var submitBtn = document.getElementsByTagName("button")[0];
submitBtn.addEventListener("click", function(){
var moveData = true,
formvalues = [],
panel1 = document.getElementsByClassName("panel1"),
panel1Fields = panel1[0].getElementsByTagName("input"),
panel2 = document.getElementsByClassName("panel2"),
panel2Fields = panel2[0].getElementsByTagName("input");
for(var i=0; i < panel1Fields.length; i++){
if( panel1Fields[i].value != '' ){
moveData = false;
return false;
}
}
// only move data if first panel is blank
if( moveData ){
for(var i=0; i < panel2Fields.length; i++){
formvalues.push( panel2Fields[i].value );
panel2Fields[i].value = '';
}
for(var i=0; i < panel1Fields.length; i++){
panel1Fields[i].value = formvalues[i];
}
}
});
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
<button>Send</button>

Adding Placeholder attributes base on input label with PURE JS - no jQuery

I need to get the label of each element and apply it to the input as a placeholder attribute, I get about half way though but cannot seem to get just the text of the element in order to add a attribute
Please note that i am not able to use jQuery in any regard
JS:
var elements = document.querySelectorAll('p.form-field');
Array.prototype.forEach.call(elements, function(el, i){
var chel = el.querySelectorAll('.field-label');
console.log(chel.textContent);
});
HTML:
<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<label class="field-label" for="25492_61334pi_25492_61334">First Name</label>
<input type="text" name="25492_61334pi_25492_61334" id="25492_61334pi_25492_61334" value="" class="text" size="30" maxlength="32" onchange="" />
</p>
<div id="error_for_25492_61334pi_25492_61334" style="display:none"></div>
<p class="form-field last_name pd-text required ">
<label class="field-label" for="25492_61336pi_25492_61336">Last Name</label>
<input type="text" name="25492_61336pi_25492_61336" id="25492_61336pi_25492_61336" value="" class="text" size="30" maxlength="32" onchange="" />
</p>
<div id="error_for_25492_61336pi_25492_61336" style="display:none"></div>
<p class="form-field email pd-text required ">
<label class="field-label" for="25492_61338pi_25492_61338">Email</label>
<input type="text" name="25492_61338pi_25492_61338" id="25492_61338pi_25492_61338" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61338, 12545572);" />
</p>
<div id="error_for_25492_61338pi_25492_61338" style="display:none"></div>
<p class="form-field company pd-text required ">
<label class="field-label" for="25492_61340pi_25492_61340">Company</label>
<input type="text" name="25492_61340pi_25492_61340" id="25492_61340pi_25492_61340" value="" class="text" size="30" maxlength="100" onchange="" />
</p>
<div id="error_for_25492_61340pi_25492_61340" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<label for="pi_extra_field">Comments</label>
<input type="text" name="pi_extra_field" id="pi_extra_field" />
</p>
<input name="_utf8" type="hidden" value="☃" />
<p class="submit">
<input type="submit" accesskey="s" value="Send Message" />
</p>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
</form>
var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += "*");
label.nextElementSibling.setAttribute("placeholder", text);
}
While the earlier answers work, I'd suggest a simpler approach, such as:
function placeholderLabels() {
// get <input> elements that are in a <p> and follow a <label>:
var inputs = document.querySelectorAll('p label + input');
// iterate over those <input> elements:
Array.prototype.forEach.call(inputs, function(input) {
// input is the current <input> from the NodeList over which we're
// iterating, here we set its placeholder property to either:
// the textContent of the first <label> associated with the <input>
// or to an empty string, if there's no associated <label>:
input.placeholder = input.labels.length ? input.labels[0].textContent.trim() : '';
});
}
placeholderLabels();
function placeholderLabels() {
var inputs = document.querySelectorAll('p label + input');
Array.prototype.forEach.call(inputs, function(input) {
input.placeholder = input.labels.length ? input.labels[0].textContent.trim() : '';
});
}
placeholderLabels();
label {
display: inline-block;
width: 7em;
}
p.required label::after {
content: '*';
}
<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<label class="field-label" for="25492_61334pi_25492_61334">First Name</label>
<input type="text" name="25492_61334pi_25492_61334" id="25492_61334pi_25492_61334" value="" class="text" size="30" maxlength="32" onchange="" />
</p>
<div id="error_for_25492_61334pi_25492_61334" style="display:none"></div>
<p class="form-field last_name pd-text required ">
<label class="field-label" for="25492_61336pi_25492_61336">Last Name</label>
<input type="text" name="25492_61336pi_25492_61336" id="25492_61336pi_25492_61336" value="" class="text" size="30" maxlength="32" onchange="" />
</p>
<div id="error_for_25492_61336pi_25492_61336" style="display:none"></div>
<p class="form-field email pd-text required ">
<label class="field-label" for="25492_61338pi_25492_61338">Email</label>
<input type="text" name="25492_61338pi_25492_61338" id="25492_61338pi_25492_61338" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61338, 12545572);" />
</p>
<div id="error_for_25492_61338pi_25492_61338" style="display:none"></div>
<p class="form-field company pd-text required ">
<label class="field-label" for="25492_61340pi_25492_61340">Company</label>
<input type="text" name="25492_61340pi_25492_61340" id="25492_61340pi_25492_61340" value="" class="text" size="30" maxlength="100" onchange="" />
</p>
<div id="error_for_25492_61340pi_25492_61340" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<label for="pi_extra_field">Comments</label>
<input type="text" name="pi_extra_field" id="pi_extra_field" />
</p>
<input name="_utf8" type="hidden" value="☃" />
<p class="submit">
<input type="submit" accesskey="s" value="Send Message" />
</p>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="" />
</form>
It's worth reiterating at this point, however, that this is not a good user-interface; the placeholder should not replace the <label>, and if used should provide some guidance on what the <input> expects, such as the format or an expected value.
You’re close: the problem is just that you are trying to use the object returned by the second querySelectorAll as if it were an element. It returns a collection, even when there is just one matching element. If you know that only one element matches it, simply index it with a zero. The same way you can access the input element, if you know there is only one such element inside each p element. So the essential code can be as follows:
var elements = document.querySelectorAll('p.form-field');
Array.prototype.forEach.call(elements, function(el, i){
el.querySelectorAll('input')[0].placeholder =
el.querySelectorAll('.field-label')[0].textContent;
});
There are several possible approaches, depending on the assumptions you make about the source code.
Note: Duplicating label texts as placeholders is useless and disturbing. Replacing label text by placeholders is bad for accessibility and frowened upon in the HTML5 spec. But maybe the operation you are doing has some different purpose.

Copy text from text fields to textarea + labels

[SOLVED] I have a script that copies text from text fields to text area. My question is how can I upgrade this script so it would copy labels to? Or if I could somehow add extra text before field value?
This is my HTML:
<label>Input1: </label> <input type="text" name="i1" class="entry" id="field_1" value="" /> <br />
<label>Input2: </label> <input type="text" name="i2" class="entry" id="field_2" value="" /><br />
<label>Input3: </label> <input type="text" name="i3" class="entry" id="field_3" value="" /><br />
<label>Input4: </label> <input type="text" name="i4" class="entry" id="field_4" value="" /><br />
<label>Input5: </label> <input type="text" name="i5" class="entry" id="field_5" value="" /><br /><br />
<input type="button" name="b" value="copy" /><br /><br />
<textarea class="box" name="t" rows="5"> </textarea>
And this:
<script type="text/javascript">
$( document ).ready(function() {
$("input:button").click(function() {
var values = "";
$("input:text").each(function(i) {
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
});
});
</script>
EDIT: Is there any way of not showing text if some of the text fields are empty?
I added if(this.value.length > 1) and when copy is pressed it shows "undefined".
try
$( document ).ready(function() {
$("input:button").click(function() {
var values = "";
$("input:text").each(function(i) {
var text=$(this).prev("label").text();
values+=text+" " ;
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
});
});
DEMO

how do I create a simple total price?

As the header say I need to create a simple total price function.I need to times the number of people to 1000 and show that in "totalPrice". Anything javascript/html/jquery is great. I have this so far:
<html>
<body>
<form id="buyTicket" method="post">
<div>
Booking Name : <input type="text" required id="bookingName" placeholder="booking name" />
</div>
<div>
Number of persons : <input type="number" required id="numberOP" placeholder="number of persons"/>
</div>
<div>
Depature : <input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/>
</div>
<div>
Return :
<input type="text" required id="return" class="datepicker" placeholder="enter return date"/>
</div>
<div id="totalPrice">Total:</div>
<div>
<button type="submit" id="buttonTicket">Buy Ticket</button>
</div>
</form>
<script type="text/javascript">
function CalculateTotal() {
var numberOP = document.getElementById('numberOP').value;
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = total;
}
</script>
</body>
</html>
You need to call your function to display the Total price. Add an change event to to your input to call function.
<div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div>
Full code:
<html><body>
<form id="buyTicket" method="post">
<div>Booking Name :<input type="text" required id="bookingName" placeholder="booking name" /></div>
<div>Number of persons :<input type="number" required id="numberOP" onchange="CalculateTotal()" placeholder="number of persons"/></div>
<div>Depature :<input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/></div>
<div>Return :<input type="text" required id="return" class="datepicker" placeholder="enter return date"/></div>
<div id="totalPrice">Total:</div>
<input type="hidden" id="total" /> <!-- BAD IDEA -->
<div><button type="submit" id="buttonTicket">Buy Ticket</button></div>
</form>
<script type="text/javascript">
function CalculateTotal() {
var numberOP = document.getElementById('numberOP').value;
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = 'Total: ' + total;
document.getElementById('total').value = total; //<--BAD IDEA
}
</script>
</body></html>
Try parseInt to get a number instead of string.
function CalculateTotal()
{
var numberOP = parseInt("0" + document.getElementById('numberOP').value);
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = total;
}
//Call above method
CalculateTotal();
you can call this method on submit button just to check if it works
<button type="submit" id="buttonTicket" onclick="CalculateTotal();" >Buy Ticket</button>
I don't think you need to use form in your case. You just want to show total price only. Try this:
<html>
<body>
<div>
Booking Name : <input type="text" required id="bookingName" placeholder="booking name" />
</div>
<div>
Number of persons : <input type="number" required id="numberOP" placeholder="number of persons"/>
</div>
<div>
Depature : <input type="text" required id="depature" class="datepicker" placeholder="enter depature date"/>
</div>
<div>
Return :
<input type="text" required id="return" class="datepicker" placeholder="enter return date"/>
</div>
<div id="totalPrice">Total:</div>
<div>
<button type="submit" id="buttonTicket" onlick="CalculateTotal();">Buy Ticket</button>
</div>
<script type="text/javascript">
function CalculateTotal() {
var numberOP = document.getElementById('numberOP').value;
var total = numberOP * 1000;
document.getElementById('totalPrice').innerHTML = total;
}
</script>
</body>
</html>
Knockout.js is Designed for such kind of situation,
See Knockout Home

Categories