i'm trying to use the following code to insert test into a field without id
$(document).ready(function(){
$("#insert").click(function(){
$("#gfield_list_cell gfield_list_356_cell2").val("TEST");
});
});
<td class="gfield_list_cell gfield_list_356_cell2" data-label="FIRST"><input type="text" name="input_356[]" value="" tabindex="14"></td>
<p><input id="insert" name="test" type="button" value="test" /></p>
your selector is ID selector, not a CLASS selector
$(document).ready(function(){
$("#insert").click(function(){
$(".gfield_list_cell gfield_list_356_cell2").val("TEST");
});
});
should work.
or if you want to change the value of the INPUT TYPE="text" you should do:
$(document).ready(function(){
$("#insert").click(function(){
$(".gfield_list_cell gfield_list_356_cell2").children().val("TEST");
});
});
$(document).ready(function(){
$("#insert").click(function(){
$("#testing").val("TEST");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<td class="gfield_list_cell" data-label="FIRST"><input id="testing" type="text" name="input_356[]" value="" tabindex="14"></td>
<p><input id="insert" name="test" type="button" value="test" /></p>
You can achieve that by specifying the classes of your td tag and the input field inside it, to be more specific (considering you do not have any other input inside the td).
$(document).ready(function() {
$("#insert").click(function() {
$(".gfield_list_cell.gfield_list_356_cell2").children("input").val("TEST");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="gfield_list_cell gfield_list_356_cell2" data-label="FIRST"><input type="text" name="input_356[]" value="" tabindex="14"></td>
</tr>
<table>
<p><input id="insert" name="test" type="button" value="test" /></p>
I hope this helps you.
Good luck.
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'))
})
})
Anyone can teach me how to make input button onlick when press the keyboard "Enter" ?
What i have study from web is something like this , but it's does't work when i press enter from keyboard . Anyone can show me how ??
<input type="text" id="info" name="info" />
<input type="button" id="bn" name="bn" value="click" onclick="read()" />
<script>
$(document).ready(function(){
$('#info').keypress(function(e){
if(e.keyCode==13)
$('#bn').click();
});
});
function read()
{
// do smth
}
</script>
Try this code:
<input type="text" id="info" name="info" />
<input type="button" id="bn" name="bn" value="click" onclick="read()" />
<script>
$(document).ready(function(){
$('#info').keyup(function(e){
if(e.keyCode==13)
$('#bn').trigger("click");
});
});
function read()
{
alert('clicked')
}
</script>
I am adding fiddle : http://jsfiddle.net/nzu27rw4/1/
make sure that you have added jquery reference on the top of this script
$(document).ready(function(){
$('#info').keypress(function(e){
if(e.keyCode==13)
$('#bn').click();
});
});
function read()
{
alert('read')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="info" name="info" />
<input type="button" id="bn" name="bn" value="click" onclick="read()" />
I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!
If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/
Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO
There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});
First tentative steps into client side. I'm having trouble finishing the following. My question is how do I return the value of a function in a HTML statement ...
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>
</body>
I'd appreciate your help
Thanks in advance
G
<head>
<script language="Javascript">
function checkjava() {
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php"
method="get"
name="your_form"
onsubmit="this.answer.value=checkjava();">
<input type="hidden" name="answer">
<input type="submit" value="click me">
</form>
</body>
No need for the id attribute.
<form action="enabled_catch.php" method="get" name="your_form" >
<input type="HIDDEN" name="answer" value="RETURN checkjava() HERE")>
<input type="submit" onclick="document.getElementById('answer').value=checkjava();" value="click me">
You would do something like that:
<script language="Javascript">
function checkjava()
{
return 1
}
</script>
</head>
<body>
<form action="enabled_catch.php" method="get" name="your_form" onsubmit="document.getElementById('answer').value=checkjava();">
<input type="HIDDEN" id="answer" >
<input type="submit" value="click me">
</form>
</body>
Basically on form submit you would set the value of the answer input to the result of the function call.
EDIT: placed onsubmit on the wrong element before (embarrassing).
I would have an id on the answer tag and then do it in the form onsubmit event.
Something like:
<form onsubmit="document.getElementById("answerId").value = checkJava()" action="enabled_catch.php" method="get" name="your_form">
<input type="HIDDEN" name="answer" id="answerId" value="RETURN checkjava() HERE")>
<input type="submit" value="click me">
</form>
Browser-side scripting is event driven. Unless an event is triggered, nothing happens.
You could listen to the click event on your submit button, and then manipulate the value of your hidden field:
<input type="hidden" id="answer" name="answer" value="")>
<input type="submit" value="click me"
onclick="document.getElementById('answer').value = checkjava();">
Note how we had to give an id to the hidden field, in order to be able to reference it with getElementById().
Also note that JavaScript is case sensitive: checkjava() and checkJava() are not the same.
<script>
document.your_form.answer.value = checkjava();
</script>
Unless you want to use a fancy JS library. =)