Why this simple code not working on JSfiddle? - javascript

http://jsfiddle.net/dolours/Yazpj/577/ I can't figure out what is the issue with this js fiddle! why alert not showing up?
<input type='input' name='name' id='name' value="test" class='required' />
<input type="button" value="test" onclick="test()"/>
function test()
{
var testvalues = $('#name').val();
alert(testvalues);
}

You have to set jQuery in the library option since you are using jQuery in your code. jsfiddle.net/Yazpj/578/

Related

Sending form data to vanilla js

I am trying to send the result from a number input to a js function, and can't seem to make it work. I have tried with some answers from other questions in the site, but was still unable.
My code goes something like this:
<input type="number" name="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="how(example)">
<script type="text/javascript">
function how(example){
alert("example");
}
</script>
Thanks!
Give the id of your number input. May be it will useful.
<input type="number" name="example" id="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="how()">
<script type="text/javascript">
function how(){
var number = $('#example').val();
alert(number);
}
</script>
Use .value to get the value of a text/number input or textarea element.
const numInput = document.querySelector('input[type="number"]')
document.querySelector('input[type="button"]')
.addEventListener('click', () => {
console.log(numInput.value);
});
<input type="number" name="example">
<input type="button" value='click'>
Try to use addEventListener rather than HTML-inline-eval handlers, or on*-handlers; keeping all of your Javascript in the Javascript itself is helpful and is a good habit to get into.
This might help you (this code will make it so that it alerts the value in number):
function alertval(){
alert(document.getElementById("example").value);
}
<input type="number" name="example" id="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="alertval()">

Can't get value of radio buttons using jquery

I've got a series of radio buttons and a submit button:
<input type="radio" name="selectme_resubmit" id="selectme_resubmit1" value="first" /> <label for="selectme_resubmit1">Resubmit with the original submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit2" value="without" checked /> <label for="selectme_resubmit2">Resubmit without any submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit3" value="custom" /> <label for="selectme_resubmit3">Resubmit with a custom submitter:</label> <input type="text" name="selectme_custom_submitter" id="selectme_custom_submitter" /><br>
<input type="button" id="selectme_resubmit_button" name="selectme_resubmit2_button" value="Place a submit template" onclick="selectme_act(\'resubmit\')" />
I also have the following javascript (with jquery):
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
However, I get "undefined" in the console, even when I select something... what am I doing wrong?
I tested your code and the selector does work. The only issue I found was that you were escaping the ' character when it was not needed in the onclick event
you miss ready function
$().ready(function(){
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
});
please use ready function before your declaration
and check this link http://jsfiddle.net/FQGuu/

ajax label on click text

I want to display the content of a label in a text fieldwith onClick event how can I do it,
Is there any specific method to do it or is there any other way.
Please help I am new to ajax.
Thanks
NO need of ajax for this you can do this by using jquery instead simply
In html:
<input type="text" name="txt1" value="" id="txt"/>
<label for="checking" id="label">checking</label>
<input type="submit" name="submit" value="Click" id="butt" />
In Javascript:
$("#butt").click(function(){
var lab_val = $("#label").text();
document.getElementByID("txt").value =lab_val;
// or $("#txt").val(lab_val);
});

jquery in html injection

For example I have 2 input's and one button with attribute, where i wanna use input values, it may be something like this:
<input data-link="test?input1=$('#input1'.val())&input2=$('input2.val()')" />
--------------Mind reading mode on---------------------
You have;
<input id='input1' type='text'>
<input id='input2' type='text'>
<input id='input3' type='text'>
<button>Copy data</button>
$(document).ready(function(){
$('button').click(function(){
var string = "test?input1="+$('#input1').val()+"&input2="+$('#input2').val();
$('#input3').data('link', string);
});
});
fiddle here http://jsfiddle.net/bGTQJ/

Jquery accessing appended element id with another js script

Im trying to call a js function on a HTML element which I have appended to the page using JQUERY.
<body>
<div id='father'>
</div>
<input type="submit" value="choice one" onclick='choice_one()'/>
<input type="submit" value="choice two" onclick='choice_two()'/>
<input type="submit" value="choice three" onclick='choice_three()'/>
</body>
My jQuery is in a js function..
<script>
function choice_one(){
var container = "<div id='field'>
<form>
<input type="text" id='choice_one_answer' value="" />
<input type="submit" value="submit" onclick='answer_one()'/>
</form>
</div>";
$('ul#field').remove();
$("div#father").append(container);
}
function choice_two(){
var container = "<div id='field'>
<form>
<input type="text" id='choice_two_answer1' value="" />
<input type="text" id='choice_two_answer3' value="" />
<input type="submit" value="submit" onclick='answer_two()'/>
</form>
</div>";
$('ul#field').remove();
$("div#father").append(container);
}
</script>
So the third part is using the answers and with js then reloading anther field. Then loading another function --> new answer field.
<script>
function answer_one(){
var answer = document.getElementById('choice_one_answer');
do something with answer...
choice_two();
}
function answer_two(){
var answer_one = document.getElementById('choice_two_answer1');
var answer_two = document.getElementById('choice_two_answer2');
do something with answer...
choice_one();
}
other functions....
</script>
So when I try to call the js functions eg answer_one()/ answer_two() the function cannot grab the variable from the input Id's ---> i presume their is because the element were not loaded when the page loaded!
Is there a jQuery/ js workaround for this... any thoughts??
Is there a work around for something like this??
I think it's a good practice to append html in one line, like this:
var container = "<div id='field'><form><input type="text" id='choice_one_answer' value="" /><input type="submit" value="submit" onclick='answer_one()'/></form></div>";
Don't have the time to test anything, but the jQuery workaround for accessing inserted code is .live()
Why are you using jQuery but not using $()/jQuery() selector for selecting the element?
Try to comment out the //$('ul#id').remove() line and dupm $('ul#id').size() to console in order to know that your element exists.

Categories

Resources