I want to trigger an event with a button that changes the visibility of a set of elements (inputs of type text and button) from hidden to visible. Now everytime I click on the triggering button, I want a new set of the same elements to appear on a new line. How can that be done? Here is a snippet of the code:
<script type="text/javascript">
function generatenew()
{
document.add.property1.style.visibility="visible";
document.add.button2.style.visibility="visible";
document.add.button3.style.visibility="visible";
document.add.button4.style.visibility="visible";
}
</script>
</head>
<body>
<form name='add' method="post" action="">
<div id="div"></div>
<input type="button" value="+Add" onclick="generatenew();">
<input type="button" value="Edit" name="button2" style="visibility:hidden">
<input type="text" style="visibility:hidden" size="50" name="property1" placeholder="<street> <city> <ZIP> <country> <lockunitID>">
<input type="button" style="visibility:hidden" name="button3" value="open main door">
<input type="button" style="visibility:hidden" name="button4" value="open apartment door">
<div id="abc"><input type="button" value="save"></div>
If I well understood your question, all you have to do is putting a function that is triggered by an onClick event, (element.onClick=function();) You put all your input type tags in the function, and then you end your function bay calling appendChild method so that each click triggers the display of your elements.
Related
In the HTML below, how can I use jQuery .empty to remove <div class="password-link"> and everything inside - the href link, the text Log in and the </a> - as well as the closing </div>?
I'm trying to use
jQuery('#lostpasswordform input#wp-submit').empty('password-link');
but I must not be selecting the input or the form in the correct way.
<form name="lostpasswordform" id="lostpasswordform" action="http://localhost/~user/wp-core/wp-login.php?action=lostpassword" method="post">
<input type="hidden" name="redirect_to" value="">
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="">
// Remove this:
<div class="password-link">Log in</div>
</p>
</form>
Make sure you want to remove that element or clean the content of it
$('.password-link').empty() will return:
<div class="password-link"></div>
while $('.password-link').remove() will remove/delete that element .password-link
You can try this way
$('#lostpasswordform input#wp-submit').on("click", function(){
var $passwordlink = $(".password-link");
$passwordlink.empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="lostpasswordform" id="lostpasswordform" action="http://localhost/~user/wp-core/wp-login.php?action=lostpassword" method="post">
<input type="hidden" name="redirect_to" value="">
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="">
// Remove this:
<div class="password-link">Log in</div>
</p>
</form>
.empty() removes the child nodes and content. So the div you want to remove should be wrapped around another div and you can call the .empty() method on that parent div.
hi I've this html code
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="stile.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form action="">
<div>
<div style="float:left; margin-right:3%">XXX</div>
<div>
<input type="text" name="price" id="price" value="2">
</div>
<div style="float:left; margin-right:3%">
<input type="button" name="button" id="button" value="button">
</div>
</div>
<div>
<div style="float:left; margin-right:3%">YYY</div>
<div>
<input type="text" name="price" id="price" value="3">
</div>
<div style="float:left; margin-right:3%">
<input type="button" name="button" id="button" value="button">
</div>
</div>
<div id="total"></div>
<script src="js/mine.js"></script>
</form>
</body>
</html>
and the follow js code in the file mine.js
$("#button").each(function() {
var sum = 0;
$('#price').each(function() {
sum += Number($(this).val());
});
$('#total').text(sum);
});
I'd like that when I click on button in the div id total it gives me the value of the field price.
So if I click on the first submit button it gives me the value 2 but if after I click on the second button it doesnt do the sum (2+3=5)
You should use class instead of id as jquery id selector (#) only returns one element
https://api.jquery.com/id-selector/
For id selectors, jQuery uses the JavaScript function
document.getElementById(), which is extremely efficient. When another
selector is attached to the id selector, such as h2#pageTitle, jQuery
performs an additional check before identifying the element as a
match.
Calling jQuery() (or $()) with an id selector as its argument will
return a jQuery object containing a collection of either zero or one
DOM element.
Inputs would be
<input type="text" name="price" class="price" value="2">
<input type="button" name="button" class="button" value="button">
In the case of total you can leave the id as you would have one final total
So your code would be something like this
$(".button").each(function() {
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#total').text(sum);
});
UPDATE :
If you use this code and click first button it would give 2 and then the other one it would give 5. You can try disabling click handler in order to prevent from adding a second time.
$(document).on("click", ".button", function()
{
var sum = Number($('#total').text());
sum += Number($(this).closest("div").parent().find('.price').val());
$('#total').text(sum);
});
Addenda : Quantity input that increases each time button is pressed
<div>
<input type="text" name="quantity" class="quantity" value="0">
<input type="button" class="add-quantity">
</div>
$(document).on("click", ".add-quantity", function()
{
var input = $(this).closest("div").find(".quantity");
var currentVal = parseInt(input.val());
$(input).val(currentVal+1);
});
So looking at your code, you've got the following:
<input type="button" name="button" id="button" value="button"></div>
<div><input type="text" name="price" id="price" value="2"></div>
<input type="button" name="button" id="button" value="button"></div>
<div><input type="text" name="price" id="price" value="3"></div>
You've got button and id set twice as id's and you should have unique id's, so when you're check for each element use class= instead of id=.
So if you was to make that change, they would look like the following:
<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="2"></div>
<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="3"></div>
Then you would use $('.button') and $('.price') instead of $('#button') and $('#price') for the selectors in JQuery.
I've taken your fiddle and updated it.
Check the following:
JSFIDDLE
UPDATE
After reading your comment, i've updated my jsfiddle and you can now click the two buttons and then have the answer add up to (5)
The reason it was adding up to (5) straight away without you clicking the buttons was because it was doing the .each instead of you having to click the buttons yourself.
So to do this i've used two different classes for the buttons and inputs so they would like the following:
<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="2"></div>
<input type="button" name="button" class="button1" value="button"></div>
<div><input type="text" name="price" class="price1" value="3"></div>
UPDATED JSFIDDLE
Every click will keep adding the value on to the total number because there no validation to tell the click to stop once it's added up to (5)
UPDATE USING ONE BUTTON
You could even do this, instead of having two buttons, you could just have one button which goes through each of the inputs and adds up the total.
for example:
JSFIDDLE EXAMPLE WITH ONE BUTTON
UPDATE USING TWO BUTTON (Same class names and Validation for 5)
So in the following update (example) it will show you how to get both values using the same class names for both buttons and inputs. It will also show you how to add little validation to stop the adding up once you have 5. So you can't go over 5 (Change it how you like).
JSFIDDLE WITH TWO BUTTONS AND LITTLE VALIDATION
I have an initial landing page which has 2 submit buttons on it. One button will display a specific set of results and the other button will display a different set.
Basically I am passing through the text value onto the next page for it to display some player biographys and reviews.
<form action="resultpage.html" method="GET">
<input type="text" name="playerName" />
<input type="submit" value="Submit"/>
<input type="submit" value="Submit"/>
</form>
I was wondering is it possible when I hit button 1 it will display my biography function information and only it, then when I hit button 2 it will display only the blogreviews functions' information.
$(document).ready(function() {
biography(files);
blogsreviews(files);
});
You can name the buttons and have jquery call the specific function on button click:
<form action="resultpage.html" method="GET">
<input type="text" name="playerName" />
<input type="submit" name="button1" value="Submit"/>
<input type="submit" name="button2" value="Submit"/>
</form>
$(document).ready(function() {
$('input[name="button1"]').click(function() {biography(files)});
$('input[name="button2"]').click(function() {blogsreviews(files)});
});
I don't want to pass the value to the function, I want it to find the value itself.
<script type="text/javascript">
function add(buttonNum)
{
var elements = document.getElementsByTagName("button");
alert(document.myform.elements[buttonNum].value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(0)"/>
<input type="button" value="w" onclick="add(1)"/>
<input type="button" value="e" onclick="add(2)"/>
<input type="button" value="r" onclick="add(3)"/>
<input type="button" value="t" onclick="add(4)"/>
<input type="button" value="y" onclick="add(5)"/>
</form>
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
What approaches do I need to take? Something tells me that I need to get the length, run a for loop, and attach a handler. I'm just not sure on where to start.
simply pass this as parameter so that you can access all the attributes of the element but here only value:
<script type="text/javascript">
function add(elem)
{
alert(elem.value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(this)"/>
<input type="button" value="w" onclick="add(this)"/>
<input type="button" value="e" onclick="add(this)"/>
<input type="button" value="r" onclick="add(this)"/>
<input type="button" value="t" onclick="add(this)"/>
<input type="button" value="y" onclick="add(this)"/>
</form>
Compare:
getElementsByTagName("button");
<input>
You are getting the wrong element type.
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
Use addEventListener. You can identify the element clicked with event.target
e.g.
addEventListener('click', function (evt) {
if (evt.target.type == "button") {
alert(evt.target.value);
}
});
Hey I want to reset the form but i don't know how. i mean where should i add event. I want that form should be reset just after i submit the form or before the result is loaded in iframe.
<div class="mainArea">
<iframe id="uploadTarget" name="uploadTarget" src="OnlineExam?q=allQuestions"
style="width:15%;height:100%;border:1px solid #fff; float:left;" >
</iframe>
<div id="questionArea">
<h1 class="headingClassC">Please Input Questions: </h1>
<br class="clearFormatting"/>
<span class="instructions"><br/>
1. You can use HTML tags to format your text
<br/>
2. To Edit a previously inserted question please click on the question no. shown on the left side.<br/>
3. You can attach an image file with the question which will be used as reference. <br/>
</span>
<form action="OnlineExam?q=saveQuestion" method="post" target="uploadTarget" id="inputQuestionForm">
<fieldset>
<legend>Question</legend>
<textarea class="questionArea" id="question" name="question">Enter Question.</textarea>
<br class="clearFormatting"/>
<input class="optionsInput" value="optionA" name="optionA" onfocus = "clearValues('optionA')" onblur = "setValues('optionA')"/>
<br class="clearFormatting"/>
<input class="optionsInput" value="optionB" name="optionB" onfocus = "clearValues('optionB')" onblur = "setValues('optionB')"/>
<br class="clearFormatting"/>
<input class="optionsInput" value="optionC" name="optionC" onfocus = "clearValues('optionC')" onblur = "setValues('optionC')"/>
<br class="clearFormatting"/>
<input class="optionsInput" value="optionD" name="optionD" onfocus = "clearValues('optionD')" onblur = "setValues('optionD')"/>
<br/>
<input class="optionsInput" value="answer" name="answer" onfocus="clearValues('answer')" onblur="setValues('answer')"/>
<input type="submit" value="Save"/>
<input type="reset" value="Cancel" />
<button style="display: none" onclick="return deleteQuestion()" >Delete</button>
</fieldset>
</form>
<br/><br/>
Once you have finished inputing question click here to go back.
</div>
</div>
misread your question...
You need to use javascript to reset the form.
Here is a good start for doing that:
Resetting a multi-stage form with jQuery
you should add a script in your iframe to call into the parent frame and clear the form once the iframe loads.
You obviously cant clear the form before the submit event.