We Keep Coding

Need help converting jQuery function to JavaScript?

I am updating a product, I am able to have the product info prefill the update form and update the product info using jQuery but I want to use JavaScript. How do I convert this jQuery code to JavaScript?
I am following a tutorial online and the person is using jQuery which is cool but I want to see how to do the same method using Javascript.
Javascript Code:
$(document).on('pagebeforeshow', '#updatedialog', function() {
$('#newName').val(currentProduct.name);
$('#newQuantity').val(currentProduct.quantity);
});
function updateProduct() {
var newName = $('#newName').val();
var newQuantity = $('#newQuantity').val();
productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}
HTML update form
<form>
<div class="ui-field-contain">
<label for="newName"
class="ui-hidden- accessible">Name</label>
<input type="text"
id="newName"
data-clear-btn="true"
placeholder="New Name"/>
<br/>
<label for="newQuantity"
class="ui-hidden-accessible">Quantity</label>
<input type="number"
name="number"
pattern="[0-9}"
id="newQuantity"
value=""
data-clear-btn="true"
placeholder="New Quantity"/>
<br/>
<button class="ui-btn ui-icon-plus ui-btn-icon-left"
id="btnupdate"
onclick="updateProduct()">
Update
</button>
</div>
</form>
The update form should populate with the information from the product that was already entered and then it should update the changes made to the fields and save it as a new object. I can do it in jQuery but I want help with doing it in Javascript.

Seems all you're currently doing with jquery is getting the value of input elements by their ID. You can do this with javascript by selecting the form element by ID and getting the value property.
val value = document.getElementById("elemID").value;
Your code should look like this
function updateProduct(){
var newName= document.getElementById("newName").value;
var newQuantity = document.getElementById("newQuantity").value;
productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

you can get values of of the element by id using document try the following
function updateProduct(){
var newName=document.getElementById("newName").value;
var newQuantity=document.getElementById("newQuantity ").value;
productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

posting javascript populated form to another php page

I'm trying to take some js that pulls data from another web application and populates a form by clicking "Populate Contact Info" and then click a "Submit" button to push the fields to a new php that then processes them. So basically how do I pass populated form field to a second form on the same page that I can then submit? Or is there a better way?
<form action="#" name="data" id="data">
<input type='button' value='Populate Contact Info' onclick='popAllContactFields()' />
Contact Info:
First Name: <input type='text' readonly="readonly" id='cfname' name='cfname' />
Last Name:<input type='text' readonly="readonly" id='clname' name='clname' />
Email: <input type='text' readonly="readonly" id='cemail' name='cemail' />
</form>
<script type="text/javascript">
/* popAllContactFields()
Populates all the contact fields from the current contact.
*/
function popAllContactFields()
{
var c = window.external.Contact;
{
// populate the contact info fields
popContact();
}
}
/* popContact()
Populates the contact info fields from the current contact.
*/
function popContact()
{
var c = window.external.Contact;
// set the contact fields
data.cfname.value = c.FirstName;
data.clname.value = c.LastName;
data.cemail.value = c.EmailAddr;
}
</script>
<form action="ordertest.php" method="post">
<input name="cfname" id="cfname" type="hidden" >
<input name="clname" id="clname" type="hidden" >
<input name="cemail" id="cemail" type="hidden" >
<input type="submit" value="Submit">
</form>

If you can manage to receive the data with an AJAX call as a JSON then it's vary easy. With using jQuery ($) and Lodash (_ but you can try Underscore as well):
$.get('an-url-that-returns-the-json', function(parsedData) {
_.forEach(_.keys(parsedData), function(key) {
console.log('key:', key);
$('#'+key).val(parsedData[key]);
});
});
If it's tough at first sight read some about jQuery selectors, AJAX ($.get()) and $(...).val().
You can also make a list about the keys that you want to copy, e.g. var keysToCopy = ['cfname', 'clname', 'cemail'] and then _.forEach(keysToCopy, function(key) {...}), this gives you more control with the copied data.
If you cannot use AJAX but can control the output of the source PHP, then I'd rather create the data as a raw JS object. If you cannot control the generated stuff then you must use something like you wrote, that also can be helped by some jQuery based magic, e.g.
_.forEach(keysToCopy, function(key) {
var prop = $('#source-form #'+key).val();
$('#target-form #'+key).val(prop)
});
Based on these you can think how you can solve if the source and target IDs are not the same.

retrieving text field value using javascript

I want to retrieve textfield value using javascript. suppose i have a code like:
<input type='text' name='txt'>
And I want to retrieve it using javascript. I call a function when a button is clicked:
<input type='button' onclick='retrieve(txt)'>
What coding will the retrieve function consist of?

You can do this:
Markup:
<input type="text" name="txt" id="txt"/>
<input type="button" onclick="retrieve('txt');"/>
JavaScript:
function retrieve(id) {
var txtbox = document.getElementById(id);
var value = txtbox.value;
}

Let's say you have an input on your page with an id of input1, like this:
<input type="text" id="input1" />
You first need to get the element, and if you know the Id, you can use document.getElementById('input1'). Then, just call .value to get the value of the input box:
var value = document.getElementById('input1').value;
Update
Based on your markup, I would suggest specifying an id for your text box. Incase you don't have control over the markup, you can use document.getElementsByName, like so:
var value = document.getElementsByName('txt')[0].value;

One of the way is already explained by Andrew Hare.
You can also do it by entering the value in the textbox and getting a prompt box with entered message when a user click the button.
Let's say, you have a textbox and a input button
<input type="text" name="myText" size="20" />
<input type="button" value="Alert Text" onclick="retrieve()" />
The function for retrieve()
function retrieve()
{
var text = document.simpleForm.myText.value;
alert(text);
}

Javascript change fields value by name

I have a form where some fields have the same element name. Is there a way to change the value of all the fields with the same name?

1) Use getElementsByName to put the elements in an array.
2) Loop over the array and set each element's value.
code:
var els=document.getElementsByName("yourElementNameHere");
for (var i=0;i<els.length;i++) {
els[i].value = "yourDesiredValueHere";}
If you only want to change the elements with that name in the form, use the form instead of document, example: document.getElementById("yourFormID").getElementsByName(...)

