Develop Reference

HTML button has to be pressed twice to get the table

This is my HTML:
<form id="form1" method="POST" action="" enctype="">
<table>
<tr>
<td>
<br>
MySQL
</td>
<td>
User <br>
<input type="text" name="user" id="user" required>
</td>
<td>
Password <br>
<input type="text" name="pwd" id="pwd" required>
</td>
<td>
Database <br>
<input type="text" name="db" id="db" required>
</td>
<td>
<br>
<button type="submit" id="goBtn">Go</button>
</td>
</tr>
</table>
</form>
And this is the jquery and Ajax call:
$(document).ready(function(){
$("#form1").on('submit', function(e){
e.preventDefault();
// const user = $("#user").val();
// const pwd = $("#pwd").val();
// const db = $("#db").val();
console.log("MESSSADRFE")
var text = document.getElementById("showDatabaseTableForm");
if (text.style.display === "none"){
text.style.display = "block";
} else{
text.style.display = "none";
}
var login = {
user: $("#user").val(),
pwd: $("#pwd").val(),
db: $("#db").val()
}
$.ajax({url: 'http://127.0.0.1:5000/qbe/?query={login(user:"'+$("#user").val()+ '",pwd:"'+
$("#pwd").val()+ '",db:"'+$("#db").val()+ '"){table}}',
"headers": {
"accept": "application/json",
"Access-Control-Allow-Origin":"*"
},
type:'POST',
data: login,
success: function(result){
data = result.data.login;
var htmlCode = "<table><tr>";
arr = [];
for(var i = 0; i < data.length; i++){
var item = Object.values(data[i]);
//arr.push(item);
console.log(item);
htmlCode+= '<td><b>'+item+":"+'</b></td>'
htmlCode +='<td><select id="dropdwn">'+
'<option value="0">0</option>';
for (var j = 1; j< 3; j++){
htmlCode+='<option id="first" value="'+item+'">'+j+'</option>';
console.log(j);
}
//htmlCode += '</td>';
}
htmlCode += "</select></td></tr><table>";
htmlCode +='<input type="button" value="Get Skeletons" onclick="getInfo()"><input type="reset" value="Reset Skeletons">'
$("#showDatabaseTableForm").html(htmlCode);
},
error: function(error){
alert("ERROR");
console.log(console.error);
}
});
});
});
The first time I click on the button 'Go', nothing happens, the second time, it displays the result. Can help someone help me fix the jquery code? I want to be able to click the button once.
Thank you

I could be wrong here, but what is the purpose of this?
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
Feels like the first time you click the button you hide the element, then the second time around, as the display is "none", you show it.

How to give jsp path to a function in javascript

I have a jsp page which is
"addSource.jsp"
present in eclipse as shown in the picture.
Now my question is i have a javascript function where i have to give "addSource.jsp" in it so that it can move to that page from the current jsp page on button click.The code is as follows
function addRow(type) {
if (type == '') {
alert("Field is empty");
}
else {
var table = document.getElementById('my_table'); //html table
var rowCount = table.rows.length; //no. of rows in table
var columnCount = table.rows[0].cells.length; //no. of columns in table
var row = table.insertRow(rowCount); //insert a row
var cell1 = row.insertCell(0); //create a new cell
var element1 = document.createElement("input"); //create a new element
element1.type = "text"; //set the element type
element1.setAttribute('id', 'source'); //set the id attribute
element1.setAttribute('name','source'+rowCount);
element1.setAttribute('value',type);
cell1.appendChild(element1);
}
}
function generate1() {
var table = document.getElementById('my_table');
var rowCount = table.rows.length;
alert(rowCount);
var f = document.form;
f.target="";
f.method="post";
f.action= 'addSource.jsp?rowCount='+rowCount;
}
<form id="form">
<input type="text" id="origin" name="element"/>
<table id="my_table">
<thead><tr>
<th>Source</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="Add row" name="add" onClick="addRow(document.forms[0].element.value)" />
<input type="submit" value=" Save" />

You can use location.href Add an id to your form (for example formId) and use something like this:
<script type="text/javascript">
document.getElementById("formId").onclick = function () {
location.href = "addSource.jsp";
};

var x=1
function appendRow(type)
{
var d = document.getElementById('div');
d.innerHTML += "<input type='text' id='source' name='source' value='"+ type +"'><br >";
}
<form action="Source" method="post">
<input type="text" id="origin" name="origin"/>
<div id="div">
<button onclick ="appendRow(document.forms[0].origin.value)" value="Add Row">Add Row</button>
</div>
<input type="submit" name="Save" value=" Save" />
<hr/>
</form>
Controller
#RequestMapping(value = "/Source",params="Save", method = RequestMethod.POST)
public String source(Model model,HttpServletRequest req,HttpServletResponse res,#RequestParam("source") List<String> ola) {
System.out.println("size is:" +ola.size());
for(int i=0; i<ola.size() ;i++) {
String srh = ola.get(i);
System.out.println("srh value is:" +srh);
}
return "redirect:/createPoints";
}

Passing array input values to code.gs on google app scripting

