Develop Reference

Stop Input From Inheriting Another Input's Value On Button Click

I'm creating a post slug input, so when editing post title input it'll inherit it's value to the disabled slug input amd there is a button when clicking it enables the disabled input. It is working good, but I want on clicking the button it'll stop Inheriting values.
Here is my code :
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>
<script>
document.querySelector('#a').addEventListener('keyup', () => {
document.querySelector('#b').value = document.querySelector('#a').value;
});
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
});
</script>
I've googled, but i haven't found.
Thank You

You can removeEventListener of the a element keyup after clicking the button.
function onAKeyup() {
document.querySelector('#b').value = document.querySelector('#a').value;
}
document.querySelector('#a').addEventListener('keyup', onAKeyup);
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
document.querySelector('#a').removeEventListener('keyup', onAKeyup)
});
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>

How to get ID of input field from form using jQuery element selector

I have form with each input field unique id and I have attached jquery on 'input' to form. I want to get id of field on which user change some value using jquery function. I am missing some puzzle in following code in alert(".... statement
$(document).ready(function () {
$("#CreateStudentProfileForm").on('input', function () {
alert($(this).find().closest().attr('id'));
});
});
html form
<input class="form-control text-box single-line valid" data-val="true" data-val-number="The field Student UWL ID must be a number." data-val-range="Only Number Allowed" data-val-range-max="2147483647" data-val-range-min="0" data-val-required="Require Your Student UWL ID" id="StudentNumber_UWLID" name="StudentNumber_UWLID" value="" type="number">
I have many instances of input field like above

How about if you attach the event to each field individually?
$(document).ready(function () {
$("#CreateStudentProfileForm").find("input,textarea,select").on('input', function () {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="CreateStudentProfileForm">
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
</form>

$('#CreateStudentProfileForm').on('change keyup','input', function(){
var id = $(this).attr('id')
})
"id" is the id you want...

if you want to track the change event for an input use change event
//assuming you input id is CreateStudentProfileForm
$("#CreateStudentProfileForm").on('change', function () {
alert(this.id) //should give you the changed input id
//alert($(this).find().closest().attr('id'));
});
keyup is better
$("#CreateStudentProfileForm").keyup(function () {
alert(this.id)
//alert($(this).find().closest().attr('id'));
});
updated
this gets all the input present in you form specified by id CreateStudentProfileForm and adds keyup event to track the changes.
//assuming CreateStudentProfileForm is form's ID
$("#CreateStudentProfileForm:input").keyup(function () {
alert(this.id) //should give you the changed inputs id
//alert($(this).find().closest().attr('id'));
});

do something like this http://jsfiddle.net/elviz/kqvdgrmk/
$(document).ready(function(){
$("#CreateStudentProfileForm input").keyup(function(){
alert(this.id);
});
});

Use either:
this.id;
Or get:
$(this).attr("id");

Supposing you have a similar HTML
<form id="CreateStudentProfileForm">
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
</form>
Then you can do something like
$('#CreateStudentProfileForm > input').on('input change', function () {
alert($(this).attr('id'));
});
Note that this event will fire on both input and change. You may want to fire it only on change OR input, depending on what you need to do.

$(document).ready(function ()
{$("#CreateStudentProfileForm").find("input").on('input', function () {var get_id = $(this).attr('id');});});

How to get the id of the invoking html input box in javascript

How do I get the 'id' of the html input box in a JavaScript function to set the value to the respective input box which invoked the JavaScript function
<html>
<script type='text/javascript' src='./javasc.js'></script>
<input type='text' id='one' onclick='setVal()'/>
<input type='text' id='two' onclick='setVal()'/>
</html>
javasc.js
function setVal()
{
$('#one').val("First Message");
$('#two').val("Second Message");
}
I want something like this.
javasc.js
function setVal()
{
id=getElementIdWhichInvokedTheFunction();
$(id).val("Some Message");
}

Use this references:
function setVal(elem) {
id = elem.id;
$(id).val("Some Message");
}
To invoke:
setVal(this);
Update
If you pass the object, you don't need the ID to manipulate it:
function setVal(elem) {
$(elem).val("Some message");
}
You still invoke using setVal(this);
JsFiddle

If you want to use your function like in your post
<input type='text' id='one' onclick='setVal()'/>
you will need to change it to
<input type='text' id='one' onclick='setVal(this);' />
and modify the function to accept an argument.
OR
http://jsfiddle.net/C9VQC/1/
<input type='text' id='one' />
<input type='text' id='two' />
$("input").click(function(){
alert($(this).attr('id'));
});

$("input").click(function(){
$(this).val("Some message");
});
Then remove the onclick attribute from the HTML. If you have other input elements on the page that you do not want affected, use the following:
$("#one,#two").click(function(){
$(this).val("Some message");
});

You can pass this(current element), which is being clicked and get the id from this element inside setVal(), something like
function setVal(elem){
id=elem.id; // id is 'one' if you click on button one
//do action with fetched id
}

Pass the id while calling the function, and then set the value.
.....
<input type='text' id='one' onclick='setVal("one")'/>
.....
function setVal(this)
{
$(this).val("some message");
}

delete dynamically created textbox

I have the following code which I use to add text-boxes dynamically on click of button. It works.
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" onclick="addForm()"/>
The javascript for the above code is:
function addForm() {
$("#forms").append(
"<input type ='text' class='winner' name='winner[]'><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
}
I am using auto complete to get data from database in the text-box
What I want is - suppose if a user clicks on add more winner button but does not want to add any data in the textbox, I should give him a button to delete the extra text-box.
How should the JavaScript be written for this?
Do see my above code

var i=0;
function addForm() {
i++;
$("#forms").append(
"<input type ='text' id='input_'"+i+" class='winner' name='winner[]'><button onclick='delete('"+i+"')' id='button_'"+i+">delete</button><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
function delete(i)
{
$("#input_"+i).remove();
$("#button_"+i).remove();
}
simply use a counter to set an ID to inputs and buttons and send that counter to delete function;

Simply use the code below :
$("#forms").append("<p><input type ='text' class='winner' name='winner[]' ><button onclick='$(this).parent().remove()'>delete</button></p>");

Try this function.
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}

Try adding a remove button while adding a text box dynamically to remove the text box if necessary
Here is the html code
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" />
Here is the jQuery code
$('#addmore').click(function () {
$('#forms').append('<input type ="text" class="winner" name="winner[]"><input type="button" onclick="$(this).prev().remove();$(this).remove();">');
});
Here is the demo

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially

You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements

try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});

Here's an example using toggle:
http://jsfiddle.net/x5qYz/

<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});

$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});

Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />

Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.