Dynamic form using HTML and JQuery - javascript

I am trying to make a dynamic form using HTML and CSS. I am adding parts of my code below. I can not figure out why the code is not working.
JavaScript:
<script>
$(document).ready(function(e) {
var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
var labdiv = $(".labdiv");
var valdiv = $(".valdiv");
var addbutton = $(".add_more");
$(addbutton).click(function(){
$(labdiv).append(labelfiled);
$(valdiv).append(valuefield);
});
</script>
HTML:
<form>
<div class="col-md-6 labdiv">
<div><label>Label</label>
<input type="text" name="label[]">
</div>
</div>
<div class="col-md-5 valdiv">
<div>
<label>Value</label>
<input type="text" name="value[]">
</div>
</div>
<button class="add_more">Add values</button>
</form>
If someone can help it would be great.
I also would like to know how I can process the data when I submit this into a javascript variable in the from of a array. Like for example if i have 2 inputs for value in the from, I want to store them in a javascript array and then convert it into a JSON.

Form must be in method="POST" and if you get in into php function :
if(!empty($_POST) && isset($_POST){ /*try something with $_POST*/ }

Try this
$(".add_more").click(function() {
var postData = {
field1: $("#id_field1").val(),
field2: $("#id_field2").val()
};
$.ajax({
dataType: "json",
data:JSON.stringify(postData),
url: URL,
method: 'POST'
});
});

A few things that may improve your learning:
jQuery and you code
All jQuery code should be wrapped in this...
$(document).ready(function() {
// jQuery
});
On the var's you have created, you have already initialised them as jQuery elements. Therefore, when you reference them again, you do not need (for example) $(addbutton) as addbutton will do. See amended code below)
<script>
$(document).ready(function(e) {
var labelfiled = '<div><label>Label</label><input type="text" name="label[]"></div>';
var valuefiled = '<div><label>Value</label><input type="text" name="value[]"></div>';
var labdiv = $(".labdiv");
var valdiv = $(".valdiv");
var addbutton = $(".add_more");
addbutton.click(function(){
labdiv.append(labelfiled);
valdiv.append(valuefield);
});
});
</script>
The console
On checking the console...
Say, for example, if you write the JS code console.log(1 + 1) in your page somewhere as you want to see that sum. Due to you writing client side code, when your web page loads (and depending where you have put the console.log()) if you check the developer tools in your chosen browser i.e. Chrome or IE, there is a console section where you can see the result of what you printed (i.e. using that example, it would be 2). This console in the browser will also print out errors that it detects (i.e. $ is not defined - if you are trying to reference jQuery but the library isn't included), it's a good tool for web developers (hence the name ;)) for debugging client side code.
Adding elements to array
Code for getting input values on submit of a form: (jQuery)
var array = [];
$("form").on("submit", function() {
$("input").each(function() {
array.push($(this).val();
});
});
I would suggest that you go and read a book/tutorial on jQuery code as well as the basic concepts of web development :)
Examples:
jQuery
For reference to basics if you get stuck, the link above is more reliable:
- w3schools

Related

How to use chrome.storage

I'm a newbie to coding, and I wanted to know how to use chrome.storage.local to store variables.
This is my HTML and javascript code(its a very basic version of what I want)
chrome.storage.sync.set({'value': document.getElementById("userInput").value}, function() {
// Notify that we saved.
})
chrome.storage.local.get(['value'], function(result) {
OnTaskPage=result.key;
document.getElementById("userInput").value = result;
});
<body>
<h1 id="userInput">What site do you want to stay on?</h1>
<input type="text" value="">
</body>
<script src="content.js"></script>
I'm pretty sure I'm messing up the javascript, but I don't know where because I am new to the syntax, and pretty much have no clue what I'm doing. The point of the javascript code is to store the value inside the html text box. Can someone please help me? Thanks!
Problems:
The id should be on input element, not on h1.
result is an object so to access the value you need to read result.value, look for tutorials on using JavaScript objects.
Currently you clear the saved value first by using set() with an empty value, and then read that empty value. You probably don't need set() here, but rather in some other event like a click on a button element.
The script content.js is named ambiguously/incorrectly because content scripts are for web pages, not for the extension page, so it should be named differently, e.g. popup.js
chrome.storage.local.get({value: ''}, result => {
OnTaskPage = result.value;
document.getElementById('userInput').value = result.value;
});
document.getElementById('save').onclick = () => {
chrome.storage.sync.set({value: document.getElementById('userInput').value});
};
and html:
<body>
<h1>What site do you want to stay on?</h1>
<input id="userInput">
<button id="save">save</button>
</body>
<script src="popup.js"></script>

Meteor two way data binding for form validation

I read a lot of resources about Blaze allowing reactive rendering for Meteor 0.8, but I can't seem to find a solution for my simple problem below.
I'm trying to validate my form inputs. For the sake of simplicity, lets say that I just want to change my {{message}} when a form is submitted. The approach I have taken in client.js is simply giving a new value to the helper variable. This is the way how I used to work with AngularJS, but there seems to be more than simply changing the variable in Meteor. How would I go about this?
- index.html
<template name="user">
<form>
<input type="text" id="name">
<p>{{message}}</p>
<button class="submit" onclick="return false;">Submit</button>
</form>
</template>
- client.js
Template.user.message = "";
Template.user.events = {
'click .submit' = function(){
Template.user.message = "valid";
}
}
It should work if you use a reactive variable. I'll use a session variable in this example:
Template.user.message = function() {
return Session.get('userMessage');
};
Template.user.events({
submit: function() {
Session.set('userMessage', 'valid');
}
});
Note that events takes an object (your code is assigning the click handler rather than making a value in an event map).

How to print one specific Javascript variable in HTML?

I want to ask how I can print a Javascript variable in HTML form (e.g. output it on the screen)?
Here is my JS code:
<script type="text/javascript">
var howLongIsThis = myPlayer.duration();
</script>
This var howLongIsThis = myPlayer.duration(); is Jquery variable!
So how i can show this value in HTML page?
Set it to be the innerHTML or value of a html element:
var howLongIsThis = myPlayer.duration();
var displayEl = document.getElementById("duration");
displayEl.innerHTML = howLongIsThis;
or if you want in in a form field:
displayEl.value = howLongIsThis;
Assuming you have a <div id="example"></div> somewhere in your HTML, you want to run JavaScript after the DOM has loaded which adds the value you want to that div. In jQuery (which you specified in your question you're using), this would simply be:
$('div#example').html(myPlayer.duration());
Here's a fiddle: http://jsfiddle.net/RyanJW/QjXKL/2/
Try this,
your HTML
<input type="text" id="logId" />
<div id="logId1"></div>
js Script
var howLongIsThis = myPlayer.duration();
document.getElementById("logId").value=howLongIsThis;
document.getElementById("logId1").innerHTML=howLongIsThis;
hope this will give you an idea to solve your problem

Google Apps Script, UrlFetchApp and JQuery

I would like to load a web page every day (perhaps more times a day), parse its data and email results.
To parse the web page I am using a parse.gs script like the following:
var url="http://http://example.com";
var page = UrlFetchApp.fetch(url).getContentText();
var XmlDoc = Xml.parse(page, true);
When I parse XmlDoc I have only getElement/s functions available and I find it difficult to do an effective job. So I would like to use something more productive, like the JQuery selectors.
As far as I understood I have to add a jquery.html page to the project like:
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
</html>
Then add to parse.gs the function:
function doGet() {
return HtmlService.createHtmlOutputFromFile('jquery');
}
After calling doGet, how do I parse XmlDoc? Using lines like $('#content').html(XmlDoc); doesn't work.
As an alternative to jquery, try building on the capabilities of the Xml Service entirely in apps-script.
A previous answer introduced a utility function that locates elements in the XML Document by searching for properties matching the search criteria.
getElementByVal( body, 'input', 'value', 'Go' )
... will find
<input type="submit" name="btn" value="Go" id="btn" class="submit buttonGradient" />
It also showed one possible specialization, for searching 'id' attributes of <div>s:
getDivById( html, 'tagVal' )
... will find <div id="tagVal">
If you are able to identify an element uniquely, as in the above examples, a simple script can get you that element easily:
var url="http://http://example.com";
var page = UrlFetchApp.fetch(url).getContentText();
// Get <div id="content">
var contentDiv = getDivById( pageDoc.getElement().body, 'content' );
...

Changing Img Src based on value entered in a Textfield

I need help creating a form with the following
TEXTFIELD(will be used to enter 7digit model numbers)
An image placeholder (will change the image placeholder's src based on a url for example it will become src="http://yourwebsite.com/product/TEXTFIELD.jpg)
I need to somehow get the the H1 tag values from within the product's url
#3 IS STILL UNSOLVED !
I'm REALLY desperate for any type of help.
I've googled the entire day REALLY need assistance.
Thank You !
I have some code below that helps visualize what I'm kinda looking for.
Please contact me if you need clarification or if I'm a bit confusing.
<form name="form1" method="post" action="">
<p>7-digit product#
<input type="text" name="model" id="model">
</p>
<p>
<input name="start" type="hidden" id="start" value="http://www.mywebsite.com/Products/">
</p>
<p>
<input name="end" type="hidden" id="end" value=".jpg">
</p>
<p><img name="proudctimage" src="=#start#model#end" width="32" height="32" alt=""></p>
</form>
<script>
var model_input = document.getElementById('model');
var start = document.getElementById('start');
var end = document.getElementById('end');
var image = document.getElementsByTagName('img');
model_input.onkeyup = function(e){
image[0].src = start.value + model_input.value + end.value;
}
</script>
~EDITED 9:00AM 5/29/12~
The Values entered in the textfield gets deleted if you hit enter
I need a way to grab a product's description stored in a H1 tag using the respective URL (The URL is the model number of what is entered in the textfield but uses a slightly different url structure that is different than the one used to grab images , see below ... http://mywebsite.com/ProductDetails.aspx?productid=TEXTFIELD)
***I Should make note that the URL used to get the H1 data will be a "cross domain" & not necessarily on the some domain. I read that jquery may not make requests on cross domains
You could use Jquery to do this easily.
Grab a copy of Jquery from http://www.jquery.com or use the CDN version by pasting this into your head section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Here's a simplified version:
If the start and end parts of your URL are not going to change you could simplify your form:
​<form>
<label>Model Num</label>
<input type="text" name="model" id="model" />
<input type="button" value="Update Image" id="update" />
</form>
<img src="" />
​
Then With the following Jquery code, you can detect a click on the update button, grab the code from the text box and change the image src attribute to
http://mysite.com/products/typed_code_here
Just paste the jquery code (and the script tags) into your head section
<script>
​$(document).on('click','#update',function(){
$('img').attr('src','http://mysite.com/product/'+$('#model').val()+'.jpg');
});​​​​​​
</script>
If you want to do this without Jquery and if your html has to remain as above, you could use the following along with your original html (watch out for spelling mistakes in your code):
<script>
var model_input = document.getElementById('model');
var start = document.getElementById('start');
var end = document.getElementById('end');
var image = document.getElementsByTagName('img');
model_input.onkeyup = function(e){
image[0].src = start.value + model_input.value + end.value;
}
</script>
The onkeyup event could be changed to blur, change etc depending on how you want to update the image. I'd suggest a button such that the user can update the image when they believe the code is valid.
Update​
The following github project has made progress on the front of cross domain html requests with jQuery. https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/
Basically you'd just need to grab the product page via ajax (jQuery.ajax()) and then in the ajax callback you'd have to scan the returned HTML for the h1 element. Ultimately cross domain ajax is a design pattern and there are best practices associated with it. Grabbing the whole HTML page for the sake of an h1 element is not very effective. Consider revising your approach and be sure to check any copyright laws/terms and conditions if the site you're referencing is not your own.
If your using jquery, you could do this:
$(function () {
$('#model').change(function () {
$('img[name="productimage"]').attr('src', $('#start').val() + $('#model').val() + $('#end').val());
});
});
In your html take a hidden div. suppose
<div id="loadSource"></div>
$('#model').blur(function () {
var modelVal = $.trim(this.value),
startVal = $.trim($('#start').val()),
endVal = $.trim($('#end').val());
if( modelVal && startVal && endVal) {
var imgUrl = startVal + modelVal + endVal,
siteUrl = startVal + modelVal;
$('img[name="productimage"]')
.attr('src', );
// process to get h1 tag
$('#loadSource').load(''+ siteUrl +' h1', function() {
console.log( $('#loadSource h1').text() );
});
}
});

Categories