I am practicing to capture screenshot of webpage by using api.
I want to change the img src, on the button click.
Code is as follows:
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url"
id="input" value="" />
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
<button onclick="changeimg()">Capture</button>
</section>
And this is JavaScript:
<script type="text/javascript" charset="utf-8">
var url = document.getElementById("input").value;
function changeimg() {
document.getElementById("screenshot").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + url + "&dimension=1024x768";
}
</script>
You should get the input value inside the function and the img id is sh not screenshot
Now it's work
const input = document.getElementById("input");
function changeimg() {
document.getElementById("sh").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + input.value + "&dimension=1024x768";
}
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url" id="input" value="" />
<button onclick="changeimg()">Capture</button>
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
</section>
Related
I am trying to use a radio button which will change the theme (color) of my website based on the CSS file loaded.
I want it to show the changes live and the submit button is for saving the changes later.
HTML (Head)
<link rel="stylesheet" id="siteTheme" href="/sitefiles/theme/light.css">
HTML (Body)
<form action="#" method="POST">
<div class="row">
<div class="col-md-2">
<h2>Shading</h2>
<div style="margin-bottom: 1px;">
<input type="radio" name="colorscheme" id="1" value="1">
<label>Light</label>
</div>
<div style="margin-bottom: 1px;">
<input type="radio" name="colorscheme" id="2" value="2">
<label>Dark</label>
</div>
<div style="margin-bottom: 1px;">
<input type="radio" name="colorscheme" id="3" value="3">
<label>Fairy</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br/>
<center>
<span><input type="submit" class="btn btn-primary" value="Submit" name="submit"></span>
</center>
</div>
</div>
</div>
</form>
JS
var checkedButton1 = document.getElementById('1');
var checkedButton2 = document.getElementById('2');
var checkedButton3 = document.getElementById('3');
var light = "/sitefiles/theme/light.css";
var dark = "/sitefiles/theme/dark.css";
var fairy = "/sitefiles/theme/fairy.css";
checkedButton1.onclick = document.getElementById("siteTheme").setAttribute('href', light.value);
checkedButton2.onclick = document.getElementById("siteTheme").setAttribute('href', dark.value);
checkedButton3.onclick = document.getElementById("siteTheme").setAttribute('href', fairy.value);
I am getting no reaction from the button clicks and it's actually 'unloading' the template from the page?
You need to assign functions to the onclick properties. Note also that strings do not have a value property.
checkedButton1.onclick = ()=> document.getElementById("siteTheme").setAttribute('href', light);
checkedButton2.onclick = ()=> document.getElementById("siteTheme").setAttribute('href', dark);
checkedButton3.onclick = ()=> document.getElementById("siteTheme").setAttribute('href', fairy);
try to pass it in function
var checkedButton1 = document.getElementById('1');
checkedButton1.onclick = ()=>{
document.getElementById("siteTheme").href = light.value;
}
So I have a form with two identical group of inputs that represent education info. There could be more than two as I want to include a button to create a new group so the user can put all his education background like in LinkedIn.
<form id="formCV" action="">
<div id="educationContainer">
<!-- First Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
<!-- Second Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
</div>
</form>
Now, if I use the FormData API to get the form data like this:
for(let entry of formData.entries()){
console.log(entry);
}
I get the following output:
(2) ["institutionName", "Harvard"]
(2) ["courseName", "Web Development"]
(2) ["startDate", "2000-11"]
(2) ["endDate", "2008-11"]
(2) ["institutionName", "Oxford"]
(2) ["courseName", "Business Management"]
(2) ["startDate", "2009-10"]
(2) ["endDate", "2010-05"]
What I want to achieve is to get the output in an organized way, like this:
education:[
{
institutionName:"Harvard",
courseName:"Web Development",
startDate:"2000-11",
endDate:"2008-11"
},
{
...
}
]
So I'm interested in knowing the best approach to achieve this. Thanks in advance for any help!
It does not make sense to have two equal forms, with one being sufficient.
In addition to the form you should have a list that shows each item added.
It's what I recommend.
Not sure whether this is the best approach, but you can achieve the desired structure like this:
const formCV = document.querySelector('#formCV');
const formData = new FormData(formCV);
function groupEducationData(inputGroupSize = 4) {
const result = [];
let educationObj = null;
let counter = 0;
for (const entry of formData.entries()) {
// Since the counter is divisible by the number of inputs in a group
// only if one form group finishes. And when one form group finishes,
// we need to add the object into the result array
if (counter % inputGroupSize === 0) {
// if this is the first iteration, the educationObj is null and
// we don't want to add it to the result array yet
// we only add the educationObj to the result array if it is
// an object containing the education info
if (educationObj) result.push(educationObj);
// initialize the educationObj at the start
// and after one form finishes
educationObj = {};
}
// add entry[0] as key to the object (e.g. 'institutionName')
// with the value of entry[1] (e.g. 'Harvard')
educationObj[entry[0]] = entry[1];
counter++;
}
return result.concat(educationObj);
}
console.log(groupEducationData());
<form id="formCV" action="">
<div id="educationContainer">
<!-- First Group -->
<div class="education">
<div>
<input type="text" name="institutionName" value="Harvard">
</div>
<div>
<input type="text" name="courseName" value="Web Development">
</div>
<div>
<input type="month" name="startDate" value="2000-11">
</div>
<div>
<input type="month" name="endDate" value="2008-11">
</div>
</div>
<!-- Second Group -->
<div class="education">
<div>
<input type="text" name="institutionName" value="Oxford">
</div>
<div>
<input type="text" name="courseName" value="Business Management">
</div>
<div>
<input type="month" name="startDate" value="2009-10">
</div>
<div>
<input type="month" name="endDate" value="2010-05">
</div>
</div>
</div>
</form>
You can try FormData.getAll() and iterate over each group entry.
const institutionNames = formData.getAll('institutionName');
const courseNames = formData.getAll('courseName');
...
const educations = [];
for (let i = 0; i < institutionNames.length; i++) {
educations.push({
institutionName: institutionNames[i],
courseName: courseNames[i],
...
});
}
This is also a way to populate your desired format data.
$(document).ready(function(){
$(":button").click(function(){
var educations=$("#formCV .education");
var data=[];
educations.each(function(i,education){
var set={}
$(education).find(":input").each(function(i,value){
set[$(value).attr("name")] = $(value).val();
});
data.push(set);
})
console.log("data",data)
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="formCV" action="">
<div id="educationContainer">
<!-- First Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
<!-- Second Group -->
<div class="education">
<div>
<input type="text" name="institutionName">
</div>
<div>
<input type="text" name="courseName">
</div>
<div>
<input type="month" name="startDate">
</div>
<div>
<input type="month" name="endDate">
</div>
</div>
</div>
<input type="button" value="click me"/>
</form>
</body>
</html>
This is run automatic. i need it run when call window.onload, not run before call window.onload, because i want to create function as a template code to embed other side, just change id, or className input
Thanks
function changeResultBox(resultTextClassName,inputSearchToggleId){
var inputSearchToggle=document.getElementById(inputSearchToggleId),
resultText=document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML='"'+inputSearchToggle.value+'"';
resultText[1].innerHTML='"'+inputSearchToggle.value+'"';
}
window.onload=function(){
document.getElementById('Store-Page-Search-Input').onkeyup =
changeResultBox('search-bar-item__text','Store-Page-Search-Input');
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value=""/>
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
Bind event on the input itself onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')".
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
function changeResultBox(resultTextClassName, inputSearchToggleId) {
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" onkeyup="changeResultBox('search-bar-item__text','Store-Page-Search-Input')" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
function changeResultBox(resultTextClassName, inputSearchToggleId) {
//var resultTextClassName = 'search-bar-item__text';
//var inputSearchToggleId = 'Store-Page-Search-Input';
var inputSearchToggle = document.getElementById(inputSearchToggleId),
resultText = document.getElementsByClassName(resultTextClassName);
resultText[0].innerHTML = '"' + inputSearchToggle.value + '"';
resultText[1].innerHTML = '"' + inputSearchToggle.value + '"';
}
window.onload = function() {
document.getElementById("Store-Page-Search-Input").addEventListener("keyup", changeResultBox.bind(event, 'search-bar-item__text', 'Store-Page-Search-Input'));
}
<input type="text" id="Store-Page-Search-Input" class="search-bar__input" name="txtsearchbar" placeholder="Find product, find shop,..." autocomplete="off" value="" />
<div class="search-bar-item">
<div class="search-bar-item__title">find product </div>
<div class="search-bar-item__text"></div>
</div>
<div class="search-bar-item">
<div class="search-bar-item__title">find shop </div>
<div class="search-bar-item__text"></div>
</div>
As the title would suggest I keep getting that error when trying to test out a basic script which would "read" form inputs and make them variables to use later on.
HTML:
<script type="text/javascript" language="javascript"
src="./js/lisearch.js"></script>
<form name="search" action="" method="post">
<h2>Include:</h2>
<div id="formtitle" class="formdiv">
<p> Current Job Title:</p><input id="jtitle" type="text" name="jobtitle" placeholder="Demand planner, Supply planner">
</div>
<div id="formcompany" class="formdiv">
<p> Current Company:</p><input id="cmpy" type="text" name="company" placeholder="GSK OR Danone">
</div>
<div id="formkeywords" class="formdiv">
<p> Keywords:</p><input id="kwrd" type="text" name="keywords" placeholder="(SAP OR JDE) AND FMCG">
</div>
<div id="formfirst" class="formdiv">
<p> First Name:</p><input id="fname" type="text" name="first">
</div>
<div id="formlast" class="formdiv">
<p> Last Name:</p><input id="lname" type="text" name="last">
</div>
<hr>
<h2> Exclude:</h2>
<div id="formnottitle" class="formdiv">
<p> Current Job Title:</p><input id="njtitle" type="text" name="notjobtitle" placeholder="Manager OR Consultant">
</div>
<div id="formnotcompany" class="formdiv">
<p> Current Company:</p><input id="ncmpy" type="text" name="notcompany" placeholder="Coke OR Pepsi">
</div>
<div id="formnotkeywords" class="formdiv">
<p> Keywords:</p><input id="nkwrd" type="text" name="notkeywords" placeholder="Recruiter OR Recruitment">
</div>
<div id="submit" class="formdiv">
<input type="button" value="Create Search" onclick="onclick()">
</div>
<div id="output" class="formdiv">
<input type="text" name="output">
</div>
</form>
JS:
var company;
var jobtitle;
var keywords;
var fname;
var lname;
var notcompany;
var notjobtitle;
var notkeywords;
function onclick() {
company = document.getElementById('cmpy').value;
jobtitle = document.getElementById('jtitle').value;
keywords = document.getElementById('kwrd').value;
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
notcompany = document.getElementById('ncmpy').value;
notjobtitle = document.getElementById('njtitle').value;
notkeywords = document.getElementById('nkwrd').value;
test();
}
function test() {
alert(company + jobtitle + keywords + fname + lname + notcompany + notjobtitle + notkeywords);
}
As you can probably tell I am really new to all this but can't seem to figure this out, any help appreciated.
Thanks,
This kind of message you get when doing recursive calls and get stuck somewhere in a cycle. in your case rename onclick() function to something else, that's it!
Here I made a plunker
function toto() {
company = document.getElementById('cmpy').value;
jobtitle = document.getElementById('jtitle').value;
keywords = document.getElementById('kwrd').value;
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
notcompany = document.getElementById('ncmpy').value;
notjobtitle = document.getElementById('njtitle').value;
notkeywords = document.getElementById('nkwrd').value;
test();
}
function test() {
alert(company + jobtitle + keywords + fname + lname + notcompany + notjobtitle + notkeywords);
}
and
<input type="button" value="Create Search" onclick="toto()">
put function test at the top of your js code so that onclick() knows what it is when the event handler is assigned.
Edit: Additional feedback:
The test function isn't even needed. Just insert the alert code into the onclick function.
edit: Moving the script tags shouldn't actually have any effect. I am not sure what is going wrong here.
Edit:solved it
<form name="search" action="" method="post">
<h2>Include:</h2>
<div id="formtitle" class="formdiv">
<p> Current Job Title:</p><input id="jtitle" type="text" name="jobtitle" placeholder="Demand planner, Supply planner">
</div>
<div id="formcompany" class="formdiv">
<p> Current Company:</p><input id="cmpy" type="text" name="company" placeholder="GSK OR Danone">
</div>
<div id="formkeywords" class="formdiv">
<p> Keywords:</p><input id="kwrd" type="text" name="keywords" placeholder="(SAP OR JDE) AND FMCG">
</div>
<div id="formfirst" class="formdiv">
<p> First Name:</p><input id="fname" type="text" name="first">
</div>
<div id="formlast" class="formdiv">
<p> Last Name:</p><input id="lname" type="text" name="last">
</div>
<hr>
<h2> Exclude:</h2>
<div id="formnottitle" class="formdiv">
<p> Current Job Title:</p><input id="njtitle" type="text" name="notjobtitle" placeholder="Manager OR Consultant">
</div>
<div id="formnotcompany" class="formdiv">
<p> Current Company:</p><input id="ncmpy" type="text" name="notcompany" placeholder="Coke OR Pepsi">
</div>
<div id="formnotkeywords" class="formdiv">
<p> Keywords:</p><input id="nkwrd" type="text" name="notkeywords" placeholder="Recruiter OR Recruitment">
</div>
<div id="submit" class="formdiv">
<input type="button" id="onclick" value="Create Search"/>
</div>
<div id="output" class="formdiv">
<input type="text" name="output"/>
</div>
</form>
<script type="text/javascript">
var company;
var jobtitle;
var keywords;
var fname;
var lname;
var notcompany;
var notjobtitle;
var notkeywords;
document.getElementById("onclick").onclick=function() {
company = document.getElementById('cmpy').value;
jobtitle = document.getElementById('jtitle').value;
keywords = document.getElementById('kwrd').value;
fname = document.getElementById('fname').value;
lname = document.getElementById('lname').value;
notcompany = document.getElementById('ncmpy').value;
notjobtitle = document.getElementById('njtitle').value;
notkeywords = document.getElementById('nkwrd').value;
alert(company + jobtitle + keywords + fname + lname + notcompany + notjobtitle + notkeywords);
}
</script>
I want to make a book catalog with JQuery to add books to a author. In the code That I have I am trying to add a author and have his books be in a array with his number only. Separated by other authors and their own arrays of books.
For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name.
When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author).
Also to add multiple books assigned to that author.
I have already done this in the pics but I get an array of everything. I want it to be separated by author.
author1 has an array of {book1, book2, book3...}
author2 has an array of {book13, book14, book15}
(i'm a beginner at JQuery)
This is the code that I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
updated code(fixed some bugs..), try this....
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" />'
+'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
var val = confirm("Are you sure ..?");
if(val){
$("#"+id).slideUp(function(){$("#"+id).remove();});
}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>
Please try this code and include jquery min js :
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> Remove</div>');
} </script>
You can try this....
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>