Full Name From User To be In Separated Hidden Form Fields - javascript

I have a form with the two below inputs
<div class="required form-group" style="display:none">
<label for="customer_firstname">{l s='First name'}
<sup>*</sup>
</label>
<input onkeyup="$('#firstname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_firstname" name="customer_firstname" value="{if isset($smarty.post.customer_firstname)}{$smarty.post.customer_firstname}{/if}" />
</div>
<div class="required form-group" style="display:none">
<label for="customer_lastname">{l s='Last name'}
<sup>*</sup>
</label>
<input onkeyup="$('#lastname').val(this.value);" type="text" class="is_required validate form-control" data-validate="isName" id="customer_lastname" name="customer_lastname" value="{if isset($smarty.post.customer_lastname)}{$smarty.post.customer_lastname}{/if}" />
</div>
As you can see both these fields are hidden. This is because I want to create a new input called full name and whatever the user types here gets filled into these first name and last name automatically.
So if full name is John Doe then first name will hold John and last name will hold Doe. Or if full name is Stuart Ben Mackenzie then fist name will hold Stuart Ben and last name will hold Mackenzie. How can I do this with Javascript??

You should use this:
<input id="fullname" type="text"/>
$('#fullname').val($('#firstname').val()+' '+$('#lastname').val());

This really depends on how you want to discern the first name from the last. If you want the last name to always be only 1 word then it you would parse the names as such.
Add to your input(s) which you need to track input a class or attribute then simply bind the keyup event handler to it such as
$("input[traced-input]").on("keyup", function(){
var tft = $(this); //short for thisTextField
if(tft.attr("id")==='fullname'){
//parse the names here into an array presumably
$("#firstname").val(namesArr['firstname']);
$("lastname").val(namesArr['lastname']);
}
});
Make sure you put the js in $(document).ready() and if the HTML content will be dynamically loaded then add a delegate such as
$(document).on("keyup", '.class or #id here', function () {
//do stuff
});

You can achive using bellow code:
<input id="fullname" type="text"/>
var fullname=$('#fullname').val();
var pieces = fullname.split(' ');
var customer_lastname=pieces[pieces.length-1];
$("#customer_lastname").val(customer_lastname);
pieces.pop();
var customer_firstname=pieces.join(" ");
$("#customer_firstname").val(customer_firstname);

$('#dfullname').on('keyup', function(e){
var fullname = $(this).val();
var splitFullName = fullname.split(' ');
$('#firstname').val(splitFullName[0]);
$('lastname').val(splitFullName[1]);
});
of course this will only work if you are having 1 first name and 1 last name, but it gives you the general idea.

Related

Get value from html input to string and transfer to code behind

I am trying to get value from HTML input but I did not succeed.
i need to transfer it to code behind aspx.cs
I want to transfer input name (card-number) to string.
Code:
<link href="Store/creditcardjs-v0.10.13.min.css" rel="stylesheet">
<div class="ccjs-card">
<label class="ccjs-number">
Card Number
<input name="card-number" class="ccjs-number" placeholder="•••• •••• •••• ••••">
</label>
<label class="ccjs-csc">
Security Code
<input name="csc" class="ccjs-csc" placeholder="•••">
</label>
<button type="button" class="ccjs-csc-help">?</button>
<label class="ccjs-name">
Name on Card
<input name="name" class="ccjs-name">
</label>
You need to add an id attribute to your input:
<input id="card_number" name="card-number" class="ccjs-number" placeholder="•••• •••• •••• ••••">
And then get it with plain JavaScript like:
var val = document.getElementById("card_number").value;
val variable holds whatever the input (card-number) has.
Add ID to your label, like this:
<label class="ccjs-number" ID="mylabel">
After that get value from that label:
<script>
var a = document.getElementById('myLabel').value = mylabel.innerHTML;
</script
A label's value is not posted back; so I think you'd need to use a HiddenField and save the value in that.
Alternatively, you can use a textbox instead of a label.

Getting a variable from the input and displaying it again

helo guys I am writing ajava Script that have an input box to allow the user enter a value and I want to show him again what he enterd with in that page to ensure that he will see what he is enterd for example
<input id="userName" class="form-control col-md-7 col-xs-12" type="text" name="userName">
I have these input box and I want get this value and display it again in alabel bellow
<label id="user_label" class="control-label col-md-3 col-sm-3 col-xs-12"></label>
and I write the following JS
user_Name=getElementById('userName');
document.getElementById('user_label').innerHTML=user_Name;
and these displays the string userName not the string value init what can I do
Just grab the value from the HTML element instead...
var user_Name = document.getElementById('userName').value;
document.getElementById('user_label').innerHTML = user_Name;
What you need to do is call your code whenever the input field is changed.
<input id="userName" type="text" name="userName" onKeyUp="update()">
And in JS:
function update() {
var user_Name=document.getElementById('userName').value;
document.getElementById('user_label').innerHTML=user_Name;
}
Also you need to refer to the .value of the input element to get its value.
Here is a Pen:
http://codepen.io/calvinclaus/pen/EKBvBz?editors=1011
Try:
var user_Name=getElementById('userName');
document.getElementById('user_label').innerHTML=user_Name.value;

How can I change the index of input element dynamically based on parent and inner parent in jquery

