Replace text based on submit - javascript

What I am trying to do is to dynamically replace the corresponding text with the string from input field.(field1>field11, field2>field22)
http://jsfiddle.net/c2CUE/3/
Can you give me any clue on how to do it in jquery?
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>

this should do the trick
$(document).ready(function () {
$("input.field1").on("keyup",function () {
$("span.field11").html($(this).val());
});
});
or in live
http://jsfiddle.net/u8EB9/
you could also hook the function to the "change" event but than youll get your text only updated, after you left the input!
this depends on your needs!

Try this:
<form id="form" method="post">
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
</form>
and jquery:
$(document).ready(function(){
$('#form').submit(function(e){
e.preventDefault();
$('.field11').html($('.field1').val());
$('.field22').html($('.field2').val());
});
}

if your intention is to use this code multiple times it might be better to use classs rather than id's to stop you needing to create a bunch of bind events.
html:
<table>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="replacer" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field11">asdasd</span>
</td>
</tr>
<tr>
<td>
<h2>Field 1</h2>
<input type="text" class="replacer" name="field2" value="qwerty" />
<input type="button" class="replace" value="replace" />
</td>
<td>
<span class="replacee field22">asdasd</span>
</td>
</tr>
</table>
JS:
$('.replace').on('click', function(){
var parentRow = $(this).closest('tr');
parentRow.find('.replacee').text(parentRow.find('.replacer').val());
});
http://jsfiddle.net/c2CUE/4/

HTML:
<table>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
<td><span class="field11">asdasd</span></td>
</tr>
<tr>
<td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
<td><span class="field22">asdasd</span></td>
</tr>
</table>
JQuery:
$("input[type='text']").on("keyup",function () {
$(this).parent().next().find('span').html($(this).val());
});
Demo:
http://jsfiddle.net/F74ec/

Related

Jquery / CSS: Change the css of a cloned tr

I am trying to clone a hidden table row, paste it and make it visible. For some reason the tr stays hidden. I've tried different ways but in the end I can not find a solution.
This is my code:
$(document).ready(function() {
$('#addproduct').click(function(e) {
e.preventDefault();
var item = document.getElementById('hiddenTemplate').cloneNode(true);
$('#hiddenTemplate').after(item);
$('#hiddenTemplate').css("visibility", visible);
});
});
#hiddenTemplate {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="addproduct" class="btn btn-primary">Add Product</button>
<table id="tableProducts">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td><b>Is Default?</b></td>
<td><b>User Defined?</b></td>
</tr>
<tr id="hiddenTemplate">
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault">
</td>
<td>
<input type="checkbox" id="userdefined">
</td>
</tr>
</tbody>
</table>
Your code is missing quotes around visible:
$('#hiddenTemplate').css("visibility", "visible");
(and as said in the comments, use a class rather than an id)
There where 3 misstakes in your code
remove Attribute id
$('#hiddenTemplate').css("visibility", "visible");
see 2 and do it on $(item)
$( document ).ready(function()
{
$('#addproduct').click(function (e) {
e.preventDefault();
var item = document.getElementById('hiddenTemplate').cloneNode(true);
item.removeAttribute('id');
$('#hiddenTemplate').after(item);
$(item).css("visibility", "visible");
});
});
#hiddenTemplate
{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addproduct" class="btn btn-primary">Add Product</button>
<table id="tableProducts">
<tbody>
<tr>
<td><b>SKU</b>:</td>
<td><b>Default Quantity</b>:</td>
<td><b>Position</b>:</td>
<td><b>Is Default?</b></td>
<td><b>User Defined?</b></td>
</tr>
<tr id="hiddenTemplate">
<td>
<input type="text" id="sku">
</td>
<td>
<input type="text" id="quantity">
</td>
<td>
<input type="text" id="position">
</td>
<td>
<input type="radio" id="isDefault">
</td>
<td>
<input type="checkbox" id="userdefined">
</td>
</tr>
</tbody>
</table>

JavaScript Push function into Angular's ng-repeat array coming in blank

Let me start by saying this is not a repeated question, I read every related question! My edit functions work fine, and my push function to update the array was working, and I'm certain I never touched it, it just stopped working!
I'm going to say my HTML form has ng-model's that have no spelling errors, that are used to help with the push. The Angular code:
$scope.add = function(id){
$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
//More code here that resets the forms input//
}
My edit functions work, my delete ones do, it's just this one, when I hit the button that sets off the add() function, it resets the form input, but pushes a blank array into my ng-repeat list!
I have a form that has multiple inputs with ng-model set to whatever; name, phone1 ... etc, and the angular code is correct, so why the hell will this not work?
<div class="centered" ng-show="addcont">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Save" ng-click="add(); `showAdd()">
</td>
</tr>
</table>
</form>
</div>
MAJOR UPDATE!
I use a JQuery autotab function, and as soon as I commented it out, the arrays passed in normally again.
The function is used on the form provided above, and auto tabs to the next input.
Here's the function:
<script>
$(document).ready(function(){
$('.edit').autotab();
});
</script>
Using Jquery and angular doestnot fit every time
So, we should use the angular version of the Auto tabs.
So, Here is the solved example using Auto tabs with Angular.
The important line to be added is
$.autotab.selectFilterByClass = true;
$.autotab.selectFilterByClass = true;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$('.edit').autotab();
$.autotab.refresh();
$scope.people = [];
$scope.add = function(id){
$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
setTimeout(function () {
$.autotab.refresh();
}, 1);
//More code here that resets the forms input//
}
});
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autotab/1.9.2/js/jquery.autotab.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="centered">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
{{people}}
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit number" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Save" ng-click="add()">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Please run the Above SNIPPET
Now, your pushing the code into the Array works fine with AUTO-TAB.
HERE IS A WORKING DEMO
Try to push the variables by value and not by reference. The quickest solution that I came through is using the JSON object. This might be a problem when you reset the $scope.name for example, it updates the value in your array.
$scope.add = function(id){
$scope.$apply(function() {
$scope.people.push({
name: JSON.parse(JSON.stringify($scope.name)),
phone1: JSON.parse(JSON.stringify($scope.phone1)),
...
});
});
//other code
}

Cannot set property 'innerHTML' of null at validatename_degree

I have already seen the pages here for this error, but neither window.load nor putting script in the div block have solved it. If I write document.getElementById("fullname_error"), it is working, but it is not working with document.getElementById(ident) though the var ident is equal to the id of p , I have checked it.
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
var iden='"'+ident+'"';
document.getElementById(iden).innerHTML=iden;
}
</script>
</form>
</div>
</div>
You don't require var iden='"'+ident+'"'; just use var iden=ident;. Please try this.
<!DOCTYPE html>
<html>
<body>
<div class="most_page">
<div id="form_container">
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td>
<input type="text" name="fullname" value="Full name">
</td>
<td>
<p id="fullname_error"> hh</p>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address">
</td>
</tr>
</table>
<button class="button" id="submitreg">
<input id="submit" type="submit" value="submit">
</button>
<script type="text/javascript">
function validatename_degree(x, ident) {
var iden = ident;
document.getElementById(iden).innerHTML = iden;
}
</script>
</form>
</div>
</div>
</body>
</html>
Just pass the parameter ident to the document.getElementById property and use the your existing code,below is a working snippet
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
console.log(""+ident)
var iden='"'+ident+'"';
document.getElementById(ident).innerHTML=iden;
}
</script>
</form>
</div>
</div>

Trying to find previous DOM elements and get input value jquery

I am trying to create a table that when a user click update, it will get the first and second input value. I am trying to use prev to find the first two DOM element and get the value, but fail, what should I do? Any help is appreciated.
$('.update_button').on("click",function(){
var update_val_1 = $(this).prev().find('input:first').val();
var update_val_2 = $(this).prev().find('input:nth-child(2)').val();
alert(update_val_1);
alert(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="gridtable">
<td><input type="text" value="apple" /></td>
<td><input type="text" value="one" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="banana" /></td>
<td><input type="text" value="three" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
<tr class="gridtable">
<td><input type="text" value="berry" /></td>
<td><input type="text" value="ten" /></td>
<td><button type="button" class="update_button">UPDATE</button></td>
</tr>
The problem is that prev looks for sibling nodes. Your input elements are in different td's so they aren't siblings. Instead, you need to go to the parent row then grab the inputs from there.
Explicit example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var $firstCell = $parentRow.find('td:first-child');
var $secondCell = $parentRow.find('td:nth-child(2)');
var $firstInput = $firstCell.find('input');
var $secondInput = $secondCell.find('input');
var update_val_1 = $firstInput.val();
var update_val_2 = $secondInput.val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
Simplified example:
$('.update_button').on("click", function() {
var $parentRow = $(this).closest('.gridtable');
var update_val_1 = $parentRow.find('td:first-child input').val();
var update_val_2 = $parentRow.find('td:nth-child(2) input').val();
console.log(update_val_1);
console.log(update_val_2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="gridtable">
<td>
<input type="text" value="apple" />
</td>
<td>
<input type="text" value="one" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="banana" />
</td>
<td>
<input type="text" value="three" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
<tr class="gridtable">
<td>
<input type="text" value="berry" />
</td>
<td>
<input type="text" value="ten" />
</td>
<td>
<button type="button" class="update_button">UPDATE</button>
</td>
</tr>
</table>
I'm a big fan of the .closest(selector) and .find('selector') methods.
The first one goes up the dom until it finds the first match of the given selector.
The second one goes down the dom and finds all matches.
.eq(index) is like array[index] for jQuery. It takes a collection of jQuery elements and returns the one at the given index.
$('.update_button').on("click",function(){
var inputs = $(this).closest('.gridtable').find('input');
var value1 = inputs.eq(0).val();
var value2 = inputs.eq(1).val();
});

onfocus not working in javascript

i am putting together some javascript form validation and i cant figure out how to get this onfocus to take hold of my div... i just need it to alert me that my onfocus function is making contact with my last name imput... :(
html:
<div id="contact">
<form name="form1" action="send.php" method="post" id="contact_f">
<table id="contact_table">
<tr>
<td class="col1" colspan="2">
<h1 class="center_text">Contact Aron</h1>
<div id="error_messages">
errors
</div>
</td>
</tr>
<tr>
<td class="col1">
<label for="first_name">First Name*</label><br>
<input id="first_name" required name="Name" type="text" pattern="[a-zA-Z]+">
</td>
<td class="col2">
<label for="last_name">Last Name*</label><br>
<input id="last_name" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="email">Email*</label><br>
<input id="email" required type="email">
</td>
<td class="col2">
<label for="confirm_email">Confirm Email*</label><br>
<input id="confirm_email" required type="text">
</td>
</tr>
<tr>
<td class="col1">
<label for="phone">Phone Number <span id="color_gray">xxx-xxx-xxxx</span></label><br>
<input id="phone" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
<td class="col2">
</td>
</tr>
<tr class="col2">
<td class="col1" colspan="2">
<label for="message">Message*</label><br>
<textarea id="message" required type="text"></textarea>
</td>
</tr>
<tr>
<td class="col1" colspan="2">
<button id="submit_button" type="submit" value="submit">Submit Form</button>
</td>
</tr>
</table>
</form>
javascript in question:
document.getElementById("last_name").onfocus=function() {
alert("last name");
};
Actually your code is working fine. You can try it with using jquery, like this -
$(document).ready(function() {
$( "#last_name" ).focus(function() {
alert("Last name");
});
});
You need to use:
document.getElementById("last_name").onfocus=function() {
alert(this.value);
};
Try this
window.addEventListener('load',function(){
document.getElementById("last_name").addEventListener('focus',function() {
alert(this.value);
});
});

Categories