Tilke1955 Posted March 1, 2015 Share Posted March 1, 2015 Hello, I am building a site to record results to a MySql database. The visitors have to fill in 10 numbers between 1 and 10. It can be the same numbers ex: 5,5,5,5,8,8,8,10,10,10 (total=74) First: I need to block the input when there are exact 10 numbers. I have no clue how to do that. Two: The 10 numbers and the total must go to a database. The output is everytime different and how can i give a unique naam to the output. I hope that someone nows the answers to my problems. My native language is not English and i hope i have it explained good. What I have made so far : <!DOCTYPE html> <html> <title>Series 1</title> <body> </script> <p>Klick on number:</p> <button onclick="myFunctionGetal10()">10</button> <button onclick="myFunctionGetal9()"> 9</button> <button onclick="myFunctionGetal8()"> 8</button> <button onclick="myFunctionGetal7()"> 7</button> <button onclick="myFunctionGetal6()"> 6</button> <button onclick="myFunctionGetal5()"> 5</button> <button onclick="myFunctionGetal4()"> 4</button> <button onclick="myFunctionGetal3()"> 3</button> <button onclick="myFunctionGetal2()"> 2</button> <button onclick="myFunctionGetal1()"> 1</button> <br> <br> <p> Result: <script> function myFunctionGetal1() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "1"); document.body.appendChild(x); } function myFunctionGetal2() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "2"); document.body.appendChild(x); } function myFunctionGetal3() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "3"); document.body.appendChild(x); } function myFunctionGetal4() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "4"); document.body.appendChild(x); } function myFunctionGetal5() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "5"); document.body.appendChild(x); } function myFunctionGetal6() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "6"); document.body.appendChild(x); } function myFunctionGetal7() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "7"); document.body.appendChild(x); } function myFunctionGetal8() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "8"); document.body.appendChild(x); } function myFunctionGetal9() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "9"); document.body.appendChild(x); } function myFunctionGetal10() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "10"); document.body.appendChild(x); } </script> </body> </html> Link to comment Share on other sites More sharing options...
justsomeguy Posted March 2, 2015 Share Posted March 2, 2015 The only thing the code does is create more buttons when you click a button, right?How about giving them 10 text boxes, and they can type the numbers into each box? Or, instead of having 10 functions which all pretty much do the same thing, how about 1 function that you pass the value to? e.g.: function myFunctionGetal(num) { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", num); document.body.appendChild(x);}You could modify that function so that it stores all of the numbers in an array, and when you have 10 numbers in the array then you can do something else. Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 2, 2015 Author Share Posted March 2, 2015 Thanks @justsomeguy This works fine. I had to change all the html lines: ex: <button onclick="myFunctionGetal10()">10</button> to ex: <button onclick="myFunctionGetal(10)">10</button> and then it works perfectly. I am going to try to modify the function into: store it as an array, as you suggested. I will try it first by myself, and when i become desperate, i will come back to the forum. Tilke1955 Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 3, 2015 Author Share Posted March 3, 2015 Hi, now i am desperate. The results by clicking on the button is a new button so the users can see what numbers they have used. So far so good. But now is the question: How do i modify the function to write it in a array. And how can i link this 10 new buttons with my db columnames.( 101, 102,....110, total) The result of the array must be something like this ? var serieArray = new Array("5","5","5","5","8","8","8","10","10","10","Array_sum") showArray(serieArray); This is to see for the users what they filled in and show them a total. And when the user agreed i will make a "insert to button" to fill the database from the 'serieArray'. Thanks Tilke1955 Link to comment Share on other sites More sharing options...
justsomeguy Posted March 3, 2015 Share Posted March 3, 2015 You can use a global array variable to store your list of numbers. Each time that functions runs, it can check the length of the array and, if it is less than 10, add the new number to it. If the array already has 10 numbers then you can show a message or whatever else you want to do. You could use ajax to send the data to the server so that you can put it in the database, or write the array values to a hidden form input and then submit the form. Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 5, 2015 Author Share Posted March 5, 2015 I am stucked again. There are so many examples on the forums but they are all with a fixed item to add to an existing Array. Never i find an example with an empty Array that i can fill with a result from a button. I am sure i need some or all of the following items: var serie = new Array(10); serieArray = [ ]; function myFunctionGetal ( ) { document.getElementById("name").innerHTML = serie; system.out.println('q1','q2.....q10'); or array('index0', 'index1', ..., 'index10' ) Could you please give me a hint in the right direction? Thanks Tilke1955 Link to comment Share on other sites More sharing options...
justsomeguy Posted March 5, 2015 Share Posted March 5, 2015 You can add a new element with Array.push, e.g.: var ar = [];ar.push(1);ar.push(2);ar.push(3);alert(ar.join(","));Don't use system.out.println. That is Java, not Javascript. The two aren't related. Here's the MDN reference:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 12, 2015 Author Share Posted March 12, 2015 (edited) I have found an other example that also sum radio buttons. The only thing i now need to find, is to put under the totaal : a list from each value. Does any one knows a working example for me. The code i now have is this: <html> <body> <script type="text/javascript"> function DisplayPrice(price){ var val1 = 0; for( i = 0; i < document.form1.price.length; i++ ){ if( document.form1.price.checked == true ){ val1 = document.form1.price.value; } } var val2 = 0; for( i = 0; i < document.form2.price2.length; i++ ){ if( document.form2.price2.checked == true ){ val2 = document.form2.price2.value; } } var val3 = 0; for( i = 0; i < document.form3.price3.length; i++ ){ if( document.form3.price3.checked == true ){ val3 = document.form3.price3.value; } } var sum=parseInt(val1) + parseInt(val2) + parseInt(val3); document.getElementById('totalSum').value=sum; } </script> </head> <body> Choose the first number:<br> <form name="form1" id="form1" runat="server"> <br> <input id="rdo_1" type="radio" value="1" name="price" onClick="DisplayPrice(this.value);">1 <br> <input id="rdo_2" type="radio" value="2" name="price" onClick="DisplayPrice(this.value);">2 <br> </form> Choose the second number:<br> <form name="form2" id="form2" runat="server"> <br> <input id="rdo_1" type="radio" value="3" name="price2" onClick="DisplayPrice(this.value);">3 <br> <input id="rdo_2" type="radio" value="4" name="price2" onClick="DisplayPrice(this.value);">4 <br> </form> Choose the third number:<br> <form name="form3" id="form3" runat="server"> <br> <input id="rdo_1" type="radio" value="5" name="price3" onClick="DisplayPrice(this.value);">5 <br> <input id="rdo_2" type="radio" value="6" name="price3" onClick="DisplayPrice(this.value);">6 <br> </form> <br><br> Total Result: <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly> <br><br> List of Each number: <p id="list1"><p id="list2"><p id="list3"> </body> </html> Edited March 26, 2015 by Tilke1955 Link to comment Share on other sites More sharing options...
justsomeguy Posted March 12, 2015 Share Posted March 12, 2015 If you're trying to list the individual values they picked then you have those values in val1, val2, and val3. You can print those wherever you want. Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 12, 2015 Author Share Posted March 12, 2015 So, why does this not work in my script? <script type="text/javascript"> document.write(val1); document.write(val2); document.write(val3); </script> Link to comment Share on other sites More sharing options...
justsomeguy Posted March 12, 2015 Share Posted March 12, 2015 Those variables are set inside the DisplayPrice function, so the code to print those variables should also be in that function after the variables have been set. You should not use document.write to show those though, you should use innerHTML like you're doing for the others. Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 14, 2015 Author Share Posted March 14, 2015 Hi, I have added in the the DisplayPrice function this: { var list1=parseInt(val1); document.getElementById("list1").innerHTML=list1; } and in HTML this: <input type="text" name="list1" id="list1" value="" size="2" readonly> But no result....., what is wrong? Link to comment Share on other sites More sharing options...
Ingolme Posted March 14, 2015 Share Posted March 14, 2015 The innerHTML property refers to what's between the opening and closing tags of an element. The <input> element is an empty element, so there's no innerHTML for it. When you're working with <input> and <textarea> objects you have to use the value property. Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 15, 2015 Author Share Posted March 15, 2015 (edited) Thanks @ justsomeguy and @ Foxy Mod With your help and suggestions I have found this solution for the element: function DisplayPrice(price){ var val1 = 0; for( i = 0; i < document.form1.price.length; i++ ){ if( document.form1.price.checked == true ){ val1 = document.form1.price.value; var list1=parseInt(val1); document.getElementById("list1").innerHTML=list1; And it did the job, now i can go on, putting the data in the MySql database with a query. Tilke1955 Edited March 15, 2015 by Tilke1955 Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 26, 2015 Author Share Posted March 26, 2015 Hi, I am still trying to get the data in the database. It does not work. When i use this: $sql = "INSERT INTO database (columname1,columname2) VALUES(id='list1' , id='list2')"; or this: $sql = "INSERT INTO database (columname1,columname2) VALUES(id='val1' , id='val2')"; The database returns only the number 1 and not the value of the pressed radio button. The columns definitions are int(11) I work with the data posted as at 12-3-2015 Has any one an idea what i do wrong ? Link to comment Share on other sites More sharing options...
Ingolme Posted March 26, 2015 Share Posted March 26, 2015 It seems you don't know how to retrieve data from forms in PHP. Here's a tutorial page about it: http://www.w3schools.com/php/php_forms.asp In your SQL queries you're sending the literal string 'list1' and 'list2', the id= part will probably cause a MySQL error because of bad syntax. Link to comment Share on other sites More sharing options...
Tilke1955 Posted March 27, 2015 Author Share Posted March 27, 2015 Hello, If you mean that i should use this: $sql = "INSERT INTO database (columname1,columname2) VALUES ('$_POST [val1]' , '$_POST [val1]' )"; It gives the same result: only number 0 I have tried all the examples in the tutorials and none of them worked. When i use this: $sql = "INSERT INTO database(columname1,columname2) VALUES ('6', '$_POST[val2]')"; then the number 6 apeares in column 1 and number 0 in column 2 This proves that the connection is well and the column type is well. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 27, 2015 Share Posted March 27, 2015 It also proves that you're not sending data to the database correctly. You need to use prepared statements when you're using user-supplied data in a query, look up prepared statements and you won't have problems with sending the data to the database. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now