jquery in html injection - javascript

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/

Related

passing value inputs from one to another with a text jquery

I would like to insert a number (example 1111) and after submitting get the output (command) like "access userid 1111 instance mbb"
The problem which i have is that the number should be into the text and also how to set the text properly.
See picture below:
This is what i have right now but not working as wished:
HTML:
<label for="number">number:</label>
<input type="text" name="number" id="number" />
<input type="submit" value="Submit">
<label for="output">output</label>
<input type="text" size="33px" name="output" id="output" />
JQuery:
$('#number').change(function() {
$('#output').val($(this).val());
});
Thank you so much for your support
Hope it helps.
$('#submit').click(function(){
var source = $('#source').val();
$('#target').val('Your val: ' + source + '. Enjoy :)');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="source">
<button type="submit" id="submit">Go</button>
<p>
<input type="text" id="target">
</p>

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()">

How to have array of fields with names?

I have a form like this :
<form>
<input type="text" name="employee[][name]"/>
<input type="text" name="employee[][name]"/>
</form>
And I use the result in a php file like this :
echo $_POST['employee'][0]['name'];
echo $_POST['employee'][1]['name'];
The fields are converted in arrays. It's a dynamic form, I can add or remove some fields so it is usefull to not have a fixed name for each fields.
I want to do the same thing in Javascript/JQuery. Is tried to do $('[name="employee[0][name]") and it return an empty array.
I don't know what to do. Is there a simple way to do this?
<html>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$('input[name^="employee[name]"]').each(function() {
alert($(this).val());
});
});
</script>
<body>
<form>
<input type="text" name="employee[name][]" value="value1"/>
<input type="text" name="employee[name][]" value="value2"/>
</form>
</body>
</html>

How to get the closest Textfield's value after clicking on a Checkbox - JQuery

I'm trying to get the closest Textfield's Value after checking a checkbox. This is just a simple HTML example. In my project I have dynamically added Lists with multiple checkboxes. I always need the closest Textfield's value - something like a refenrence that shows that hte checkbox and the textfield belongs together. Thanks!
HTML:
<input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
<input type='text' name='text' value='typo3txt'/>
<input type='button' name='test' id='123' value='Alert'/>
JQuery:
$("#123").click(function(){
$('input:checkbox[class=oberpunkte]:checked').each(function() {
alert($(this).closest('input[type=text]').attr('value'));
});
});
Fiddle:
http://jsfiddle.net/pEb7D/1/
would be "nicer" if you wrap your html in a <div class="box"> but like what you have it you can use prev or next depending where the click happens:
http://jsfiddle.net/pEb7D/4/
$(".oberpunkte").change(function(){
alert($(this).next('input').val())
});
$('#123').on('click',function(){
alert($(this).prev('input').val());
});
UPDATE with a div.box as parent
In my opinion this is a nicer solution. Cause doesn't matter where you click we can check from $(this)where is the closest box and then get the value we're looking for...
http://jsfiddle.net/pEb7D/7/
<script type="text/javascript">
$("#123, .oberpunkte").on('click', function(){
alert($(this).closest('.box').children('.needToFind').val())
});
</script>
<div class="box">
<input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
<input class="needToFind" type='text' name='text' value='typo3txt'/>
<input type='button' name='test' id='123' value='Alert'/>
</div>
<div class="box">
<input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
<input class="needToFind" type='text' name='text' value='123456'/>
<input type='button' name='test' id='123' value='Alert'/>
</div>
<div class="box">
<input type='checkbox' class='oberpunkte' name='checkbox' value='typo 3'/>
<input class="needToFind" type='text' name='text' value='xxxxxx'/>
<input type='button' name='test' id='123' value='Alert'/>
</div>
I would suggest using parent() and find(), than make a connection between them, so if you future html changes you would not need to change the javascript.
$("#123").click(function() {
$(this).parent().find('selectorToInput').DO_STUFF;
}

How can I get all elements from certain (multiple) classes using jQuery?

I want to get all fields that have this class: "requiredField Validate".
Code sample:
<form id="myForm">
<input type="text" class="requiredField X"> Text1
<input type="text" class="requiredField Y"> Text2
<input type="text" class="requiredField Validate"> Text3
<input type="text" class="requiredField Validate"> Text4
<input type="text" class="requiredField Z"> Text5
</form>
How can I do this using jQuery?
I tried to do this and had no success:
$('.requiredField.Validate').each(function() {...
$('form.myForm.Validate')
$('.requiredField Validate')
You can do it this way,
Live demo
$('.requiredField.Validate')
Try this
$('.requiredField.Validate'); // Will select elements that has both classes.
Here is an example, see the console.
Try this one:
$('.requiredField').filter('.Validate');
Just as in CSS
$('.requiredField .Validate')
which means every .Validate concerning .requiredField is true
In difference
$('.requiredField, .Validate')
which means .Validate or .requiredField.

Categories

Resources