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.
Related
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()">
How to add arguments in a form action using input type="hidden".
My HTML snippet...
<form id="form1">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
My JavaScript snippet...
function add()
{
document.getElementsByName('usID').value=789;
document.getElementsByName('usname').value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
After entering "text" in the textbox and pressing ADD, the link looks like this...
http://localhost:3000/page?txt=text&usID=123&usname=name1
Why hasn't the usID and usname changed to 789 and "name2" respectively?
Any other alternative if not this?
getElementsByName is going to return a collection of html elements (NodeList), not a single html element. meaning the return value doesnt have a value attribute that will change the input. you need to either give them an id and find them with getElementById and then change the value, or grab the first element of your collection
document.getElementsByName('usname')[0].value="name2";
or (preferred way)
<input type="hidden" name="usname" value="name1" id="usname"/>
function add(){
document.getElementById('usname').value="name2";
...
}
though i have to ask, is there a reason you're changing the hidden field element like this?
this help you :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function add()
{
var usID = document.forms["frm"]["usID"];
var usname = document.forms["frm"]["usname"];
usID.value=789;
usname.value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
</script>
<h3>Please select the <span>first letter</span> of your <span>last name</span>: </h3>
<form id="form1" name="frm">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
</body>
</html>
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/
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);
});
I'm using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.
Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.
I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.
If the sole purpose is to encode simple text into URL format then use encodeURIComponent().