I have a form with input array and I want to initialized the input value by another Global array value and pass the value to code.gs .
But I couldn’t get the value I passed in code.gs.
Would you help me please?
Thank you!
Html part
<form id="downloadpdf">
<input id="urlclass" type="text" name="urlname[]" />
<input type="submit" value="Download" />
</form>
Javascript
<script>
var urllink=[]; // Global variable a return from another function
$(document).ready(function() {
function another(){
var url=[]; // it is a dynamic value I get it from another function eg. url[0]=”www.abc.com” ,url[1]=”www.abcd.com”, url[2]=”www.abcde.com”....
urllink.push(url); // Assigning the global array value by the urls
}
$("#downloadpdf").submit(function() {
$("#urlclass").val(urllink); // assigning the input value by the Global array value.
google.script.run.withSuccessHandler(function(retsearch){
}).downloadthefile(this);
});
});
</script>
Code.gs
function downloadthefile(urlpass){
Logger.log(urlpass.urlname); // I couldn’t get the urls here
}

This is a simple HTML file communicating with Google Apps Script contained in a Spreadsheet. I test it a lot as a dialog and I also run it as a web app. The HTML file and the Google Apps Script communicate with each other and I pass the contents of 4 textboxes back to the Google Script as an array.
The Code.gs file:
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData(a)
{
var ts = Utilities.formatDate(new Date(), "GMT-6", "M/d/yyyy' 'HH:mm:ss");
a.splice(0,0,ts);
var ss=SpreadsheetApp.openById('SPREADSHEETID')
ss.getSheetByName('Form Responses 1').appendRow(a);
return true;
}
function getURL()
{
var ss=SpreadsheetApp.openById('SPREADSHEETID');
var sht=ss.getSheetByName('imgURLs');
var rng=sht.getDataRange();
var rngA=rng.getValues();
var urlA=[];
for(var i=1;i<rngA.length;i++)
{
urlA.push(rngA[i][0]);
}
return urlA;
}
The index.html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="data">
<br />Text 1<input name="t1" type="text" size="15" id="txt1" placeholder="Text 1" />
<br />Text 2<input name="t2" type="text" size="15" id="txt2" placeholder="Text 2" />
<br />Text 3<input name="t3" type="text" size="15" id="txt3" placeholder="Text 3" />
<br />Text 4<input name="t4" type="text" size="15" id="txt4" placeholder="Text 4" />
<br /><input type="radio" name="Type" value="Member" checked />Member
<br /><input type="radio" name="Type" value="Guest" />Guest
<br /><input type="radio" name="Type" value="Intruder" />Intruder
<br /><input type="button" value="submit" id="btn1" />
<br /><img id="img1" src="" alt="img1" width="300" />
</div>
<div id="resp" style="display:none;">
<h1>Response</h1>
<p>Your data has been received.</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click(validate);
$('#txt4').val('');
$('#txt3').val('');
$('#txt2').val('');
$('#txt1').val('')
google.script.run
.withSuccessHandler(setURL)
.getURL();
});
function setURL(url)
{
$('#img1').attr('src',url[0]);
}
function setResponse(a)
{
if(a)
{
$('#data').css('display','none');
$('#resp').css('display','block');
}
}
function validate()
{
var txt1 = document.getElementById('txt1').value || '';
var txt2 = document.getElementById('txt2').value || '';
var txt3 = document.getElementById('txt3').value || '';
var txt4 = document.getElementById('txt4').value || '';
var type = $('input[name="Type"]:checked').val();
var a = [txt1,txt2,txt3,txt4,type];//This gets passed as an array;
if(txt1 && txt2 && txt3 && txt4)
{
google.script.run
.withSuccessHandler(setResponse)
.getData(a);
return true;
}
else
{
alert('All fields must be completed.');
}
}
function loadTxt(from,to)
{
document.getElementById(to).value = document.getElementById(from).value;
}
function radioValue()
{
var radios = document.getElementsByName('genderS');
for (var i = 0, length = radios.length; i < length; i++)
{
if(radios[i].checked)
{
return radios[i].value;
}
}
}
console.log('My Code');
</script>
</body>
</html>

retrieving multiple cookie values in a single cookie in javascript

