Edited to show all code for clarity. The issue I am running into now is keeping the ui input class when copying the field as the way I cloned it before kept the formatting, but was not copying in a way that I was able to properly refactor the id when cloning. It is asking me to provide more details but that is about it I think. Oh, I also need to add a break at the end of each addition for proper formatting, but I just haven't gotten around to it.
<!DOCTYPE html>
<html>
<head>
<script>
var ct= 0;
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<script type="text/template" id="claim_field">
<div class="ui input">
<input type="text" placeholder="Claim #" id="claim1">
</div>
</script>
<script type="text/template" id="sku_field">
<div class="ui input" id=cpsku>
<input type="text" placeholder="SKU" id="sku1">
</div>
<br>
</script>
<div id="form">
<div type ="number" id= "requests"> </div>
<div class="ui input">
<input type="text" placeholder="Claim #" id="claim0">
</div>
<div class="ui input">
<input type="text" placeholder="SKU" id="sku0">
</div>
<br>
</div>
<div id="controls">
<button onclick="addRow()" class="ui button">
Add request
</button>
<br><br><br>
<button onclick="submit()" class="ui button">
Submit
</button>
</div>
<script>
function addRow(){
var start=document.getElementById('form');
ct+=1;
var clm= document.getElementById('claim0');
//window.alert(clm);
var cclone=clm.cloneNode(true);
var sk= document.getElementById('sku0');
var sclone=sk.cloneNode(true);
var e = document.createElement('div');
cclone.id= "claim"+(ct.toString());
//window.alert(cclone.id);
//window.alert(cclone.innerHTML);
sclone.id= "sku"+(ct.toString());
//window.alert(sclone.id);
//window.alert('gets here');
e.appendChild(cclone);
e.appendChild(sclone);
start.appendChild(e);
//start.appendChild(<br>);
}
function submit(){
var pairs =[]; // this will contain all the claim #s and skus at the end
var i;
//window.alert('value of ct is currently '+ct);
for(i=0; i< ct;i++){
//window.alert('ct is still '+ct);
//window.alert('I is currently '+i);
var req= [];
var bit = 'claim'+(i.toString());
var bot = 'sku'+(i.toString());
window.alert('currently searching for row '+bit);
window.alert('claim'+(i+1).toString()+' is '+document.getElementById(bit).value);
window.alert('sku'+(i+1).toString()+' is '+document.getElementById(bot).value);
}
}
</script>
</head>
</html>
I believe you're using the wrong id to fetch the input box:
var clm= document.getElementById('claim_field');
Note that claim_field is the id you've given your script tag.
Try this instead:
var clm= document.getElementById('claim1');
Related
I have a function which stores the data and after that function I wanted to give an popup message with link. I am able to submit data and create an popup using alert. But adding link in text is something I want. Below is the code I tried.
<!DOCTYPE html>
<html>
<base target="_top">
<head>
<script type="text/javascript">
function myfunction(from){
(function($){
var id = $("#id");
var wnum = $("#wnum");
var id = id[0]['value']
var wnum = wnum[0]['value']
if(from == 'submit'){
submitData(id,wnum) // data submitted
var str = "Inform us!";
var result = str.link("some_link");
alert("Thank you for submitting the form. "+result);
}
})(jQuery);
}
</script>
<body>
<div class="cen">
<div class="wrapper">
<h1>Font Selector</h1>
<fieldset class="fontForm grid">
<div class="grid-cell">
<div class="grid-cell size1of1">
<label for="fname">Order Id</label>
<input type="text" id="id" name="id" placeholder="Enter order id" >
<label for="fname">WhatsApp Number</label>
<input type="text" id="wnum" name="wnum" placeholder="Enter WhatsApp number">
<p><button onclick="myfunction('submit')">Submit</button></p>
</div>
</div>
</body>
</html>
How could I do this?
You cannot with alert. You will have to build an alert dialog that does not use it, e.g. using bootbox or something you build yourself.
Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>
I want when a user enter number in the textbox and click set, textboxes appear based on the number he entered and this what I come up with but it is not working please help
<html>
<head>
<script>
function generate(){
var a=parseInt(document.getElementById("nochapter").value);
for (i=0;i<=a,i++){
document.getElementById("ch").innerHTML="<input type='text' >"}}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included <input type="text" id="nochapter" >
<input type ="button" value="set" onclick="generate()">
<div id="ch"></div>
Your code should be like this.
Is better append an input element to the div.
<head>
<script>
function generate() {
var a = parseInt(document.getElementById("nochapter").value);
var ch = document.getElementById("ch");
for (i = 0; i < a; i++) {
var input = document.createElement("input");
ch.appendChild(input);
}
}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included
<input type="text" id="nochapter" />
<input type="button" value="set" onclick="generate()" />
<div id="ch"></div>
</form>
</body>
There is small glitch in your written code
for (i=0;i<=a,i++) --> for (i=0;i<=a;i++)
even if you change that it will generate only one text box because you are replacing innerHTML for every iteration. so prepare the string separately based on no of iteration and assign it to innerrHTML. it should work.
I'm having trouble getting the value of a custom prompt in PHP. I actually made a custom prompt that consist of two input boxes and stored it in a variable. When I clicked a button I'll just call it. I have no problem with this for its working well.
var popup = "div id='overlay'>
<div id='box_frame'>
<div id='box'><a href='javascript:closeDialog()'>close</a>
<h2>Edit Material</h2>
<h1>"+projName+"</h1>
<label>Material</label>
<input name='boxMatName' type='textbox' value='"+matName+"' disabled />
<br>
<label>Quantity</label>
<input id='boxEstVal' type='textbox' value='"+estQty+"' />
<br>
<button onclick='javascript:saveDesc()'>Save</button>
<div id='try'></div>
</div>
</div>
</div>
";
I tried this to get the value from the prompts:
function saveDesc(){
var mat = ('#boxMatName').val();
var est = ('#boxMatName').text();
alert(mat+est);
However, I am not getting any results. Can you help me understand what I am doing wrong?
why dont you give another id to your input:
var popup = "div id='overlay'>
<div id='box_frame'>
<div id='box'><a href='javascript:closeDialog()'>close</a>
<h2>Edit Material</h2>
<h1>"+projName+"</h1>
<label>Material</label>
<input name='boxMatName' id="boxMatName" type='textbox' value='"+matName+"' disabled />
<br>
<label>Quantity</label>
<input id='boxEstVal' type='textbox' value='"+estQty+"' />
<br>
<button onclick='javascript:saveDesc()'>Save</button>
<div id='try'></div>
</div>
</div>
</div>
then, this should work.
function saveDesc(){
var mat = $('#boxMatName').val();
var est = $('#boxEstVal').val();
alert(mat + ' - ' + est);
}
by the way, did you include the jquery in the head of your html file?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
You are using <input> so you need val() and not text():
var mat = $("input[name=boxMatName]").val();
var est = document.getElementById('boxEstVal').value; // or $('#boxEstVal').val();
The idea behind this small project of mine is to have an user enter an URL for an img, when the user hits a button the img should then be inserted into a new <div> within the page.
I tried looking for hours at stackoverflow but I honestly don't understand how I can use other answers to my own code. Most of the CSS and HTML code is already done, I just need help with the javascript part if its possible at all.
Here is what I have so far:
HTML code:
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed()" />
</form>
Javascript code:
<script type="text/javascript">
function GetFeed(imgForm) {
var imgSrc = document.getElementById("src").value;
}
</script>
Can anyone help me out? I dont know where to go from here.. at least give me some pointers how can i get the value from the txt box and add a new
<div><img src="user input from txt box should go here"/></div> for every time an unser inserts and new URL for an img?
I think according to your need how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> you need this
HTML
<form>
<input type="text" id="txt">
<input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
JS (goes inside your head tags)
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.src=url;
div.appendChild(img);
document.getElementById('images').appendChild(div);
return false;
}
Here is an example.
You should add an id attribute to your <input>:
<input type="text" name="inputbox1" id="box1" value="src" />
...then, adjust your code:
var imgSrc = document.getElementById('box1').value;
Once you have the source, you can get back an object for the img tag, and set its properties using the value from the text box. The img object's properties are defined by the Document Object Model:
http://www.w3schools.com/jsref/dom_obj_image.asp
Something like this will create a div with an image element that has a src equal to the text in the input box. It then appends the div to end of the page.
<html>
<head>
<script type="text/javascript">
function GetFeed(form){
var imgSrc = form.elements["inputbox1"].value;
var imgDiv = document.createElement('div');
imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
document.body.appendChild(imgDiv);
}
</script>
</head>
<body>
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
</form>
</body>
</html>
your codes better should be like this:
html Codes:
<div class="input-group col-md-5" style="margin: 0px auto;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-image">
Choose
</button>
</div>
<input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
<img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>
js Codes:
function getImg(){
var url = document.getElementById('image_label').value;
var img = document.getElementById('imgThumb');
img.src = url;
return true;
}