Getting text input in html and transferring to javascript [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I understand how to use input into html to call javascript defined in the same directory as the html ex:
<input type="button" value="Submit" onclick="someFunc(500)" >
so if the button is clicked the java script will run someFunc(500), is there a way to take text input, and when a button is pressed use this input as a parameter value for the java script? I know this won't work and I'm not even defining a button, but something like
<input type="text" id= "example" onclick="someFunc(this.value)">
where example is the data that was put into the input text field?

What about using a listener?
var example = document.getElementById("example");
example.onclick = function(){
someFunc(example.value);
}

You can do this with jQuery: See this jsfiddle
HTML:
<input type="text" id="example" value="12345">
JavaScript:
$('#example').on('click',function() {
console.log($(this).val()); // 12345
});
The HTML 5 Recommended way, is to use data-* attributes. Like this:
HTML:
<div id="example2" data-product-id="my-product-1"></div>
<button id="getProductId">Get Product Id</button>
JavaScript:
$('#getProductId').on('click',function() {
console.log($('#example2').attr('data-product-id')); // my-product-1
});

<script type="application/javascript">
function someFunc() {
var value = document.getElementById('example').value;
// do something with value here
return false;
}
</script>
<input type="text" id="example">
<input type="button" value="Submit" onclick="someFunc()" >

Related

I had tried to add gstamount+total but its not adding [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
var gstper=document.getElementById('gstper').value
var total=document.getElementById("totalamount").value;
var gstamount = gstper*total/100;
document.getElementById('gstamount').value= gstamount;
document.getElementById('gsttotal').value=gstamount+total;
this is my source code which was i tried.
<!DOCTYPE html>
<html>
<body>
Value1: <input type="text" id="myvalue1" value="">
Value2: <input type="text" id="myvalue2" value="">
<p id = "myText"></p>
<p>Click the button to change the value of the text field.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
v1 = parseInt(document.getElementById("myvalue1").value);
v2 = parseInt(document.getElementById("myvalue2").value);
document.getElementById("myText").innerText = v1+v2;
}
</script>
</body>
</html>
If you are setting the final value in html element like paragraph,heading tag then use .innerText or .innerHTML and if you are using another input text box to display then only use .value attribute with document.getElementById().
Do you parse your input value? Because your "document.getElementById('gstper').value" return a string, so try with this:
let gstper= parseInt(document.getElementById('gstper').value);
let total=parseInt(document.getElementById("totalamount").value);
let gstamount = gstper*total/100;
document.getElementById('gstamount').value= gstamount;
document.getElementById('gsttotal').value=gstamount+total;
2 more things:
1) you missed a ";" after the first line
2) use "let" instead of var, is safier

How to write that html structure in java script? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
how to write that html structure in java script,
<table>
<tr>
<td>
<form>
<input type="file"></input></td>
<td><input type="submit"></input></td>
</form>
</table>
Try with following and add this before end of the html tag.
<script>
var myForm = document.createElement("form");
myForm .setAttribute('method',"post");
myForm .setAttribute('action',"submit.php");
var myInput = document.createElement("input");
myInput .setAttribute('type',"file");
myInput .setAttribute('name',"somename");
var formSubmit = document.createElement("input");
formSubmit.setAttribute('type',"submit");
formSubmit.setAttribute('value',"Submit");
myForm .appendChild(myInput);
myForm .appendChild(formSubmit);
document.getElementsByTagName('body')[0].appendChild(myForm);
</script>
This question does not show any research work done and also not specific question to understand.
Still if you want to display the content using javascript(render control from javascript) here is the code that will help you.
var strings = "<table><tr><td><form><input type='file'></input></td><td><input type='submit'></input></td></form></table>";
document.write(strings);
Assume you need to append your html code to inside a div called #my_div_id then use following code. (I have used your html code inside my method)
You should import jQuery library to this solution work.
function appendMyCode(){
$("#my_div_id").html("\
<table>\
<tr>\
<td>\
<form>\
<input type=\"file\"></input></td>\
<td><input type=\"submit\"></input></td>\
</form>\
</table>\
");
}
output will be, html table you used will append to my_div_id div.
I have used "\" character for detect line endings inside a string.
because your html code should pass to .html() method as a string

