Dynamically displaying the column names - javascript

I have a requirement where I have to display questions dynamically based on the buttons clicked. I have coded a table where in one column I display the question and another column I want the user to enter answer. Now when I save this form data I actually need to save the question id and not the question. So I thought I can display the question in the name area like <td> question 1 </td> and in the value field I can keep the question id.
<td>
<input type="text" id="q1" path="genericq1" value=""> dynamic question name
</td>
I am getting the questions by making an ajax call
$('#q1').val(data.question[key1].question);
Can anyone please hint me a way by which I can dynamically display question in the column and keep the question value in the value field which goes in the back end?

Have you heard about hidden field? Use hidden field to store your id. And for displaying name use label instead.
Like in your code
<td>
<input type="hidden" name="qid" id="qid"/>
<label id="qname"></label>
</td>
And when you getting data from ajax call write it as below
$("#qid").val(data.question[key1].questionid);
$("#qname").text(data.question[key1].questionname);

You can easily associate data with an element in jQuery
$('#q1').data('qid',data.question[key1].questionid);
Which can then be retrieved using
$('#q1').data('qid');

Related

dynamic text field in php [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have created a table. There are dynamic text field for each row to fill the information. I know how to create and dynamic text field. But i am having a doubt in how to add them into database by clicking a submit button. In this picture you can get the idea. By clicking that add link we can add dynamic text field as we need. when i click submit all data are saved into same name(ex: saving in tr).
you should use a software like phpmyadmin and create a database there. once created, name a table for example 'mytable' and add the necessary columns corresponding to your data. so when you press the submit button, it should take action on a separate php file which would use POST method to take the values and contain them in a variable. once in a variable create an sql statement like this one "INSERT INTO mytable .............. " with ....... being your values. its a long process though, you should use a website to learn how to insert data into your database
Your field name should be array type.
Example [Row 1]
<input type="text" name="name[]" />
<select name="types[]">
<option>....</option>
<option>....</option>
</select>
Example [Row 2]
<input type="text" name="name[]" />
<select name="types[]">
<option>....</option>
<option>....</option>
</select>
Note : Follow above code for every rows.
After submitting form data, PHP array looks like.
array(2) {
["name"]=>
array(2) {
[0]=>"Name 1"
[1]=>"Name 2"
}
["types"]=>
array(2) {
[0]=>"Type 1"
[1]=>"Type 2"
}
}
Use PHP loop and separate every rows for saving data to your database.

ng-repeat shows diffent values during execution

[Problem]
Ok, I have no idea of what is really going on here. But here is the thing: I'm showing a table with some information from users and there's a button that the user can click in order to show more information from that user. The approach I took to create this is for each user a form is created to send the information when the users hits the button "Check".
Everything sounds fine, but, there are random moments when I access the system the field 'ID' from the table (<td>{{data.id}}</td>) shows the value of the id correctly but the (<input type="hidden" name="_user" value="{{data.id}}" />) doesn't. They come from the same object, data.id, how come they could show different values?
The code for the table follows:
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.city}}</td>
<td>{{data.state}}</td>
<td>{{data.country}}</td>
<td>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input type="submit" name="check" value="Check" />
<input type="hidden" name="_user" value="{{data.id}}" />
</form>
</td>
</tr>
If somebody helps me on this I'd really appreciate. I also would appreciate any comment related to the approach I've taken in order to send the data to the server. Thanks in advance.
[How to reproduce]
When I access the screen for showing the users from the main panel, the table above shows everything rendered fine and the hidden values are set correctly. Then if I click on "check", I'll see the user data in another screen and if I hit the back button from the browser, I'm able to see the table above rendered properly (the id field in the table is correct) but the hidden field get the value="0". All of them.
[Solution]
Using ng-value instead of value saved me! Thanks you all!
Use the following resource of angularJs, ngValue.

How do you add radio button answers to an array of user answers?

