Javascript: Edit a preview with jquery - javascript

I have 2 divs, the first one has the label with the content to show, but when you click the "edit" button, it should show you the div="edit" and the content of the 1st label inside of the input that is linked to it (same id).
By the other way, I saw sites that when you type something inside that input, the original label of the "preview" div is getting updated in realtime.
Could someone help me with the script? Thank you!
<html>
<body>
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
<label id="companyCountry" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit"/>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyName" />
<label>Company Country: </label>
<input type="text" id="companyCountry" />
</div>
</body>
</html>

You can use something like below. Notice though that I changed the id of the fields to be different. It is not a good practice to give multiple controls on the same page the same id. Some browsers do not work with this and it really doesn't make sense anyways.
$(document).ready(
function()
{
$("#companyNameText").keypress(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keypress(
function()
{
$("#companyCountryLabel").html(this.value);
});
});

Related

copy text into field using radio selection

I am wanting to create the following using CSS, HTML and JavaScript
Course1 //dropdown selection//
....
Course2 //dropdown selection//
.....
WINNER
(RADIO checked for Course1) OR (RADIO clicked for Course2)
//automatically populated from either Course1 or Course2 depending on Radio checked//
but my dropdown selection and radio selection hamper each other.
When I have the name from the radio the same "winnerselected" the radio works, but the copying from the course1 or course2 doesn't work.
Maybe someone has created code like this somewhere else and knows how to get around it?
Any assistance will be appreciate.
code as follows:
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
Course 1
<input id="myInput" type="text" name="golfcoursename1" placeholder="Golf
Course">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
Course 2
<input id="myInput1" type="text" name="golfcoursename2" placeholder="Golf
Course">
</div>
<p>
WINNER
<p>
<input type="radio" id="Course1" name="winnerselected" value="Course1"
onclick="FillWinner(this.form)">
<label for="Course1">Course 1</label>
<input type="radio" id="Course2" name="winnerselected" value="Course2"
onclick="FillWinner2(this.form)">
<label for="Course2">Course 2</label><br>
<input type="text" id="winner" name="Winner" placeholder="Winner">
<p>
</p>
<input type="submit">
</form>
<script>
function FillWinner(f) {
if(f.winnerselected.checked == true) {
f.winner.value = f.golfcoursename1.value;
if(f.winnerselected.checked == true)
f.winner.value = f.golfcoursename2.value;
}}
</script>
First, your HTML is not valid as you have a second form, with no closing tag, nested in the first one. Also, while is is legal to not close a p element, you really should for clarity sake.
Next, remove inline styles and inline JavaScript from your HTML. It just clutters up the code, causes redundancy, and is harder to read and maintain. Instead break your work into HTML, CSS, and JavaScript sections.
It's not clear what you exactly want, but my guess is that whichever radio button is clicked should dictate which textbox value becomes the winner. Based on that, see the comments inline below for a description of how the code works.
.autocomplete { width:300px; }
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="courses">
<div class="autocomplete">
Course 1 <input id="myInput" name="golfcoursename1" placeholder="Golf Course">
</div>
<div class="autocomplete">
Course 2 <input id="myInput1" name="golfcoursename2" placeholder="Golf Course">
</div>
</div>
<p>WINNER</p>
<p id="radioContainer">
<input type="radio" id="Course1" name="winnerselected" value="Course1">
<label for="Course1">Course 1</label>
<input type="radio" id="Course2" name="winnerselected" value="Course2">
<label for="Course2">Course 2</label><br>
<input type="text" id="winner" name="Winner" placeholder="Winner">
</p>
<input type="submit">
</form>
<script>
// Don't use inline HTML event attributes like onclick.
// Separate your JavaScript from your HTML
// Get references to the element(s) you'll need to work with
// Get all the elements that have a name attribute that starts with "golfcoursename"
const courseNames = document.querySelectorAll("[name^='golfcoursename']");
// Get all the elements that have a name attribute that is exactly "winnerselected"
const radioButtons = document.querySelectorAll("[name='winnerselected']");
const winner = document.getElementById("winner");
// Here's how to set up events in JS
const radCont = document.getElementById("radioContainer").addEventListener("click", fillWinner);
function fillWinner(event) {
// Look at the radiobuttons collection and get the index of the selected radio button from it.
const indexOfTextbox = Array.from(radioButtons).indexOf(event.target);
// Set the value of the winner textbox to textbox with the same index as the clicked radio button
winner.value = courseNames[indexOfTextbox].value;
}
</script>

Bind onlick events on several links

I am currently working on a solution for an application that is written in PHP, but needs a JS solution for a preview link and I am stuck with binding onclick-events on the links. The HTML is given and may not be changed. (so no adding of classes and stuff, even though that would be easier)
My initial thought was to just get each of the li and perform a callable that sets the event and defines the rules for what happens, when the link is clicked.
I am unsure what is the best possible solution to get the values of the two Inputs, belonging to the preview link, as while I was running the code mentioned above on what ever link I clicked, the last item was logged.
So basically this is 2 questions in one:
1. how to properly bind the click events.
2. how to best acces the inputs belonging to the link
var items = $('div.foobar').find('li');
items.each(function() {
this = $(this);
url = lo_this.find('a').attr('href');
this.find('a').click(function(event) {
event.preventDefault();
console.log(this)
/** here is the point, where I got stuck **/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foobar">
<li>
Link
<div class="justaname">
<input type="text" name="somenamewith[ID][foo]" value="">
<input type="text" name="somenamewith[ID][bar]" maxlength="50" value="">
</div>
</li>
<li>
Link
<div class="justaname">
<input type="text" name="somenamewith[OTHERID][foo]" value="">
<input type="text" name="somenamewith[OTHERID][bar]" maxlength="50" value="">
</div>
</li>
</div>
You mean this?
Assuming your inputs are in the same LI as the anchor
Ignoring the ID of the anchor and just getting the inputs in the same LI
Other code is needed if you want to use the ID of the link to access the named links
$('div.foobar li a').on("click",function(e) {
e.preventDefault();
$(this).closest("li").find("input").each(function() {
console.log(this.name,this.value)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foobar">
<li>
Link
<div class="justaname">
<input type="text" name="somenamewith[ID][foo]" value="">
<input type="text" name="somenamewith[ID][bar]" maxlength="50" value="">
</div>
</li>
<li>
Link
<div class="justaname">
<input type="text" name="somenamewith[OTHERID][foo]" value="">
<input type="text" name="somenamewith[OTHERID][bar]" maxlength="50" value="">
</div>
</li>
</div>
You can do this to bind click events to your links and then do whatever with the input elements contained by the div after the clicked link:
$('.foobar li a').on('click',function(event){
event.preventDefault();
$(this).next().find('input').each(function(){
//Whatever you want to do for each input
});
});

Entering data in an input and then displaying just the text entered elsewhere on page

I am creating a checkout page and I cannot figure out how to do the following. When the customer enters their shipping information, I want to display that same information further down the page in a confirmation section. I will not be submitting the information until the customer places the order, so there is no way to echo this information as I won't be submitting to my db until after they submit it.
I looked into this and I see things with a data-copy function and that is basically what I need except I do not want the copied data to show up in an input field. I just want it to display the text.
So if I had the following field:
Shipping street:
123 Main St.
I would want the 123 Main St to show up in a different section of the page.
I tried doing the data-copy function and I couldn't even get that to work. I'm not sure if this is the best method to use for this. I do not want the copied data to be editable. I have disabled that from my code.
I tried doing this:
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required> </div>
</div>
This is the confirmation part farther down the page:
<p><input type="text" class="preview" id="name" disabled></p>
The Jquery
$(document).ready(function() {
$(".preview").keyup(function() {
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
});
});
Is there a better way I can do this and most importantly an input field not show up with the copied data?
UPDATED CODE
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
Confirmation part
<p>Shipping to:</p>
<p><div class="preview" id="name"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
Is this what you want?
Note that data-copy="name" should now be data-copy="#name" for it to work
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
</div>
</div>
<br>
Your name is:
<div id="name"></div>
Simply change
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
to
$('#name').val($('#ShipToFullname').val());
Basicaly it says to set the value of id nameto the value of id ShipToFullname
Here the fiddle => http://jsfiddle.net/9sgcydmg/1/
If you don't want to output the data in another input you can simply set an id to any html element and use instead:
$('#name').html($('#ShipToFullname').val());
Here the fiddle => http://jsfiddle.net/89oeyq0h/
FINAL ANSWER : in it's most simple way, using jQuery, i would do something like this:
<input onkeyup="$('#name').html(this.value)" ... />
<p id='name'></p>
<input onkeyup="$('#addr').html(this.value)" ... />
<p id='addr'></p>
and so on...
http://jsfiddle.net/oky005a0/

Trouble filling Multiple Textbox values from other Textboxes when Checkbox is Clicked

I DID search but couldn't find anything that helped me to figure out my particular issue. I've got textboxes for a customer address, and textboxes for a business address, and a checkbox to mark if the address should be the same. I need to get the Checkbox to fill the business address with the customer address onclick and unfill them on onclick. I've tried using a few different ways with jquery and straight javascript DOM manipulation, the most success I've had is in the following code, it only fills the biz_street textbox with the cust_street value though, and I don't understand why. Some help would be greatly appreciated, either in jquery or straight javascript, can't use php (sadly).
Here it is on jsfiddle (as suggested by rjmunro, good idea :) ): http://jsfiddle.net/yN73w/1/ not working at all
Here is the jquery:
$("#same_box").click(function () {
var v = $("#cust_street").val();
var x = $("#cust_city").val();
var y = $("#cust_state").val();
var z = $("#cust_zip").val();
$("#biz_street").val(v);
$("#biz_city").val(x);
$("#biz_state").val(y);
$("#biz_zip").val(z);
});
Or more simply:
$("#same_box").click(function () {
$("#biz_street").val($("#cust_street").val());
$("#biz_city").val($("#cust_city").val());
$("#biz_state").val($("#cust_state").val());
$("#biz_zip").val($("#cust_zip").val());
});
And the HTML:
<label id="cus_street_label">Street</label></br>
<input type="text" name="cust_street" id="cust_street" style="width:90%" /></br>
<div id="cus_city">
<label id="cus_city_label">City</label></br>
<input type="text" name="cust_city" id="cust_city" style="width:100%" /></br>
</div>
<div id="cus_state">
<label id="cus_state_label">State</label></br>
<input type="text" name="cust_state" id="cust_state" style="width:70%" /></br>
</div>
<div id="cus_zip">
<label id="cus_zip_label">Zip</label></br>
<input type="text" name="cust_zip" id="cust_zip" style="width:65%" /></br>
</div>
<input type="checkbox" name="same_box" id="same_box" >Address Same as Customer</input></br>
<label id="biz_street_label">Street</label></br>
<input type="text" name="biz_street" id="biz_street" style="width:90%" /></br>
<div id="biz_city">
<label id="biz_city_label">City</label></br>
<input type="text" name="biz_city_box" id="biz_city_box" style="width:100%" /></br>
</div>
<div id="biz_state">
<label id="biz_state_label">State</label></br>
<input type="text" name="biz_state_box" id="biz_state_box" style="width:70%" /></br>
</div>
<div id="biz_zip">
<label id="biz_zip_label">Zip</label></br>
<input type="text" name="biz_zip_box" id="biz_zip_box" style="width:80%" /></br>
</div>
Thank you very much for any help, and I apologize if I missed a topic like this in my searching.
(Also, unrelated, but why doesn't function formReset() {
document.getElementById("customer").reset();
} work in firefox? It only seems to work in chrome)
(you need to select jQuery in your JSFiddle, like http://jsfiddle.net/7HGNx/)
Your code is referring to biz_city but the element's id is biz_cty_box.
You probably don't want to attach to click, you probably want listen to the change event, as this will fire when the option is changed without the mouse. I would also check that the change has been ticking the box, not unticking the box.
$("#same_box").change(function (e) {
if ($(this).is(":checked")) {
.
.
.
}
}

Javascript: Update label content while typing inside of a parent input with Jquery

How to update with jquery the label of preview div when im typing inside of the parent input of edit div?
Thank you.
<html>
<body>
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyName" />
</div>
</body>
</html>
You'd have to have something along these lines in your code:
<script>
$("#companyName").keyup(function () {
var value = $(this).val();
$(".workExperience").text(value);
}).keyup();
</script>
However, I would NOT give them the same id value, as it might lead to some errors.
Good luck!
you can not have the same ID in the tag "label" and the tag "input".
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyNameInput" />
</div>
$(document).ready(function(e){
$('#companyNameInput').bind('change', function(ev) {
$(this).closest('#edit').prev().find('#companyName').html($(this).val());
});
});
​
test

Categories

Resources