Hi all i have this 3 forms:
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
and a button
<button type="button" onclick="merge()">merge</button>
Now i want that the function merge() takes the text inserted in the first 2 forms and put the append of the 2 string in the 3rd form.
i tried something like:
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}
</script>
idform1 , idform2 and idform3 are not the correct id's but it's just to be more clear.
Of course it's not working , can anyone help me out ? thanks
replace your code with this
<!DOCTYPE html>
<html>
<script src="put your path to jquery.js"></script>
<body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
<button type="button" onclick="merge()">merge</button>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
</html>
You got every thing Just change this
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}// this line
</script>
to
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#result').val(r1+r2);}// to this
</script>
and if you have for more specification you can use String(yourValue) function like this $('#result').val(String(r1)+String(r2)) but here we don't really need this.
first you know you use wrong input tag id change correct ids then change val("r1+r2") to val(r1+r2). if you use variable there not string " " quote String Quote only for when normal text you set.
and finally you use jQuery under JavaScript so add in Head tag jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
here your full code :
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<br>
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<br>
<label for="result" style="color: red;" >Risultato:</label>
<input type="text" class="form-control" id="result" >
<br>
<button type="button" onclick="merge()">merge</button>
</body>
</html>
Related
I have this Jquery/javascript code which clones a template element and assigns the clone an iterative ID (so the first clone is called 'eventCard0', the second 'eventCard1' etc.)
This works fine besides .prop('name', 'eventCard' + number) which for some reason doesn't change the clone's name attribute in the same manner as it changes the clone's ID. I can't figure out why this is at all
var newEventBtn = document.getElementById("newEventButton");
newEventBtn.onclick = function() {
let number = $('#events .eventInputs').length;
let cloneParent = "#eventCardTemplate";
let newClone = $(cloneParent).clone().prop('id', "eventCard" + number).prop('name', "eventCard" + number);
newClone.appendTo("#events");
}
This is the template tag <li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
And this is the entire HTML:
<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit();
}
?>
<html>
<head>
<title>Timeline Creator</title>
<link rel="stylesheet" type="text/css" href="timelineCreator.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
<input type="text" name="eventName" class="eventName" maxlength="50" placeholder="Event Name" required>
<textarea name="eventDesc" class="eventDesc" placeholder="Event Description" required></textarea>
<p class="label">Start Date</p>
<input type="date" name="startDate" class="date" required>
<!-- <label for="startIsEnd">Start date = End Date</label>
<input type="checkbox" name="startIsEnd" class="startIsEnd"> -->
<p class="label">End Date</p>
<input type="date" name="endDate" class="date" required>
<p class="label">Political</p>
<input type="checkbox" name="political" value="political" class="checkboxes">
<p class="label">Economic</p>
<input type="checkbox" name="economic" value="economic" class="checkboxes">
<p class="label">Social</p>
<input type="checkbox" name="social" value="social" class="checkboxes">
</li>
<-- Back
<form action="createTimeline.php" method="post" id="timelineCreator">
<input type="text" name="timelineName" id="timelineName" maxlength="50" placeholder="Timeline Name" autofocus required>
<textarea id="timelineDesc" name="timelineDesc" placeholder="Timeline Description" required></textarea>
<ul id="events">
</ul>
<button type="button" id="newEventButton">+ Add Event</button>
<input type="submit" id="createTimeline" value="Create Timeline">
</form>
<script src="timelineCreator.js"></script>
</body>
</html>
Your element does not have the name property, so .prop won't change it.
Look at this link for a list of elements that do have the name property. https://developer.mozilla.org/en-US/docs/Web/API/Element/name
In this case you should be using .attr instead of .prop :
let newClone = $(cloneParent).clone().attr('id', "eventCard" + number).attr('name', "eventCard" + number);
I am not quite sure what is going wrong here. I am not seeing values logged to the console upon selecting the "submit" event on the form.
Here is my html:
<div>
<form class="submit-film">
<p class="email">Email</p>
<input class="field" id="email" placeholder="youremail#example.com">
<p class="project_link">Link to your project:</p>
<input class="field" id="link" placeholder="https://vimeo.com/myfilm">
<p class="pw">Password to access film:</p>
<input class="field" id="pw" placeholder="(password to access project)">
<p class="number">How many screeners do you want?</p>
<input class="field" id="screenerAmount" placeholder="8 screeners">
<p class="please">Please attach a questionaire if you have one preparred:</p>
<button class="select">Select file</button>
<p class="length">How many minutes is your project?</p>
<input class="field" id="minutes" placeholder="15 minutes">
<p class="questions">Do you have any additional comments or questions?</p>
<input class="field" id="comments" placeholder="(insert comments/questions here)">
<input type="submit" class="button_type" class="button_type:hover" value="submit">
</form>
</div>
</div>
<script src="wescreen.js"></script>
</body>
</html>
Here is the JavaScript:
const form = document.querySelector('.submit-film');
form.addEventListener('.submit', e=> {
e.preventDefault();
console.log(form.email.value);
console.log(form.link.value);
console.log(form.pw.value);
console.log(form.screenerAmount.value);
console.log(form.minutes.value);
console.log(form.comments.value);
});
just changed the class to the id and used getelementbyid hope this helps
<div>
<form id="submit-film">
<p class="email">Email</p>
<input class="field" id="email" placeholder="youremail#example.com">
<p class="project_link">Link to your project:</p>
<input class="field" id="link" placeholder="https://vimeo.com/myfilm">
<p class="pw">Password to access film:</p>
<input class="field" id="pw" placeholder="(password to access project)">
<p class="number">How many screeners do you want?</p>
<input class="field" id="screenerAmount" placeholder="8 screeners">
<p class="please">Please attach a questionaire if you have one preparred:</p>
<button class="select">Select file</button>
<p class="length">How many minutes is your project?</p>
<input class="field" id="minutes" placeholder="15 minutes">
<p class="questions">Do you have any additional comments or questions?</p>
<input class="field" id="comments" placeholder="(insert comments/questions here)">
<input type="submit" class="button_type" class="button_type:hover" value="submit">
</form>
</div>
</div>
<script>
const form = document.getElementById('submit-film');
console.log(form);
form.addEventListener('click', e => {
e.preventDefault();
console.log(form.email.value);
console.log(form.link.value);
console.log(form.pw.value);
console.log(form.screenerAmount.value);
console.log(form.minutes.value);
console.log(form.comments.value);
}); </script>
All your form elements are missing name attribute.
add them and try, something like this
<input class="field" name="email" id="email" placeholder="youremail#example.com">
console.log(form.email.value);
Refer Here for a sample demo
Edit 1:
Also some issue in this line
form.addEventListener('.submit', e=> {
It should be submit
form.addEventListener('submit', e=> {
Here is working fiddle
This is what I tried for setting the textbox values but it doesn't seem to be working. I want the textboxes to have the values in them when the page loads. the function is within the script tag.
function setMSRP()
{
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly"/>
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly"/>
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly"/>
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly"/>
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly"/>
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()"
</form>
</body>
You have some syntax errors in code. Look at the modified example below:
<html>
<head>
<script>
function setMSRP() {
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly" />
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly" />
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly" />
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly" />
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly" />
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()">
</form>
</body>
</html>
I want the textboxes to have the values in them when the page loads.
You don't need JS for this:
<input id="txtMSRP" type="text" value="<your_value>" />
If you wanted placeholders inside the input[type=text], simply use
var textbox = document.querySelector("#textbox");
textbox.setAttribute("placeholder", "This is the Placeholder");
Or use the HTML Attribute to set the value/placeholder:
<input type="text" id="textbox" value="Hello" placeholder="Introductory Statement" />
I want to make an HTML form that churns out formatted email signatures.
I want the output on
1) separate lines and
2) have each line of be formatted uniquely. So, first line bold and blue, second like non-bold and grey font, etc. like typical email signatures. So far it all appears in one long identically formatted output.
Eventually I'd like blank entries to be omitted and to add an automatic copy function, but I can tackle those later.
Spent a few dozen hours on this and can't get it, so hoping for some guidance.
<!DOCTYPE html>
<html lang = "en-US">
<title>Email Signature</title>
<head>
<body>
<font face="century gothic">
<h3>Creating Signature</h3>
<p>Enter you information<p>
<form>
Name<br>
<input type="text" name="wholename" ><br>
<br>Position</br>
<input type="text" name="pos"><br>
<br>Position 2</br>
<input type="text" name="pospos"><br>
<br>Phone 1</br>
<input type="text" name="phone"><br>
<br>Phone 2</br>
<input type="text" name="phonephone"><br>
<p>Select Location<p>
<input type="radio" name="location" value="Redding" checked>Redding<br>
<input type="radio" name="location" value="San Francisco" checked> San Francisco<br>
<input type="radio" name="location" value="Woodland Hills" checked> Los Angeles<br><br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box when you're all set</em>
<p>
<b>Your Custom Signature:</b><br><br>
<textarea type="textarea" id="billingname" style="font-family:century gothic;font-size:1.2em;color:rgb(126,128,130)" rows="10" cols="40" ></textarea><br>
<script type="text/javascript">
function copyText(){
document.getElementById("billingname").select();
document.execCommand('copy');
}
function FillBilling(f) {
f.billingname.value =
f.wholename.value + " " + f.pos.value + " | " + f.pospos.value + "" + f.phone.value + " " + f.phonephone.value + " " + f.location.value;}
if(f.billingtoo.checked == true) {}
</script>
</form>
<br><br><br><br>
</font face>
</head>
</body>
</html>
I don't think you want to use a <textarea> because that doesn't allow for multiple formatting like you want in the signature. Try using a <div> with separate <p> tags, like this:
<!DOCTYPE html>
<html lang = "en-US">
<title>Email Signature</title>
<head>
<body>
<font face="century gothic">
<h3>Creating Signature</h3>
<p>Enter you information<p>
<form>
Name<br>
<input type="text" name="wholename" value="John Doe"><br>
<br>Position</br>
<input type="text" name="pos" value="Systems Engineer"><br>
<br>Position 2</br>
<input type="text" name="pospos" value="Senior Manager"><br>
<br>Phone 1</br>
<input type="text" name="phone" value="(123)-456-7890"><br>
<br>Phone 2</br>
<input type="text" name="phonephone" value="(123)-456-7890"><br>
<p>Select Location<p>
<input type="radio" name="location" value="Redding" checked>Redding<br>
<input type="radio" name="location" value="San Francisco" checked> San Francisco<br>
<input type="radio" name="location" value="Woodland Hills" checked> Los Angeles<br><br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box when you're all set</em>
<p>
<b>Your Custom Signature:</b><br><br>
<div id="billingname" style="width: 400px; height: 300px; border: solid black 2px;">
<b id="wholename" style="margin:0; line-height:14px; display:inline-block; color:#245996"></b>
<p id="pos" style="margin:0; line-height:14px; display:inline-block; color:#245996"></p>
<p id="pospos" style="margin:0; line-height:14px; display:inline-block; color:#245996"></p>
<p id="phone" style="margin:0; line-height:14px; color:grey"></p>
<p id="phonephone" style="margin:0; line-height:14px; color:grey"></p>
<p id="location" style="margin:0; line-height:14px; color:grey"></p>
</div>
<br>
<script type="text/javascript">
function copyText(){
document.getElementById("billingname").select();
document.execCommand('copy');
}
function FillBilling(f) {
document.getElementById("wholename").innerHTML = f.wholename.value + " ";
document.getElementById("pos").innerHTML = f.pos.value + " | ";
document.getElementById("pospos").innerHTML = f.pospos.value;
document.getElementById("phone").innerHTML = f.phone.value;
document.getElementById("phonephone").innerHTML = f.phonephone.value;
document.getElementById("location").innerHTML = f.location.value;
}
//if(f.billingtoo.checked == true) {}
</script>
</form>
<br><br><br><br>
</font face>
</head>
</body>
</html>
Let me know if you have any questions about the code or if I misinterpreted what you wanted.
Happy Coding!
I have this code to change the color of elements like the Background-color,text color,active link color,visited link color etc. inside a div. I have to enter the color for each in the text-boxes and accordingly the color of background,text color,link colors would change. This is the program objective.
But I can't change the colors of the active, followed and visited links. How to do that with only HTML, CSS and JavaScript? Please don't tell me any method using jQuery, as I don't know jQuery. I only want it it with JavaScript.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("dv").style.alinkcolor=txt;
document.getElementById("dv").style.vlinkcolor=al;
document.getElementById("dv").style.color=vl;
document.getElementById("dv").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv"> hello
This is a Test<br/>
You Have Selected These Colors<br/>
This is a Test Link<br/>
</div>
</body>
</html>
I Updated your code by assigning the ID's to the elements. Here is the updated code. Try this code to see if it helps. Thanks.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("link").style.alinkcolor=al;
document.getElementById("link").style.vlinkcolor=vl;
document.getElementById("para").style.color=txt;
document.getElementById("link").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv">
<p id="para">hello This is a Test<br/>
You Have Selected These Colors<br/><p>
<a id="link" href="#">This is a Test Link</a><br/>
</div>