How can I get the current value of the label elements within function showEditionBlock() and set them to the corresponding input fields? The function will show the "edit" div, but the inputs are not getting the original values of the labels.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(
function()
{
$("#companyNameText").keyup(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keyup(
function()
{
$("#companyCountryLabel").html(this.value);
});
});
function showEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeIn('slow', function(){
$(this).css('display', 'inline');
});
}
function hideEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeOut('slow', function(){
$(this).css('display', 'none');
});
}
</script>
<body>
<div id="preview">
<fieldset>
<label id="companyNameLabel" class="workExperience">
This is my company
</label>
<label id="companyCountryLabel" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit" onclick="showEditionBlock();"/>
</fieldset>
</div>
<div id="edit" style="display:none;">
<fieldset>
<label>Company Name: </label>
<input type="text" id="companyNameText" />
<label>Company Country: </label>
<input type="text" id="companyCountryText" />
<input type="button" value="Ok" onclick="hideEditionBlock();"/>
</fieldset>
</div>
</body>
</html>
You should assign the innerHTML of the labels to the values of the inputs. In plain ol' Javascript you can do something like:
document.getElementById("companyNameText").value =
document.getElementById("companyNameLabel").innerHTML;
document.getElementById("companyCountryText").value =
document.getElementById("companyCountryLabel").innerHTML;
Using jQuery, this is the same:
$("#companyNameText").val($("#companyNameLabel").html());
$("#companyCountryText").val($("#companyCountryLabel").html());
Related
If someone puts a checkmark, I want to get the data-price attribute. Nothing is appearing in the console.log. I tried using .prop('checked'), .data('checked'), and .attr('checked'). I am assuming something is wrong with the Syntax?
This articleGet data-price jquery code as below does not seem to work:
$(document).ready(function(){
if $('#pizzaOption').click(function() {
var price=$(this).data('price');
console.log(price);
});
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
Used this article to no success. https://medium.com/js-dojo/check-if-a-checkbox-is-checked-with-jquery-2843f97d4954 Code is below:
<script type= text/javascript>
$(document).ready(function() {
if ($('input[type=checkbox]').attr('checked') {
var price=$(this).data('price');
console.log(price);
}
}
</script>
You have lots of mistake in your code.
$(document).ready(function(){ {
if $('#pizzaOption').click(function() {
var price=$(this).data('price');
console.log(price);
});
You have { { in callback function of $(document).ready() and it is not closed with }); And you have if in your click event which results syntax error.
In your second code
<script type= text/javascript>
$(document).ready(function() {
if ($('input[type=checkbox]').attr('checked') {
var price=$(this).data('price');
console.log(price);
}
}
</script>
You have checked the attr('checked') but there is no event binded on it and will always result false because no checkbox is checked onload event and $(this).data('price'); is undefined because data-price on the parent element of the clicked checkbox.
And you have click event on '#pizzaOption' according to your question you need to bind the click event on checkbox here is an example:
$(document).ready(function(){
$('#pizzaOption>input[type="checkbox"]').click(function() {
var price=$(this).closest("#pizzaOption").data('price');
console.log(price);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
Another example:
$(document).ready(function(){
$('#pizzaOption>input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
var price=$(this).closest("#pizzaOption").data('price');
console.log(price);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
<form action="" id="pizzaOptions" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
<script>
// wait until document is ready
$(document).ready(function(){
// For every checkbox checked inside form
$('#pizzaOptions input[type="checkbox"]').click(function(){
// display value
console.log($(this).val())
// now if you want to get the price you should
console.log($('#pizzaOptions').attr('data-price'))
})
})
Here is my html and javascript, want to auto check on click of button and oncheck want to trigger some more actions. Tried with 'click' and 'change' event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#4').on('click', function(){
$('#1').prop('checked', true).trigger('click');
$('#2').prop('checked', true).trigger('click');
});
$('#1').on('click', function(){
if($('#1').is(':checked')){
$('#3').prop('disabled','disabled');
}
else{
$('#3').prop('disabled','');
}
});
});
</script>
</head>
<body>
<label>
<input id="1" type="checkbox" value="">Yes</label><br><br>
<label>
<input id="2" type="checkbox" value="">NO</label><br><br>
<label>
<input id="3" type="text" value="Hello World">Yes</label><br><br>
<input id="4" type="button" value="Submit"/><br><br>
</body>
</html>
Something like this should get you started.
var onYesChecked = function() {
if($('#1').is(':checked')){
$('#3').prop('disabled',true);
} else{
$('#3').prop('disabled',false);
}
};
var onNoChecked = function() {
// your NoChecked logic here
};
$(document).ready(function(){
$('#4').on('click', function(){
// `.prop('checked', true)` will check the checkbox.
// Triggering click will immediately uncheck the checkbox
// (simulating a user click).
// $('#1').prop('checked', true).trigger('click');
// $('#2').prop('checked', true).trigger('click');
$('#1').prop('checked', true);
$('#2').prop('checked', true);
onYesChecked();
onNoChecked();
});
$('#1').on('click', onYesChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input id="1" type="checkbox" value="">Yes
</label>
<br><br>
<label>
<input id="2" type="checkbox" value="">NO
</label>
<br><br>
<label>
<input id="3" type="text" value="Hello World">Yes
</label>
<br><br>
<input id="4" type="button" value="Submit"/>
I want to start a form base HTML page.
My goal of this is to have the second inbox autofill based on the user input for the first input. I've looked at guides and this is the script I've wrote but it's not working. I was working what's wrong with it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("#Dnumber").keyup(function(){
update();
});
function update() {
$("#Dnumber1").val($('#Dnumber').val());
}
</script>
<div class="input1">
District Number: <input type="number" id="Dnumber" name="Dnumber"/> <br>
</div>
<div class="input1">
District Number: <input type="number" id="Dnumber1" name="Dnumber1"/> <br>
</div>
User can change #Dnumber .value using arrows, use input event.
<div class="input1">
District Number: <input type="number" id="Dnumber" name="Dnumber" /> <br>
</div>
<div class="input1">
District Number: <input type="number" id="Dnumber1" name="Dnumber1" /> <br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript">
var dn = $("#Dnumber"),
dn1 = $("#Dnumber1");
dn.on("input", function() {
update();
});
function update() {
dn1.val(dn.val());
}
</script>
You had script tags in the js part of the snippet
$("#Dnumber").keyup(function() {
update();
});
function update() {
$("#Dnumber1").val($('#Dnumber').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input1">
District Number: <input type="number" id="Dnumber" name="Dnumber" /> <br>
</div>
<div class="input1">
District Number: <input type="number" id="Dnumber1" name="Dnumber1" /> <br>
</div>
I am trying to use a checkbox to clear a form but I do not want the reset to clear the checkbox itself. The code I am using is as follows:
<input name="no_cage" id="no_cage" type="checkbox" value="1" onclick="this.form.reset();">
When I click on the checkbox it clears the form fine but unfortunately, also clear itself too.
The checkbox also updates a db with a 1 if checked or a 0 if unchecked. So I need it within the form and it needs to be able to toggle between checked and unchecked.
There are two ways to do this:
Create a javascript function to reset the form and then check the checkbox again to true.
Using JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
if(this.checked) {
document.getElementById("client").reset();
this.checked = true;
}
});
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" value="1"> CLEAR
</form>
Using Javascript:
<script type="text/javascript">
function clearform(){
if (document.getElementById("no_cage").checked == true){
document.getElementById("client").reset();
document.getElementById("no_cage").checked = true;
}
}
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" onclick="javascript:clearform();"> CLEAR
</form>
OR,
keep the checkbox out of the form
<script type="text/javascript">
function clearform(){
document.getElementById("client").reset();
}
</script>
<form id="client">
<input type="text">
</form>
<input id="no_cage" type="checkbox" value="1" onclick="javascript:clearform();"> CLEAR
I don't know if you want it this way, but I change the code that if checkbox is checked than clear form else it won't. Here the code
<form id ="myForm" name = "test">
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
</form>
<input name="no_cage" id="no_cage" type="checkbox" onclick="resetForm()">
<script type="text/javascript">
function resetForm()
{
if (document.getElementById("no_cage").checked == true)
{
document.getElementById("myForm").reset();
}
}
</script>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="checkbox" id="box"onclick="myFunction()" value="Reset form">reset
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
document.getElementById("box").checked = true;
}</script>
hope it helps
How can I display the value of a radio button in a form text box? I'd like it to change when the radio button is clicked.
Here is my radio buttons:
<input type="radio" name="testPassed" id="TestPassed" value="TestPassed">
<input type="radio" name="testFailed" id="TestFailed" value="TestFailed">
The text box:
<textarea name="description" cols="50" rows="5" id="description">Test Status: radioButtonValueHere </textarea>
Many thanks
Well, you can implement an OnClick function with your radio button like this: <input type="radio" name="sports" value="Football" onClick="doSomething();"> or you can have a function to iterate through all the radio buttons on your form and whichever is checked, will fill the textbox with your value:
<form name="myform">
<input type="text" id="txt" />
...
<script type="text/javascript">
for (i=0; i<document.myform.sports.length; i++)
if (document.myform.sports[i].checked==true)
{
t =t +document.myform.sports[i].value
}
}
document.getElementById("txt").value=t
You can write a function that will pass the result value to the text area:
<head>
<script type="text/javascript">
<!--
function writeResult(text){
document.myform.testResultDescription.value = text;
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="testResults" id="TestPassed" value="TestPassed" onclick="writeResult('Test Passed');" />
Test Passed<br />
<input type="radio" name="testResults" id="TestFailed" value="TestFailed" onclick="writeResult('Test Failed');" />
Test Failed<br />
<textarea name="testResultDescription" cols="50" rows="5" id="testResultDescription"></textarea>
</form>
</body>
With jQuery this is really simple
HTML
<div id="radiobuttons">
<--! put here radios buttons -->
</div>
$("#radiobuttons input:radio").click(function() {
$("textbox_id").val($(this).val());
});