Goal: Enable the user to link form fields to specific locations in a content from a different div and then append the individual input fields' text to those specific locations respectively.
Here is the fiddle
HTML:
<form>
<div>
<label for="1">One:</label>
<input type="text" id="1" />
</div>
<div>
<label for="2">Two:</label>
<input type="email" id="2" />
</div>
<div>
<label for="3">Three:</label>
<input type="email" id="3" />
</div>
<div>
<label for="4">Four:</label>
<input type="email" id="4" />
</div>
<div>
<label for="5">Five:</label>
<input type="email" id="5" />
</div>
<div>
<label for="6">Six:</label>
<input type="email" id="6" />
</div>
<div>
<label for="7">Seven:</label>
<input type="email" id="7" />
</div>
</form>
<div class="text-area">
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
</div>
Js:
function replaceText() {
var thisvalue = $(this).val();
var thisattr = $(this).siblings('label').attr('for');
//alert(thisvalue);
$('.text-area p').each(function(){
$(this).text(function () {
return $(this).text().replace("["+thisattr+"]", "["+thisvalue+"]");
});
});
}
In the fiddle, click on the text "asd", that will enable you to type anything. You will see, that once you enter a value in the input tag beside "One:", it replaces the text as required. What I could think of as of now, is, to type a "tag" that is enclosed between square brackets, and then the function compares the tag with the input's label attr "for" and replaces it with the input value. There is one major flaw to this: the user has to tag again and again for the same input every time they want to change the value, which renders the form useless because why won't they just type the information directly rather than using the form.
This comes close, if not identical, to the way stackoverflow itself creates the link tags, image tags etc in the text box when we type in here to ask questions.
The functionality you want to achieve is similar to Angular JS, where realtime update happens when you are typing in a text box.
If not, you can use oninput event. You can have a span tag or a placeholder next to your "Asd" and just replace your placeholder innertext with the text of the control
Related
<input name="checkthis" type="checkbox">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckboxCheckthis">
How to get previous input checkbox with name "checkthis" using queryselector on an element?
function findPreviousInputcheckboxCheckthis(ev) {
checkboxCheckthis = ev.target.querySelector( "input[name='checkthis']);
}
Edit: There are many more input checkboxes with name="checkthis" before and after the snippet I posted. They are nested in other element also.
I simply want the nearest previous checkbox in the html-source starting from the target, nested or not.
Based on your below comment, I have updated the answer snippet where you need to add parent div structure and then you can find the checkthis name attribute quickly. Please check below working snippet:
function findPreviousInputcheckbdfoxCheckthis(ev) {
var selectElement = document.getElementById(ev);
selectElement.querySelector('input[name="checkthis"]').style.visibility = "hidden";
}
<div id="div1">
<input name="checkthis" type="checkbox" value="previous">
<span>text here</span>
<input type="text" name="checkthis">
<input type="text" name="another">
<input type="text">
<input type="checkbox" value="next">
<input type="text" id="eventTarget" oninput="findPreviousInputcheckbdfoxCheckthis(this.parentElement.id)" placeholder="Previous checkbox">
</div>
Here, I have added div1 id and you can repeat the same by using using ID and rest the JavaScript will be same and it will find your first previous "name=checkthis" checkbox.
Hope this solution will be work for you!
Also, below is the link where I have used multiple repeat structure. Please refer it also:
https://jsfiddle.net/kairavthakar2016/3d8g49nm/96/
I have a some custom validation for a small input form, that checks if a field is required. If it is a required field it alerts the user, if there is no value. At the moment it will validate all inputs other than check boxes.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="ss-item-required">
<label>Question: What is your name?</label>
<input type="text" name="name" id="name"></input>
</div>
<div class="ss-item-required">
<label>Question: What is your email?</label>
<input type="text" name="email" id="email"></input>
</div>
<div class="ss-item-required">
<label>Question: What is your address?</label>
<textarea name="address" rows="8" cols="75" id="address"></textarea>
</div>
<div class="ss-item-required">
<label>Do you agree to out terms?</label>
<input type="checkbox" name="Check_0">
</div>
Submit
</form>
<script>
function formcheck() {
var fields = $(".ss-item-required")
.find("select, textarea, input").serializeArray();
$.each(fields, function(i, field) {
if (!field.value)
alert(field.name + ' is required');
});
console.log(fields);
}
</script>
If anyone can work out how to include validation of check boxes, it would be much appreciated.
Even though some answers already provide a solution, I've decided to give mine, that will validate every required input in your form, regardless of being a checkbox (maintaining your each loop).
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="ss-item-required">
<label>Question: What is your name?</label>
<input type="text" name="name" id="name">
</div>
<div class="ss-item-required">
<label>Question: What is your email?</label>
<input type="text" name="email" id="email">
</div>
<div class="ss-item-required">
<label>Question: What is your address?</label>
<textarea name="address" rows="8" cols="75" id="address"></textarea>
</div>
<div class="ss-item-required">
<label>Do you agree to out terms?</label>
<input type="checkbox" name="Check_0">
</div>
Submit
</form>
<script>
function formcheck() {
var fields = $(".ss-item-required")
$.each(fields, function(i, field) {
field=$(field).find('input, select, textarea')[0]
if (!field.value || (field.type=='checkbox' && !field.checked))
alert(field.name + ' is required');
});
}
</script>
The problems were:
serializeArray() would try to get the value from your checkbox, and because it returned nothing, the checkbox input was never added to fields!
Checkboxes don't have a property value, instead they are checked
There is more than one way to determine this:
Check the length of the JQuery wrapped set that queries for only checked checkboxes and see if it is 1:
if($("input[name='Check_0']:checked").length === 1)
Check the checked property of the DOM element itself (which is what I'm showing below) for false. To extract the DOM element from the JQuery wrapped set, you can pass an index to the wrapped set ([0] in this case), which extracts just that one item as a DOM element and then you can use the standard DOM API.
if(!$("input[type='checkbox']")[0].checked)
NOTE: It's important to understand that all client-side validation can be easily bypassed by anyone who really wants to. As such, you
should always do a second round of validation on the server that will
be receiving the data.
FYI: You have some invalid HTML: There is no closing tag for input elements and for label elements, you must either nest the element that the label is "for" inside of the label or you must add the for attribute to the label and give it a value of the id of the element that the label is "for". I've corrected both of these things below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="ss-item-required">
<label for="userName">Question: What is your name?</label>
<input type="text" name="userName" id="userName">
</div>
<div class="ss-item-required">
<label for="email">Question: What is your email?</label>
<input type="text" name="email" id="email">
</div>
<div class="ss-item-required">
<label for="address">Question: What is your address?</label>
<textarea name="address" rows="8" cols="75" id="address"></textarea>
</div>
<div class="ss-item-required">
<label for="Check_0">Do you agree to out terms?
<input type="checkbox" name="Check_0">
</label>
</div>
Submit
</form>
<script>
function formcheck() {
var fields = $(".ss-item-required")
.find("select, textarea, input").serializeArray();
$.each(fields, function(i, field) {
if (!field.value){
alert(field.name + ' is required');
}
});
// Check to see if the input is a checkbox and if it's checked
if(!$("input[type='checkbox']")[0].checked){
alert("You must agree to the terms to continue.");
}
}
</script>
Personally (and I'm far from alone on this), the use of JQuery is way overused in today's world. When it came out, the standard DOM API wasn't as mature as it is now and JQuery made DOM element selection and manipulation very simple. Back then, JQuery was a Godsend.
Today, the DOM API has matured and much of what we use to rely on JQuery to make easy, can be done just as easily without JQuery. This means you don't have to reference the JQuery library at all (faster page loading) and you're code follows standards.
If you're interested, here's your code without JQuery:
<form>
<div class="ss-item-required">
<label for="userName">Question: What is your name?</label>
<input type="text" name="name" id="userName">
</div>
<div class="ss-item-required">
<label for="email">Question: What is your email?</label>
<input type="text" name="email" id="email">
</div>
<div class="ss-item-required">
<label for="address">Question: What is your address?</label>
<textarea name="address" rows="8" cols="75" id="address"></textarea>
</div>
<div class="ss-item-required">
<label for="Check_0">Do you agree to out terms?
<input type="checkbox" name="Check_0">
</label>
</div>
Submit
</form>
<script>
function formcheck() {
// Get all the required elements into an Array
var fields = [].slice.call(document.querySelectorAll(".ss-item-required > *"));
// Loop over the array:
fields.forEach(function(field) {
// Check for text boxes or textareas that have no value
if ((field.type === "text" || field.nodeName.toLowerCase() === "textarea")
&& !field.value){
alert(field.name + ' is required');
// Then check for checkboxes that aren't checked
} else if(field.type === "checkbox" && !field.checked){
alert("You must agree to the terms to continue.");
}
});
}
</script>
I have a working Code-pen, the calculated results are showing on next to input fields SPAN. I tried to get that calculated value from SPAN and overwrite the input fields.
<!-- Include this line of code --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtx1" /><br />
<span id="txtSpan"></span>
<input type="button" value="Appended-textBox" id="Btn3" />
and the JS
$(document).ready(function() {
$('#Btn3').click(function() {
var txtvalue = $('#txtx1').val();
$("#txtSpan").text(txtvalue);
console.log(txtvalue);
});
});
The above works I just want to other way around setting the Input with changing SPAN value.
Is there any way I can overwrite the input box with calculated SPAN values and for the final SPAN result to write to input (ID=GrandTotal),
<div>
<label class="description" for="Coconut">Coconut</label>
<input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/>
</div>
<div>
<label class="description" for="GrandTotal">Grand Total</label>
<input id="GrandTotal" name="GrandTotal" class="element text medium" type="text" maxlength="255" value="" readonly="true"/>
</div>
Many thanks and sorry to consume your time. many thanks in advance
https://codepen.io/dunya/pen/mojKNz
I managed to fix it by adding below line:please check the working version above pen.
$('#GrandTotal').val(parseInt($(this).html()));
when I tried the
$('#GrandTotal').val(sum);
it gave me the wrong calculation.
I have a checkbox pre-selected saying "Use profile address" and address is showing below.
Now what I want is if a customer unchecks the checkbox the pre-shown address gets hidden and a new input saying add different address appears.
I tried to do this using this JS trick. But couldn't achieve what I wanted. Can someone help?
$('#address-checked').change(function(){
if (this.checked) {
$('#address-sh').fadeIn('slow');
} else {
$('#address-sh').fadeOut('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address> 9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh">
<input type="text" />
</div>
You were simply hiding/showing the wrong HTML element. Changing the selector to just the address element fixes the issue. But, going a bit further, if you initialize the textbox and its label so that they are hidden at the start, then you don't need an if/else statement at all. You can just toggle the address and the textbox when the checkbox gets checked.
$('#address-checked').on("change", function(){
// You don't need and if/then here. Just toggle the visibility
$('address').toggle('slow');
$('.hidden').toggle('slow');
});
.hidden { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>
9 Longacre Road<br>
London, GB, E17 4DT
</address>
<div id="address-sh" class="hidden">
<label>Enter new address: <input type="text"></label>
</div>
Additionally, JQuery no longer recommends the use of shortcut event methods, such as change. Instead, the recommend the on() method, that you pass the event name to.
Lastly (FYI), don't self-terminate your HTML tags. That's a left over syntax from the days of XHTML and really serves no purpose today. In fact, using that syntax can actually introduce bugs into your code. Read this for details.
and a new input saying add different address appears.
Add this new input and toggle the display basing on the check/uncheck performed by the user:
$('#address-checked').change(function() {
$('#address-sh').toggle(!this.checked);
$('address').toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked" class="mb-3">
<label class="car-list-step-equipment-label">Use profile address</label>
<address>9 Longacre Road<br />London, GB, E17 4DT</address>
<div id="address-sh" style="display: none">
Enter new address: <input type="text" />
</div>
You have given id to input type text div and you are trying address label
$('#address-checked').change(function(){
if ($(this).is(':checked')) {
$('#address').fadeIn('slow');
$('#address-sh').fadeOut('slow');
} else {
$('#address').fadeOut('slow');
$('#address-sh').fadeIn('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="address-checked" checked="checked">
<label class="car-list-step-equipment-label">Use profile address</label>
<address id="address">
9 Longacre Road<br />
London, GB, E17 4DT
</address>
<div id="address-sh" style="display:none;">
<input type="text" />
</div>
I need to add a single JavaScript statement in the function clickHandler() to make sure the input from the text boxes form a border around the first paragraph. I know that the getElementById only accepts one element not multiple however this approach is also not working. Would very much appreciate any help. This is all the code involved.
<head>
<script>
function clickHandler(){
document.getElementById('para1').style.border =
document.querySelectorAll('#size, #style, #colour).value;
}
</script>
</head>
<body>
<h1>Introduction to JavaScript</h1>
<p id="para1">JavaScript is also known as ECMAScript.</p>
<p>Size:
<input type="text" id="size">
</p>
<p>Style:
<input type="text" id="style">
</p>
<p>Colour:
<input type="text" id="colour">
</p>
<button type="button" onclick="clickHandler()" value="Change style">Change style</button>
You might use Array.from to transform a NodeList of each input into an array of each input's values, then join by spaces:
function clickHandler() {
document.getElementById('para1').style.border = Array.from(
document.querySelectorAll('input'),
input => input.value
).join(' ');
}
<p id="para1">JavaScript is also known as ECMAScript.</p>
<p>Size:
<input type="text" id="size" placeholder='5px'>
</p>
<p>Style:
<input type="text" id="style" placeholder='solid'>
</p>
<p>Colour:
<input type="text" id="colour" placeholder='green'>
</p>
<button type="button" onclick="clickHandler()" value="Change style">Change style</button>