I had post this problem before, dealing with the shopping cart application. The application so far does everything that i would like it to do. I'm able to store and retrieve the cookies. But right now, my problem is extracting the individual values from the cookies and placing them into a table i have created. This is the format of the cookie when retrieved.
ItemName = quantity$price. what i am trying to do is retrieve the quantity and price values from the cookie, and display that data into my table. the cookie is being created in my store page, and then retrieved and displayed in my cart page. here is the code for my store page
store.html
<html>
<head>
<title> Store </title>
<h1> My store </h1>
<script type="text/javascript">
function retr(circle)
{
var cke = document.cookie.split(';');
var nameCk= name + "=";
for(var i=0; i < cke.length; i++)
{
var c = cke [i];
while (c.charAt(0)==' ') c = c.substring(1, c.length);
if (c.indexOf(nameCk) == 0)
return c.substring(nameCk.length, c.length);
}
return null;
}
function createCookie()
{
var exdate = new Date();
exdate.setDate(exdate.getDate() +10);
if (document.getElementById("circle").checked)
{
document.cookie = "Circle=" + document.getElementById("quantity1").value + document.getElementById("price1").value + ";expires="+exdate.toGMTString();
}
}
function retrieve()
{
if (document.getElementById("circle").checked)
{
document.getElementById("ret").value = document.cookie;
}
}
function Calc()
{
var fpri = document.getElementById("price1").value;
var pri = fpri.substr(1);
var qty = document.getElementById("quantity1").value;
var spri = document.getElementById("price2").value;
var pri2 = spri.substr(1);
var qty2 = document.getElementById("quantity2").value;
if (document.getElementById("circle").checked)
{
document.getElementById("total").value ='$' + Number(pri) *
Number(qty);
}
else
document.getElementById("total").value = '$' + Number(pri2) *
Number(qty2);
}
</script>
</head>
<body>
<table border = "1">
<tr>
<td> <input type="checkbox" id="circle" /> Circle </td>
<td> <img src="circle.jpg"> </img> </td>
<td> Price: <input type="text" size="4" value = "$10.00"
id="price1" name = "price1" /></td>
<td> Quantity: <input type="text" size = "4"
id="quantity1"/></td>
</tr>
<tr>
<td> <input type = "checkbox" id="stickman" /> Stickman </td>
<td> <img src = "stickman.gif"> </img> </td>
<td> Price: <input type="text" size="4" value = "$5.00"
id="price2" /> </td>
<td> Quantity: <input type="text" size="4" id="quantity2" />
</td>
</tr>
</table>
<br />
<input type = "button" value = "Add to cart"
onclick="createCookie()">
<br />
<br />
<a href ="cart.html" > View Cart </a>
<br />
<input type = "text" size = "8" id = "total" readonly = "readonly"
/> Total
<br />
<input type = "button" id = "calcu" value = "calc" onclick = "Calc
()" />
<input type = "button" value = "retrieve" onclick = "retrieve()" />
<input type = "text" readonly = "readonly" name = "ret" id =
"ret"/>
</body>
</html>
the calculate and retrieve buttons, and the readonly text boxes are there just so i know the cookie is being stored and retrieved, and that i'm able to get the total, which will be displayed on my cart page.
here is the code for my cart page
cart.html
<html>
<head>
<title> Cart </title>
<h1> My cart </h1>
<script type = "text/javascript">
function retr(circle)
{
document.getElementById("q2").value = document.getElementById("quantity1").value
}
function retrieve()
{
var quvalue = retr("circle")
if (quvalue != false) {
document.getElementById("q2").value = quvalue
}
document.getElementById("ret").value = document.cookie;
}
</script>
</head>
<body onload = "retrieve()">
<table border = "1">
<td>Stickman </td>
<td><input type = "text" size = "8" id = "q2" readonly = "readonly" /></td>
<td id ="p1"> price per </td>
<td id ="t1"> total </td>
<tr> </tr>
<td> Circle </td>
<td> quantity order </td>
<td> price per </td>
<td> total </td>
<tr> </tr>
<td colspan = "3"> TOTAL: </td>
<td> total price </td>
</table>
<br /> <br />
<input type ="text" id = "ret" readonly = "readonly" />
<br / > <br />
<input type = "button" value = "Checkout">
<br /> <br />
<a href = "store.html" > Continue Shopping </a>
</body>
</html>
the values that are supposed to be retrieved in the table are invoked using the onload event attribute which is suppose to call the retrieve() function.
also, i understand that the way i created the table in my carts page isn't completely correct. but my main focus right now is to get the necessary values to be displayed in my table, then i will go back in rewrite my table code.

Javascript dynamically created form field validation

I have created a form with a dynamically created field and i am trying to find a way to validate all the fields with javascript. I just want to alert the user that a field is null. Here is my code:
<script>
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form['field[]'];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I was expecting that will work but i was obviously wrong:(
With this code if i haven't pressed the "New field" button and press submit i will get the alert as expected. But on all other cases i am not getting anything!
Thanks for your time anyway, and sorry if i have made grammar mistakes!

<script type="text/javascript">
var counter = 0;
function addInput(divName){
counter++;
var Ai8ousa = document.createElement('div');
Ai8ousa.innerHTML = "Field: "+(counter +1) + "<input type='text' name='field[]'>";
document.getElementById(divName).appendChild(Ai8ousa);
}
function validations(form){
var field;
var i=0;
do{
field=form[i];
if (field.value=='')
{
alert('The field is null!!!');
return false;
}
i++;
}while(i<counter);
}
</script>
<form action="" method="post" onsubmit="return validations(this)" >
<div id="dynamicInput">
Field : <input type="text" name="field[]" /> <br />
</div>
<input type="button" value="New field" onClick="addInput('dynamicInput');">
<input type="submit" value="Submit" />
</form>
I don't understand this line: field=form['field[]'];, so I changed it to field=form[i];
http://jsfiddle.net/sZ4sd/