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);
Related
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 need help putting multiple if statements into my function. I need it to check to make sure their is an input in input1 (first name) input2 (lastname) input6 (email) and input8(message box). I need it to then pop up an alert if one field is empty and state what field that is. I coded it up earlier with seperate functions and then called the functions on submit but then it pops up all the alerts pending that the field is empty. I would rather have it pop up only one alert then return false to exit the script so it doesnt spam you with 4 alerts and then cancel the script. Thanks!
Update: I have it working for the first three fields i need (First/Lastname and email) I just need to add an alert for the message box, but it seems .length is not working for the message box... any ideas? I tried doing the same as the others, but it breaks the code and does nothing.
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</head>
<body id="main_body" >
<div id="form_container">
<form id="form_1121982" class="appnitro" enctype="multipart/form-data" method="post" action="">
<div class="form_description">
<p></p>
</div>
<h1 align="center">Contact Us</h1>
<ul >
<li id="li_1" >
<label class="description" for="element_1">Name </label>
<span>
<input id="input1" name= "input1" class="element text" maxlength="255" size="8" value=""/>
<label>First</label>
</span>
<span>
<input id="input2" name= "input2" class="element text" maxlength="255" size="14" value=""/>
<label>Last</label>
</span>
</li> <li id="li_2" >
<label class="description" for="element_2">Phone </label>
<span>
<input id="input3" name="input3" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="input3">(###)</label>
</span>
<span>
<input id="input4" name="input4" class="element text" size="3" maxlength="3" value="" type="text"> -
<label for="input4">###</label>
</span>
<span>
<input id="input5" name="input5" class="element text" size="4" maxlength="4" value="" type="text">
<label for="input5">####</label>
</span>
</li> <li id="li_3" >
<label class="description" for="input6">Email </label>
<div>
<input id="input6" name="input6" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_4" >
<label class="description" for="input7">Upload a File </label>
<div>
<input id="input7" name="input7" class="element file" type="file"/>
</div>
</li> <li id="li_5" >
<label class="description" for="input8">Paragraph </label>
<div>
<textarea id="input9" name="input8" class="element textarea medium"></textarea>
</div>
</li>
<li class="buttons">
<input type="hidden" name="form_id" value="1121982" />
<input id="saveForm" class="button_text" type="button" name="submit" value="Submit" onclick="myFunction1();" />
<input type="reset" value="Reset">
</li>
</ul>
</form>
<div id="footer">
</div>
</div>
</body>
</html>
function myFunction1()
{
var field1 = document.getElementById("input1").value.trim(); //checks length of first name
var field2 = document.getElementById("input2").value.trim(); //checks length of first name
var field6 = document.getElementById("input6").value.trim(); //checks length of first name
if ( field1.length == 0 )
{
alert("Please Fill In Your First Name");
return false;
}
else if ( field2.length == 0 )
{
alert("Please Fill In Your Last Name");
return false;
}
else if( field6.length == 0 )
{
alert("Please Fill in Your Email");
return false;
}
}
Place the return within your if statements.
if (field1.length == 0) {
alert("Please Fill In Your First Name");
return false;
}
To answer the second part of your question, though you haven't supplied the javascript on how you're trying to get the textarea.
Firstly, your naming convention isn't great. You should use something that is meaningful so you don't make mistakes which I think you have done here.
<textarea id="input9" name="input8" class="element textarea medium"></textarea>
Your textarea has id=input9 with name=input8. Going by how you were doing this originally, it should be id=input8?
For your fields, use the naming of your labels. Eg id=Firstname, id=Email etc.
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>
I want to add fields in my HTML code via an "ADD USER button such that all the validations done in the First three fields Email Name & Phone number should be same in the new generated 3 fields.I have used Jquery validate plugin.
My HTML code is as follows
<!DOCTYPE html>
<!--<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>-->
<html>
<head>
<meta charset="utf-8">
<title>Manageuser_addUser</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="plugin/validation/dist/additional-methods.min.js"></script>-->
<script src="plugin/validation/dist/jquery.validate.min.js"></script>
<script src="plugin/utilities/validationutils.js"></script>
</head>
<body>
<div>
<h1>Manage Users!</h1>
<form id="formRegistration" method="post" action="">
<div>
<label for="email">Email Id*</label>
<input id="email" type="email" name="email" value="" placeholder="Enter your Email Id" />
</div>
<div>
<label for="name">Name*</label>
<input id="name" type="text" name="name" value="" placeholder="Enter your Name" />
</div>
I am trying to use this section of js and J query but its not working
<script type="text/javascript">
var i = 3;
function addField(tableid)
{
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","field" + i );
col1.appendChild(document.createTextNode("Field" + i));
col2.appendChild(input);
row.appendChild(col1);
row.appendChild(col2);
var table = document.getElementById(tableid);
table.appendChild(row);
i++;
}
<div>
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" value="" placeholder="+xx-xxxxxxxxxx" />
</div>
<div>
<input type="submit" name="add" value="Add User" id="publiclogin">
</div>
<div>
<input type="submit" name="add" value="Add more Fields" id="">
</div>
</form>
</div>
</body>
Your javascript code seems incomplete, there should be:
$("#formRegistration").validate();
within the script tags
I face problem that my div.hide is not working, because it just shows and whenever I click back link "reply" it's does not hide.
JavaScript
<script type="text/javascript">
$('body').on('click','a.btnGG',function(){
var va=$(this).data('comment_id');
$("#parent_id").val(va);
$("#formReply").attr("va",$("#formReply").attr("va") + va);
$(".formms").hide();
$(this).after('<div class="formms">'+$(".gg").html()+'</div>');
$("#hides").onclick(function (){
$(".gg").css("display","block");
});
</script>
tpl
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
I'm beginner programmer.
It's hard to tell what you are doing with your code. If you simply want to display div or hide clicking on reply button, there's a complete code (TPL file):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
<script type="text/javascript">
$('body').on('click','a.btnGG',function() {
$(".gg").toggle();
});
</script>
</body>
</html>
<a href="javascript;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
// Code
</div>
Change it to something like
<a href="#" id="hides" class="btnGG" > reply</a>
<div class="gg" id="testid" style="display:none;">
// Code
</div>
and use script like
$(document).ready(function(){
$("#hides").onclick(function(){
$("#testid").toggle("show");
});
});