I'm trying to create a user questionnaire where, similar to a quiz on BuzzFeed, a user selects their preferences and is given an answer based on how their preferences match up to a table on a database.
For example, here is one of the questions:
<form class="testAns" id="heightAns">
<input type="radio" name="answer" value="short">-25%
<input type="radio" name="answer" value="short">-10%
<input type="radio" name="answer" value="mid">normal
<input type="radio" name="answer" value="tall">+10%
<input type="radio" name="answer" value="tall">+25%
</form>
In the "values" section, I have added the description that I want the answer to be associated with. These "values": short, tall, and mid will show up on the database, but I don't understand enough about Javascript or PHP to connect a user answer on the HTML to an entry on a database.
I think what I need to do is create a Java Script function for each question where the answer that the user selects is logged as its corresponding value. Then, once all tests are completed, I need a PHP function that logs the user profile into the database
You might be right, you might be wrong with your assumptions. It all depends on how exactly you want to display the questions and process the answer.
The simplest solution I would recommend so far, is not to use javascript at all and just use the form element for what it was designed: sending form data to a server.
Extend the form element with the attributes method="POST" and action="url_of_your_page processing_the_data"
Then on that php page you get the value via $_POST["answer"]. If you got that working, you might want to spice it up to your hearts content.
The value of the radio button should me the value which you are going to store in the database. If -25% is short and -10% is also short why add another radio button just use one
<input type="radio" name="answer" value="short">-10% or less
Same goes for tall.
Now to answer you question you can use ajax to submit the form to a php file which stores the result in mysql OR Make one Form place all the questions in the separate div tags and on submit the form will be submited to a php file
<form action='answer.php' method="POST">
<div>
Question 1 ............
<input ......
</div>
<div>
Question 2 ............
<input ......
</div>
</form>
The above code is just an example, you'll have to make a php file named answer.php to process your form

How to add another option to website and

I have a javascript that shows and hides options from a html form. What I am trying to do is be able for the user to add a new category and then write that into the database as an option and add that subject to the option form.
Here is an example of the html code,
<select id="team1" name="team1" style="display:none">
<option value="subcat1">subcat1</option>
<option value="subcat2">subcat2</option>
<option value="subcat3">subcat3</option>
I then want them to be able to add another subcat4 via the website.
the javascript i'm using is an if statement with show and hides from different selects.
The user needs to be able to enter the category name and add it to the relevant select.
Currently im unsure on how to get this to add and save the new subcat4 to the database and to the html.
Any help would be appreciated.
When you first load the page you construct the select element by using the values stored in the database.
Then you can have a form that posts the filled info and stores subcategories into the database. This form may contain the identifier of your select for knowing in which select you are assigning the new option. It could be in a hidden input.
here comes a simple example of that form
<form method='post' action='/your/action/here' >
<input type='hidden' name='main_category' value='team1' />
Subcategory: <input type='text' name='subcategory' value='' />
<input type='submit' name='submit_btn' value='submit' />
</form>
You could also do it without page refresh by using an ajax post (this should be your next step, make it first work the simple way) to store the info and then by appending the option to your select using javascript. Check the jquery append or the appendChild() if you are not using jquery.
With jquery you can do this code to append new child in your select element.
$('#team1').append('<option value="subcat4">subcat4</option>');

How can I update an element attribute with a modified value?

I am working with MachForm and in it when using pricing features it adds this to an li tag:
<li id="li_273" data-pricefield="text" data-pricevalue="8.48" >
The form also has this field as well:
<input type="text" class="element text medium" id="element_273" name="element_273" size="30" value="" />
Now what happens is, the form has been converted to an ajax auto complete which is fine and works. But the problem is that the first reference:
<li id="li_273" data-pricefield="text" data-pricevalue="8.48" >
Isn't going to be the right price for the item selected. So what I need is to be able to re-write that data-pricevalue based on an onclick function. In the autocomplete you are able to execute an onclick javascript command like so:
'onclick' => 'alert(\'You clicked on the '.$name.' fruit!\');',
Now I have the rest of the javascript that should allow me to take the data-pricevalue from the id (ex: id="li_273") and then multiple it by the value entered into the text box. The ultimate goal is to get data-pricevalue * input text to update the on-screen total value. But I am not sure how to get that data-pricevalue to re-write the proper price.

Categories