want to create an output of gathered variables from a script. but can't seem to input the variables in HTML markup in the script.
$(".regclick3").click(function(){
$('.regtarget4').trigger('click');
var data1 = $("[name='f_k_page_title']").val();
var data2 = $("[name='f_extended_user_email']").val();
$(".divoutput").html(data1+ " " + data2);
});
html
<form>
<input type="text" name="f_extended_user_email" />
<input type="text" name="f_k_page_title" />
</form>
<div class="capture_data">Capture</div>
<div class="divoutput"></div>
Is it possible to add class and variables to the script? Can there be if statements, so if var data1 exists then display "X"
Thank you
According to your comment yes you can show HTML only if it exists otherwise something default like so:
function showMe()
{
var theVal = $('#name').val();
if(!theVal)
{
theVal = "Oop's No value entered";
}
$('#theValue').html(theVal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<br/>
The value is :: <span id="theValue"></span>
<br/>
<button onClick="showMe();">Show Me</button>
$(".divoutput").html(data1+ " " data2+);
// Yah! its possible what your missed + symbol in your code use like below https://codepen.io/kalaiselvan/pen/xdoWYy
$(".divoutput").html(data1+ " " + data2);
Related
I have a php script that creates a number of inputs whose ID's are in an array. I am trying to check the value in the clicked one but it fails due to the selector being an array, I think. The code I'm using is below. The amt var is undefined. If I change the code to not use arrays, it works. Is there a way to access an ID that is an array element? Here is my jsfiddle.
$(".map-price").keyup(function(event) {
var id = event.target.id;
var amt = $("#" + id).val();
console.log(id + ' ' + amt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="input" name="map_price[1]" id="products_map_price[1]" class="map-price">
</div>
<div>
<input type="input" name="map_price[2]" id="products_map_price[2]" class="map-price">
</div>
You can pass the whole element into jquery:
$(".map-price").keyup(function(event) {
var amt = $(event.target).val();
console.log(event.target.id + ' ' + amt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="input" name="map_price[1]" id="products_map_price[1]" class="map-price">
</div>
<div>
<input type="input" name="map_price[2]" id="products_map_price[2]" class="map-price">
</div>
Please let me know why this doesn't work and how I can achieve this as simple as possible. my professor wants the simplicity to reflect 15 minutes or work. I just don't grasp it though. Thanks in advance!
<script language="JavaScript">
var obj = {
name = "",
address = "",
ccNumber = "",
}
function printObj() {
document.getElementById("display").innerHTML = obj.name + " " + obj.address + " " + obj.ccNumber;
}
function storeInput(user_input1, user_input2, user_input3) {
name = document.getElementById("myObject").form.user_input1;
address = document.getElementById("myObject").form.user_input2;
ccNumber = document.getElementById("myObject").form.user_input3;
}
</script>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
</form>
<form>
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
</form>
<form>
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="obj.storeInput(user_input1, user_input2, user_input3);obj.showInput()"><br />
<p id='display'></p>
Ok! You need your storeInput() to reference the declared object. Currently with your code as it is storeInput() is an independent function but for you event handler (onclick) to work. You need to redefine the storeInput() as
obj.storeInput() = function(user_input1, user_input2, user_input3) {.....};
This will get the job done. It will not store the values, but will display them.
<!DOCTYPE html>
<html>
<body>
<form>
<label><b>Enter full name</b></label>
<input type="text" name="message" id="user_input1">
<label><b>Enter billing address</b></label>
<input type="text" name="message" id="user_input2">
<label><b>Enter CC number</b></label>
<input type="text" name="message" id="user_input3">
</form>
<input type="submit" onclick="aFunction();"><br />
<p id='display'></p>
<script>
function aFunction(){
var x = document.querySelector('#user_input1').value; // gets value of user_input1 field
var y = document.querySelector('#user_input2').value; // gets value of user_input2 field
var z = document.querySelector('#user_input3').value; // gets value of user_input3 field
document.querySelector('#display').innerHTML = x + ' ' + y + ' ' + z; // puts the values in <p> with id of 'display'
}
</script>
</body>
</html>
Hope this helps you understand.
So my dilemmna is that I don't know how to record what the user inputs. (my goal as of now is to simply print what the user enters in an input box, not to add the numbers)
var x = document.getElementById('textboxone').value;
Why isn't this working?
<!DOCTYPE html>
<html>
<head>
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">
//create skeleton divs
function createDivs () {
var s;
s = '<div class="simplebox" id="divBody">Bla 3 bla</div>';
document.write(s);
}
//create body skeleton
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div id="textboxone"><span>Add <input type="text" ></input></span></div>';
s += '<div id="textboxtwo"><span>To <input type="text" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}
</script>
</head>
<body>
<script Language ="JavaScript">
createDivs();
createBodyDivs('divBody');
</script>
</body>
</html>
Check out AngularJS my friend! :)
JSFIddle Demo
<div ng-app="">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
<div class="{{data.message}}"></div>
</div>
using: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
I've quickly checked the code and first of all you input button will not trigger addNumbers(form) since the onclick of the input doesn't point of that function.
Then for the function itself, document.getElementById('textboxone').value returns undefined because the actual value you want is in the <input> and not in the <div id="textboxone">
So if you have you're createBodyDivs function modified so that the id where on the input, then this document.getElementById('textboxone').value would actually return the correct value.
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
s += '<div><span>To <input type="text" id="textboxtwo" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
For the click binding, you button should be the following for it to work:
<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>
<html>
<head>
<script type="text/javascript">
function caluculate(x)
{
var temp=x+1;
var cn = document.getElementsByName(temp)[0].childNodes;
alert( "attribute name :"+cn[0].name + "attributevalue :" + cn[0].nodeValue );
}
</script>
</head>
<body>
<div id="fn1">
Enter your name: <input type="text" name="name" id="fn" onkeyup="caluculate(this.id)">
Enter your age: <input type="text" name="age" id="fa" onkeyup="caluculate(this.id)">
NAME + AGE :<input type="text" name="nameage" id="fname" value="">
</div>
</body> </html>
How to get div element values in Javascript?
I want to get the each values of input tag.
Please help me.
Try something like this.
HTML
<div id="fn1">
Enter your name: <input type="text" name="name" id="fn" onkeyup="caluculate()">
Enter your age: <input type="text" name="age" id="fa" onkeyup="caluculate()">
NAME + AGE :<input type="text" name="nameage" id="fname" value="">
</div>
JavaScript
function caluculate() {
var cn = document.getElementById("fn1").getElementsByTagName("input");
cn[2].value = "name: " + cn[0].value + ", age: " + cn[1].value;
}
Please try the following JavaScript function:-
function caluculate(x)
{
var ele = document.getElementById(x);
alert("attribute name: " + ele.name + ", attribute value: " + ele.value);
}
Since this JS function is always being called with the argument being the input element's ID, so there is no need to get / maintain the div element anywhere.
Hope it helps.
I have this form:
<form name="form" method="post">
<div>
<p>
Problem Name: <input type="text" size="20" name="problem_name"></input>
</p>
<p>
Explain the problem
</p>
<p>
<textarea name="problem_blurb" cols=60 rows=6 ></textarea>
</p>
</div>
<div>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
<input type="submit" class="button" value="Add Problem"></input>
</div>
<form>
and here is my JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function()
{
$("input[type=submit]").click(function()
{
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;
if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
I went through the basic jQuery tutorials, but still confused with their syntax. For some reason, these variables show up as undefined:
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
Any idea what I am doing wrong?
# refers to id attributes, rather than names.
Use $('input[name="problem_name"]') to refer to the elements.
Add id="problem_name" and id="problem_blurb" respectively. The jQuery '#' selector looks for id attributes.
You can have both id and name attributes. id is the DOM identifier while name is the form input identifier.
The hash-tag selector tells it to look for that ID. In your HTML you only have those tags with a name attribute. Put the same value in the id attribute and you will be all set.
<input id="problem_name" type="text" size="20" name="problem_name"></input>
<textarea id="problem_blurb" name="problem_blurb" cols=60 rows=6 ></textarea>
You would also try ID in your elements, which is the identifier for # in jQuery.
<input type="text" size="20" id="problem_name">
Which also go for your Button.
If you have <input type="button" ... id="bn"> you can replace "input[type=submit]" (which in your case will activate ALL submit buttons on the page) with $("#bn").click(function() { .. });.