I need to populate the value of a text field [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
The value of universal_leadid is populated on every refresh and it come from a script related to a 3rd party Lead verification service (leadid.com). The objective for me is to post the other6 field value the same as the value assosiated with universal_leadid field.
HTML:
<input type="hidden" name="Other6" value="">
<input type="hidden" name="universal_leadid" value="KFLS00-D254-DD521-GF52-GHT554125" id="leadid_token">
Lead Id value is populated by lead id but I can't get value of the Other6 field.
This is what I have tried and the result is blank or nothing:
$( document ).ready(function() {
$('[name=Other6]').val($('[name=universal_leadid]').val());
//alert(universal_leadid);
//console.log($('[name=universal_leadid]'));
//console.log($('[name=universal_leadid]').val());
//console.log($('[name=Other6]').val());
$('#salutation').attr('checked',false);
//var myValue = $( "#leadid_token" ).val();
//document.getElementById('leadid_token');
//var x = document.getElementById("leadid_token").value;
//alert(x); // Showing Empty alert box
});
The result I want, is that every value populated on universal_leadid need to go to Other6 field
Your both the input fields are hidden
Please use
<input type="text" name="Other6" value="">
<input type="text" name="universal_leadid" value="KFLS00-D254-DD521-GF52-GHT554125" id="leadid_token">
Working Fiddle
Try this :
var token = $("#leadid_token").val();
$("input[name=Other6]").val(token);
console.log($("input[name=Other6]").val());
http://jsfiddle.net/8rw9cep6/

How to check input is more than place holder [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a input field like this
<input type="number" id="return_pro" name="available" placeholder="10 Available">
Here if user enter a value more than 10 (That is available), it should not accept and should show an error. How can I do that? I need to use this with the input tag itself. Because text fields comes inside an foreach loop. So number of text fields may increase.
HTML:
<input type="number" id="return_pro" name="available" placeholder="10 Available" onblur="check(this)">
Javascript:
<script>
function check(obj){
var val=obj.placeholder.split(" ")[0];
if(obj.value > parseInt(val)){
alert('invalid');
obj.value="";
obj.focus();
}
}
</script>
The placeholder is just what it says it is, a place holder and has no validation associated.
what you are looking for is some kind of validation, either by javascript/jquery or server side with PHP.
I suggest using a tutorial to learn how validation works like this one here as learning will be infinitely more valuable for the future, than simply copy and pasting some code that people provide on stack overflow.
<input type="number" id="return_pro" name="available" placeholder="10 Available">
<input type="button" value="ok" id="submit"/>
$(function(){
var placeholder=$("#return_pro").attr("placeholder");
var available=parseInt(placeholder.replace(" available",""));
$('#submit').click(function(){
var val=$("#return_pro").val();
if(val>available)
alert("Sorry");
});
});
I think This is actually you looking for.
DEMO HERE
with jQuery
$("#return_pro").keypress(function(){
var intValue = parseInt($(this).val());
if(intValue > 10) {
//value more more then 10, do something
}
});
$('#return_pro').keyup(function(){
var max = $(this).attr('placeholder').match(/[0-9]+/);
if(parseInt($(this).val())>parseInt(max)){
alert('Only '+max+' available');
}
});
DEMO: http://jsfiddle.net/uQH64/

Error in JavaScript OR jQuery select element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
jQuery:
$("#div td").live("click", function(){
alert("Hellow");
});
JavaScript:
function alertH(){
alert("Hellow");
}
HTML jQuery:
<div>
<td>
<a>X</a>
<span> HI! </span>
</td>
</div>
Click on td and runs the jQuery function, but only if you click on td and not other tags inside, as in jQuery?
HTML JavaScript:
<div>
<td onClick="alertH()">
<span> Hummm </span>
<a> Delete </a>
</td>
</div>
How do in JavaScript, and it only runs if you click directly on td and not in other html tags inside
Performs this function only if you click the div function and not in other tags inside the div. How do the two methods above?
One way to do it is by adding the code on each element you dont want to call a function
onClick="event.cancelBubble = true;"
Another way is to check in the callback called to see the Target there.
<div onClick="test()" id="run">
Click Works<br>
<label>Not Work</label>
</div>
function test(){
if (event.target.id !== "run") return false;
alert(event.target);
}

Categories

Resources