How can I change the index of input element dynamically based on the parent and inner parent count in jQuery.
In the following code how can I change the index of form elements
<div id='parent_container0'>
<div id='parent_inner_container0'>
<label> Name </label>
<input type='text' name='name[]'/>
<div id='child_container0'>
<div id='child_inner_container0'>
<label> Email </label>
<input type='text' name='email[]'/>
<label> Phone </label>
<input type='text' name='phone[]'/>
</div>
</div>
</div>
</div>
<div id='parent_container1'>
<div id='parent_inner_container1'>
<label> Name </label>
<input type='text' name='name[]'/>
<div id='child_container1'>
<div id='child_inner_container1'>
<label> Email </label>
<input type='text' name='email[]'/>
<label> Phone </label>
<input type='text' name='phone[]'/>
</div>
</div>
</div>
</div>
I need the changed name of form element as
name[0]
email[0][0]
phone[0][0]
name[1]
email[1][0]
phone[1][0]
Based on the parent's index of those elements in jQuery.
How can I achieve this?
Any help is appreciated.
Thanks,
Note: The requirement is to use a nested form to add more form of parent and Child with each form has nested form fields I am using the following code for changing index.
$('.parent_container').each(function(i) {
var pindex = $(this).index();
var mainfrm=$(this);
var orgname="";
mainfrm.find('.parent_container_inner').each(function(j) {
$(this).find('input, select, textarea').each(function(k){
orgname = $(this).attr('name');
orgname = orgname.replace(/[[]\d]+/g,"");
$(this).attr('name', orgname+"["+pindex+"]["+j+"]["+k+"]");
});
});
});
First, you should select your parent "containers" with:
$("div[id^=parent_container]").each(function(){
console.log(this);
});
It will print your two parent_container (parent_container0 and parent_container1). Check out here how to use selector attribute with Starts With
Then you will need to find and replace all name[], email[] and phone[].
So, you should use Ends With, to find each input you need to replace the name
$("div[id^=parent_container]").each(function(){
var parentContainerId = this.id.replace('parent_container', '');
$(this).find("input[name$='[]']").each(function(){
var newName = this.name.replace('[]', '[' + parentContainerId + ']');
this.name = newName;
})
});
Here is the Fiddle
Also, concerning your question, you should definitely take a better look into JQuery Selectors

Javascript Dynamic Form Field

I am having difficulty with a javascript that I need some help with. I have a form which sends to a php the exact amount of inputs to be filled, now I want to create a preview using jQuery/javascript but how can I catch all the fields dynamically.
Here is a portion of my form for reference:
<td>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil"></i></span>
<input class="form-control" id="task" type="text" name="task" placeholder="Task Title">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-pencil"></i>
</span>
<input class="form-control" id="description" type="text" name="description" placeholder="Task Description">
</div>
</td>
So, I added in PHP the name field + the number, this way I can get different names ie: task1, task2,...etc.
Now what I need to do is get the values using jQuery/javascript.
My thoughts so far is to declare the var (variable) inside a for() (loop)
var task = $('input[name=task]').val();
How can I get all values task1, task2. No one knows how many task fields the user will submit so I need to get the number of fields
Any help direction so I can figure this out
First of all, you don't need to give your input fields names like task1, task2, etc to distinguish among them on the server-side i.e on the PHP. You just need to give all of them a name attribute value like tasks[] And notice the brackets [] so you may have something like the following:
<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">
...
<input class="form-control" id="tasks[]" type="text" name="tasks[]" placeholder="Task Title">
Like that automatically values in those fields will be posted as an array to the PHP and it is going to be received like the following in PHP script:
$tasks = $_POST['tasks'];
foreach ($tasks as $task){
echo $task;
}
Second By this way you will easily able to collect your inputs data using Javascript inorder to generate the preview by using getElementsByName method as follows:
function preview(){
output = "";
tasks = document.getElementsByName('tasks[]');
for (i=0; i < tasks.length; i++){
output += "<b>Title</b>: "+tasks[i].value+"<hr />";
}
panel = document.getElementById('panel');
panel.innerHTML = output;
}
Of course you can expand this solution to any number of fields in your form such as descriptions[].
A javascript DEMO: http://jsbin.com/kiyisi/1/
Using the Attribute Starts With Selector [name^="value"] and jQuery.each()
var tasks = $('input[name^=task]').val();
$.each(tasks,function(index, value){
//do something with the value
alert($(this).val());
});
edit
var tasks = $('input[name^=task]');
$.each(tasks,function(index, value){
//do something with the value
$('#Preview').append($(this).val());
});
Q: now I want to create a preview using jquery/javascript but how can I catch all the fields dinamically:
If you give them a class, you can get all fields with each:
$(".className").each(function() {
do something
Next, "catch" all fields... I'm assuming you may want the values of these fields too? Check this example for details, here is a snippet which loads the key:value pairs (form field name : value of field) into a map:
var map = {};
$(".activeInput").each(function() {
map[$(this).attr("name")] = $(this).val();
});
Print all values inside div (Here, I'm assuming you're talking about children values of div):
<div>
<span>Hi</span>
<span>Hello</span>
<span>Hi again</span>
</div>
$("div").children().each(function () {
console.log($(this).text());
});
OR
$("div span").each(function () {
console.log($(this).text());
});

Add form input to variable

I cannot find the accept answer on here.
Currently I have a simple html form, that allows the user to enter text, in this case a user name.
<form class="Find Friend">
<div class="error" style="display:none"></div>
<input type="text" id="friendsearch" placeholder="Find Friend" class="input-field" required/>
<button type="submit" class="btn btn-login">Find</button>
</form>
I want to capture that name in a variable for later use. Do I simply use ?
var findFriend = friendsearch;
To keep the var updating on each user input, you can use.
http://jsfiddle.net/gRZ7g/
var friendName;
$('#friendsearch').on('keyup', function(e) {
friendName = $(this).val();
});
$('.show-value').click(function(e) {
alert(friendName);
});
You can get it like this:
var findFriend = $('#friendsearch').val();
You have to use the jQuery selector to select the element by its id.

Categories