Develop Reference

How to change Text field to Buttons

Can any body tell me the best practice or way to change Text field to the Button with value 0 or 1.
Let me clear what I want so i have here(see below) django form with the 2 field called Up_vote and Down_vote and when I submit it stores pretty nicely into the Votes table.
But what I what is to have two buttons like stacoverflow have for up_vote and down_vote and when someone press on the up_vote it should submit value 1 automatically to the database and when someone press the down_Vote it sould submit the value 0 to the database table.
see like this:
so basically how i can convert text fields to the two buttons, I dont now how i can do with the javascript or with other method.

It's basically a CSS style I will assume that you will not use AJAX
Create 2 forms one for up and other for down vote
Put the type attribute on the input to hidden and the value is 1 for the up vote and 0 for down vote and use CSS to style the submit button to appear like what you want
this how it should be in html
<!-- Up vote form -->
<form>
<input type="hidden" name="vote" value="1">
<button type="submit" class="up-vote-btn"></button>
</form>
<!-- Down vote form -->
<form>
<input type="hidden" name="vote" value="0">
<button type="submit" class="up-vote-btn"></button>
</form>

Send the dropdown value for each row form

I have a dropdown value out of forms and a table wih many rows to submit data.
What I'd like to do is during submit of each row submit also the getting value from the drop down list.
My table it's look like My code for dropdrown list is
<div class="panel-heading">
<label for="cat">Select a Category</label>
<select class="form-control" id='category' name="category" data-live-search="true" style="max-width:40%;" >
<?=$html?>
</select>
</div>
And the part for table rows is
<form id="sync-cat" action="controllers/product-add.php" target="_blank">
<input type="hidden" name="product" value="<?=$product['id']?>">
<button type="submit" class="btn btn-info btn-md">Sync Products</button>
</form>
I've tried with javascript copying selected value in hidden input but that run only for the first row. Also I've tried a hidden input above the dropdown list copying the select option but I didn't find a way to get value when I use submit button "Sync Products"

They should share the same form in HTML so that when the form is posted all available information is present in the form. Regardless your dropdown should also be in it's own form (if you don't put them in the same form) to be valid.
If you wanted to continue as is ignoring the proper things to consider above you could do it with something like this. This solution will make things a bit more complicated. I would recommend taking the above advice.
var form = document.getElementById('sync-cat')
form.addEventListener('submit', function(e) {
var valueFromDropDown = document.getElementById('category').value;
// Post the rest of the form
});
Follow the rest of this guide to complete the JavaScript post

Binding a jAlert popup content to html content

I'm attempting to use jAlert to show a popup dialog with an input box. When clicking "OK" I want to grab the value from this input box to send to the server. I'm using jQuery to pull the content off a div which includes the input field. Problem is that when I use jQuery to try and get the contents of that input field, it doesn't work - it comes back as empty.
HTML as follows:
<div id="test">
<input type="text" id="def" />
</div>
JS as follows:
$.jAlert({ 'content' : $("#test").html()});
...and to try and access using jQuery...
$("#def").val();
I can get around it by force updating the field using a keyup listener, but it seems really clunky...
<input type="text" id="def" onkeyup="$('#def').val($(this).val())" />
After doing this I can access the content of the 'def' field. Is there a more elegant solution?

How to show different textbox depending on which radio button is clicked?

I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.
It also has Submit button in that form.
Here is my jsfiddle
Problem Statement:-
Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this -
TestClient TestServer
Name textbox
Id textbox
Sex Male Female
Submit button
In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer
TestClient TestServer
Address textbox
ClientId textbox
ServerId textbox
Country dropdownbox
Submit button
Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.

Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.
Hide these divs with CSS by default.
<div class="client" style="display: none">
Client fields here
</div>
<div class="server" style="display: none">
Server fields here
</div>
Then you can do something like this with your jQuery handler:
$('input[name="client"]').click(function() {
if($(this).attr('id') == 'client') {
$('.client').show();
$('.server').hide();
} else {
$('.client').hide();
$('.server').show();
}
});

if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:
http://jsfiddle.net/fauv9/1/
<button id="primary">Process</button>
<form method='post'>
<h4>Process</h4>
<fieldset><legend>process</legend>
<input id="client" value="TestClient"type="radio" name="cli_srv">
<label for="client">TestClient</label>
<input id="server" value="TestServer" type="radio" name="cli_srv">
<label for="server">TestServer</label>
</fieldset>
<fieldset id="form_process">
</fieldset>
</form>
<button form="form_process">Submit</button>
and
$("#primary").click(function(){
$("form").show()
});
var form= $('#form_process');
$("#client").click(function(){
form.html(null);
form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})
$("#server").click(function(){
form.html(null);
form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})

Using thickbox to display number of fields based on input

I'm using Thickbox 3.1 and right now I have some HTML setup like this:
<input type="text" name="number" size="1">
<input alt="overlay.html?height=300&width=400" type="button" class="thickbox" value="Make Fields">
What I'm trying to accomplish is when the user enters a number into the first input text field and clicks the "Make Fields" button, a thickbox pops up and shows a certain number of text fields depending on what the user entered.
So if the user enters 2, when they click "Make Fields" the thickbox pops up and shows 2 input fields. If they enter 5, the thickbox pops up and shows 5 input fields. Is this possible?
Thanks!

Yes. You can pass in a parameter to a ThickBox underlying page. You need to use JS script to do that. Then based on that parameter, the underlying page can display another value (you can use JS or server side for this)