sample form
<form name="form1">
<input type="button" name="buttons" value="button1">
<input type="button" name="buttons" value="button2">
<input type="button" name="buttons" value="button3">
</form>
script
var form = document.form1; // form by name
var form = document.forms[0]; // same as above, first form in the document
var elements = form.buttons; // elements with same name attribute become a HTMLCollection
for (var i=0; i<elements.length; i++)
elements[i].value = elements[i].value.replace("button", "buttoff");
http://jsfiddle.net/yGV3R/

you can do more simple with JQUERY
example :
html
<div id="form">
<input type="text" name="myinput" vale="yussan" />
</div>
js
var value = $('#form input[name=myinput]').val()

Build URL from form fields with JavaScript or jQuery

I'm trying to create a URL builder form with JavaScript or jQuery.
Basically, it will take the value of the two form fields, add them to a preset URL and show it on a third field on submit.
The resulting URL might be http://example.com/index.php?variable1=12&variable2=56
Now, this isn't the "action" of the form and the application can't read a URL (to grab the variables), so it has to be done on the page.
The resulting URL will be shown in the field named "url".
Here's a sample of the form:
<form id="form1" name="form1" method="post" action="">
<p>
<label>Variable 1
<input type="text" name="variable1" id="variable1" />
</label>
</p>
<p>
<label>Variable 2
<input type="text" name="variable2" id="variable2" />
</label>
</p>
<p>
<label>URL
<input type="text" name="url" id="url" />
</label>
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p>
</form>

jQuery has serialize which builds the query string values.
So if you want to do the entire form:
alert($("#form1").serialize());
If you want to do only a few fields, then just make the selector select those fields.
alert($("#variable1, #variable2").serialize());

Use something like...
var inputs = $('#form1').find('input[type=text]').not('#url');
var str = "http://www.base.url/path/file.ext?"
inputs.each(function (i, item) {
str += encodeURIComponent(item.name) + "=" + encodeURIComponent(item.value) + "&";
});
$('#url').val(str);
This will select all <input>s on in form1 with type='text', and concatenate them into a query string. See encodeURIComponent().
Orrrr.....you could just use .serialize(). Thank you, prodigitalson.

Something like the following should work:
var partFields = '#variable1,#variable2';
$(partFields).change(function(){
var url = 'static/URL/to/file.php?';
$('#url').val(url + $(partFields).serialize());
});
However, unless you want people to be able to override the URL, you might want to use a hidden field and a regular element for display and submission of the URL value in which case you'd have something like the following:
var partFields = '#variable1,#variable2';
$(partFields).change(function(){
var url = 'static/URL/to/file.php?';
var urlValue = url + $(partFields).serialize();
$('#url-display').text(urlValue); // Set the displaying element
$('#url').val(urlValue); // Set the hidden input value
});