Getting Value from a Custom Prompt - javascript

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();

Related

Trouble copying and renaming an element by id

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');

Why does my attempt to add a new row to my table (made w/o a table element) keep showing up and disappearing?

I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>

jQuery Mobile how to set text to multiple input value

jQM code
for(var key in sessionStorage)
{
var item = sessionStorage.getItem(key);
var viewItem = $.parseJSON(item);
var titleR = viewItem.title;
$(".showTitleR").val(titleR);
}
html code
<div role="main" class="ui-content">
<div>
<input class="showTitleR" type="text" value="one and last value" />
</div>
</div>
The problem is that I can set only one and last value.
What I want is the list of all keys like this:
<div role="main" class="ui-content">
<div>
<input class="showTitleR" type="text" value="first" />
<input class="showTitleR" type="text" value="..." />
<input class="showTitleR" type="text" value="last" />
</div>
</div>
How can I solve it? Any help will be appreciated.
From what I see and if I understand correctly what are you trying to do - you are changing value for the same HTML element. You either create new HTML element or clone current and then change its value.
var item = $(".showTitleR");
item.clone().append(item.parent());
Try this:
for(var key in sessionStorage){
var item = sessionStorage.getItem(key);
var viewItem = $.parseJSON(item);
var titleR = viewItem.title;
$(".showTitleR:eq(0)").clone().val(titleR).insertAfter($(".showTitleR:last");
}

POST DATA issues when adding new elements to the page

Hi all I have a form in which I dynamically add in a new row consisting of a text box and check button on button press. However I need some sort of way to know which checkbuttons were pressed in the post data and therefore need a value field consisting of an ID on each of the the check buttons, code is seen below:
<div id='1'>
<div class="template">
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
JS to add new row:
var $template = $('.template');
$('input[type=button]').click(function() {
$template.clone().insertAfter($template);
});
can anyone suggest a good way to help me know in the post data which text field, links to which check button, and to know if it was pressed?
at the moment if you were to add 3 rows and check row 3 I have no way of identifying that row three was the button pressed - This is my issue
after you cloned it, change the name so you know about this input
also it's good to have a counter for naming:
like : 'somename[myInput' + counter + ']'
update:
var counter = 0;
var $template = $('.template');
$('input[type=button]').click(function() {
counter++;
$template.clone().attr('name' , 'somename[myInput' + counter + ']').insertAfter($template);
});
now you have array named:somename which you can have a loop over its content on your form handler.

How to display user entered information using JavaScript?

I have a form code tat will allow the user to enter information. I'm trying to display certain parts of that information onto a new page using javascript. Basically, the page is meant to have the user enter information and have the name, date, time, and email display in a new tab or page. But I can't seem to have it displayed. Can anyone help me?
<html lang="en" >
<head>
<title>Shy Music Booking Confirmation</title>
<link rel="stylesheet" href="music.css" type="text/css" />
<body>
<div id="wrapper">
<div id="form">
<header><h1>Shy Music Private Lessons</h1></header>
<script type="text/javascript">
function addtext()
{
var userName = document.booking.userName.value;
var userDate = document.booking.userDate.value;
var userTime = document.booking.userTime.value;
var userEmail = document.booking.userEmail.value;
document.writeln("Thank you! You have just entered the following:");
document.writeln("<pre>");
document.writeln("Name: " + userName);
document.writeln("Date: " + userDate);
document.writeln("Time: " + userTime);
}
</script>
</head>
<hr>
<form name="booking">
<h1>Book a Slot Here!</h1>
<label for="userName">Name: <br><input type = "text" name = "userName"></label> <br><br>
<label for="userEmail">E-mail Address: <br><input type = "email" name = "userEmail"></label><br><br>
<label for="userPhone">Phone Number: <br><input type = "tel" name = "userPhone"> </label><br><br>
<label for="userInstrument">Instrument:
<select>
<option>Guitar</option>
<option>Drums</option>
<option>Piano</option>
</select>
</label>
<br><br>
<label for="userTime">
Preffered Time:
<select>
<option>9:00</option>
<option>9:30</option>
<option>10:00</option>
<option>10:30</option>
<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>12:30</option>
<option>1:00</option>
<option>1:30</option>
<option>2:00</option>
<option>2:30</option>
<option>3:00</option>
<option>3:30</option>
<option>4:00</option>
<option>4:30</option>
</select>
</label>
<select>
<option>AM</option>
<option>PM</option>
</select>
<br>
<br>
<label for="userDate">Date: <br><input type = "date" name = "userDate"></label><br><br>
<input type="submit" value="Submit" >
<form action="#">
<input type="button" value = "Back" onclick="javascript:history.go(-1)" />
</form>
</form>
</div>
</div>
</body>
</html>
I was working on this for a lot of time, but it wasn't working. But, I tried it recently and it worked! I hope this was helpful.
<html>
<head>
<h1> Welcome</h1>
</head>
<body>
<p> Enter name: </p>
<input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required>`
<input type="Submit" onclick="submitted()"> <br> <br>
<a id="new" href="www.google.com"> </a>
<script>
function submitted()
{
var a = document.getElementById("name").value;
if (a=="")
{
document.getElementById("new").innerHTML="";
alert("Please Enter a valid name!");
}
else if (a==" ") {
document.getElementById("new").innerHTML=""
alert("Please Enter a valid name!");
}
else
{
document.getElementById("new").innerHTML="Thank you, " + a + ". " + "Click here to continue.";
}
}
</script>
</body>
</html>
Or, slightly tightened, as a working snippet:
function submitted()
{
var a = document.getElementById("name").value.trim();
document.getElementById("new").innerHTML=
a===""?"":"Thank you, " + a + ". " + "Click here to continue.";
}
<p> Enter name: </p>
<input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required>
<input type="Submit" onclick="submitted()"> <br> <br>
<a id="new" href="www.google.com"> </a>
The problem with your code was that you were using document.write in a dynamic setting. When using it in this context, document.write will erase the content of the current document and replace it with the text specified by its parameters. For this reason, document.write is commonly regarded as poor way to represent and insert text/data. And it typically affects the plethora of beginners learning JavaScript. Here are some alternatives you should keep in mind:
element.innerHTML: Like I said in the comments. Use .innerHTML to insert the formatted HTML into document through an element on the page. It doesn't necessarily have to be specified by an id attribute. It can very well be given by any other form of element obtainment.
node.appendChild: This method is more DOM-friendly than the first. It allows you to insert a node at the end of the body of the element specified by node. For example:
var form = document.myForm,
new_element = document.createElement('input');
new_element.type = "button";
new_element.value = "Submit";
form.appendChild( new_element );
I hope this helped.

Categories

Resources