I have two input fields, and I'm trying to get their values using jquery by clicking a button. It seems like a very simple operation, but for the life of me I can't get it to work. Here is the code snippet:
Name: <input type="text" id="name" value="test1"><br>
Message: <input type="text" id="line" value="test2"><br>
<button id="submitButton">Submit</button>
<script>
name1 = $("#name").val();
line1 = $("#line").val();
$("#submitButton").click(function(){
alert("Name: " + name1 + "\nMessage: " + line1);
});
</script>
If I don't specify the value, the alert returns with undefined for both variables. If I change the values of the input and click the button, it still says test1 and test2. There has to be something simple that I'm missing here, anyone know what it is?
In your code, you fetch the values when the script is initialized, and then reference the value they had at that point in your click function rather than fetching the current value.
Try:
$("#submitButton").click(function(){
name1 = $("#name").val();
line1 = $("#line").val();
alert("Name: " + name1 + "\nMessage: " + line1);
});
name1 = $("#name").val()
creates a new string variable name1 that has the value of $("#name").val() as it is at the moment. .val() does not get called each time you try to access name1. The simplest thing to do would just be to use $("#name").val() instead.
http://jsfiddle.net/wTvku/
As mentioned in other answers, the problem is that you are precomuting the variables and expecting them to magically change. However I would strongly suggest using Vanilla JS
document.getElementById('submitButton').onclick = function() {
var name1 = document.getElementById('name').value,
line1 = document.getElementById('line').value;
alert("Name: " + name1 + "\nMessage: " + line1);
};
you should wrap your code within document.ready() event...
$(document).ready(function() {
name1 = $("#name").val();
line1 = $("#line").val();
$("#submitButton").click(function(){
alert("Name: " + name1 + "\nMessage: " + line1);
});
// Handler for .ready() called.
});
You've set variable values outside of the click function. To the value is set on page load, not whenever you run the function. Try this:
Name: <input type="text" id="name" value="test1"><br>
Message:
Submit
$("#submitButton").click(function(){
name1 = $("#name").val();
line1 = $("#line").val();
alert("Name: " + name1 + "\nMessage: " + line1);
});
Related
I want to give a name to my dynamically created textbox on a specific event.
I have written the following code where the function GenerateTextBox returns the name of the textbox and the value "". The textbox is generated by but the name does not get assigned.
This is to use the name as a reference to the textbox in another php file.
Jquery code for generating textbox:
function GenerateTextbox(value,name1) {
return '<input name = "'+ name1 + '" type="text" value = "' + value + '" /> ';
}
Calling the function:
$("#t11, #t12").click(function(){
var div = $("<div />");
div.html(GenerateTextbox("", c1));
$("#TextBoxContainer").append(div);
});
The php output file is showing the error that c1 is an undefined index...
How do I solve this problem?
Change c1 to "c1". c1 refers to a variable named c1 (which you have not defined) whereas "c1" refers to a String.
div.html(GenerateTextbox("", "c1"));
Working Code:
function GenerateTextbox(value,name1) {
return '<input name = "'+ name1 + '" type="text" value = "' + value + '" />';
}
$("#t11, #t12").click(function(){
var div = $("<div>");
div.html(GenerateTextbox("", "c1"));
$("#TextBoxContainer").append(div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="t11">Create Textbox</button>
<div id="TextBoxContainer"></div>
I added textbox value as Baker's Basket, Pune, Maharashtra, Indiasd but on click event in textbox it only shows Baker's
I want to display whole text Baker's Basket, Pune, Maharashtra, Indiasd in the textbox.
JS FIDDLE EXAMPLE
// Try to Enter text given bellow
//Baker's Basket, Pune, Maharashtra, Indiasd
$("#clk").on('click', function () {
$("#cnt_div").empty();
var getTxt = $("#txt_n").val();
var addContent = "<input type='text' value=" + getTxt + " />";
$("#cnt_div").append(addContent);
});
without editng addContent variable
Edited:
JS FIDDLE SAMPLE TWO
$("#clk").on('click', function () {
var gData1 = $("#txt_1").val();
var gData2 = $("#txt_2").val();
var gData3 = $("#txt_3").val();
var cnt_1 = "<span class='lbl_normal_mode'>" + gData1 + "</span><input class='txt_edit_mode' value=" + gData1 + " type='text'/>";
var cnt_2 = "<span class='lbl_normal_mode'>" + gData2 + "</span><input class='txt_edit_mode' value=" + gData2 + " type='text'/>";
var cnt_3 = "<span class='lbl_normal_mode'>" + gData3 + "</span><input class='txt_edit_mode' value=" + gData3 + " type='text'/>";
var content_Data = "<div class='chunk_div_holder'><div style='float:left:width:100%'>" + cnt_1 + "</div><div style='float:left:width:100%'>" + cnt_2 + "</div><div style='float:left:width:100%'>" + cnt_3 + "</div></div>";
$(".dynmic_cntt").append(content_Data);
});
You should better append the element and its properties dynamically as an object:
$('<input>', {
type: 'text',
value: $("#txt_n").val()
}).appendTo($("#cnt_div").empty());
This will solve the problem of extra spaces (no quotes for value=Baker's Basket), wrong string escape (if the value will have quotes) for value attribute and other caveats.
N.B.: There is no textbox type for <input> element. It should be text instead.
DEMO: http://jsfiddle.net/ZyMCk/11/
Add the field in two stages:
add the field as you are already
set the value of the field using .val()
It is because you aren't escaping ' single quote.
Instead you can replace
this line
var addContent="<input type='textbox' value='"+getTxt+"' />";
with
var addContent=$("<input type='textbox' />").val(getTxt);
or
var addContent="<input type='textbox' value=\""+getTxt+"\" />";
Value attribute should enclose in quotes. In your case, its better to use double quotes, because Baker's Basket, Pune, Maharashtra, Indiasd already have a single quote in it.
$("#clk").on('click',function(){
$("#cnt_div").empty();
var getTxt=$("#txt_n").val();
var addContent="<input type='textbox' value=\""+getTxt+"\" />";
$("#cnt_div").append(addContent);
});
Fiddle
Edit
$("#clk").on('click',function(){
$("#cnt_div").empty();
var getTxt=$("#txt_n").val();
var addContent=$("<input/>",{type:"text",value:getTxt});
$("#cnt_div").append(addContent);
});
Updated fiddle
change "+getTxt+" to '"+getTxt+"'
fiddle
OR
change "+getTxt+" to \""+getTxt+"\"
Heres a better way of doing this...
var addContent=$("<input type='textbox' />").val(getTxt);
http://jsfiddle.net/ZyMCk/9/
Basically, if creating an element to append to the DOM your better off doing this as a jQuery object. This way we can take advantage of methods such as val() for adding the value.
UPDATE
Ive simplified things a bit for you...
JSFIDDLE: http://jsfiddle.net/ZyMCk/22/
$("#clk").on('click', function () {
$('.dynmic_cntt').empty();
$('.form-text').each(function(){
var $div = $('<div style="float:left:width:100%;"></div>');
var $span = $('<span class="lbl_normal_mode">'+ $(this).val() +'</span><input class="txt_edit_mode" value="'+$(this).val() +'" type="text"/>');
$('.dynmic_cntt').append( $div.append( $span ) );
});
});
I know this is probably simple, but how do you update a text based on a user's input?
For example, I have an email template that starts out like this:
*Greetings,
My name is __ and I'm the author of ___ which is available on Amazon.com.*
I would like to create some simple input fields for the user to insert their name and the title of their book. There are several more inputs as well. I would just need the final output to give them the full text of the template with their own info inserted in the right places, based on what they submit.
What is the easiest and simplest way to accomplish this? Thank you in advance.
If you don't find an easer way you can use jQuery:
$(document).ready(function() {
$('.my-inputs').each(function() {
$(this).on('keyup', function() {
var name = $('#name').val() == '' ? '___' : $('#name').val();
var book = $('#book').val() == '' ? '___' : $('#book').val();
$('#result').html("*Greetings, My name is " + name + " and I'm the author of " + book + " which is available on Amazon.com.*");
});
});
});
http://jsfiddle.net/XEzBw/
Use this.
$('button').click(function () {
var str = 'Greetings, My name is ' + $('#name').val() + 'and I\'m the author of ' + $('#book').val() + ' which is available on Amazon.com.';
$('#template').html(str);
});
Demo: http://jsfiddle.net/7bLJK/
Seems that you are you searching for a simple format method, and for this you have to use any plugin.
Otherwise:
<input type="text" id="inputName"></input>
<input type="text" id="inputAuthor"></input>
var name = $('#inputName').val();
var author = $('#inputAuthor').val();
var t = "*Greetings, My name is " + name + " I'm the author of " + author + " which is available on Amazon.com.";
You can try DEMO here.
I have a textbox for users to enter a new email address. I have a button that calls a script. In the script I need to access several different elements of the page. The first couple of elements, that were sent as parameters to the page (via PHP) work fine, but I do not get the right result when I try to get the value of the text box.
This is my HTML:
<p>Please enter the new email</p>
<input type="email" id="newemail" value="enter new email here">
and this is my JS:
var userid=$('#userId').val();
var oldEmail=$('#useremail').val();
var newEmail=$('#newemail').val();
//I have also tried with var newEmail=document.getElementById("newemail").value
//with no difference in the result
alert(userid + " " + oldEmail + " " + newemail);
The alert prints out :
5 Sammy [object HTMLInputElement]
I note that it is printing neither the old value of the text box nor the new value which the user entered. How to I get it to get that value?
Javascript is case sensitive. newemail should be newEmail.
When referencing newemail you are accessing window.newemail which will by default return the DOM element with ID newemail. Calling .toString() on that DOM element produces [object HTMLInputElement].
Change the alert to:
alert(userid + " " + oldEmail + " " + newEmail);
The variable is newEmail, but in alert you are using newemail, they are case sensitive.
Then how newemail is working, because since it is the id of an element the property will be added as a window elements property
replace
alert(userid + " " + oldEmail + " " + newemail);
by
alert(userid + " " + oldEmail + " " + newEmail);
Is it possible that there is a typo?
alert(userid + " " + oldEmail + " " + newemail);
doesnt fit the variable declarations:
var newEmail=$('#newemail').val();
I want to make a function and call that function on the click of a button. There are many guides on the internet to do this but it just didn't work. (I'm a beginner)
<script type = "javascript/text">
var name = function()
name = prompt ("Who are you?", "");
alert ("hello" + " " + name);
</script>
How do i call "name"?
I changed your code into this:
<script>
var name = prompt ("Who are you?", "");
alert ("hello" + " " + name);
</script>
This should work. You don't even need a function here.
But if you want to store a function in a variable and then call it, just do:
var myFunction = function() {
// function body
}
myFunction(); // calling it!