We Keep Coding

Radio option on view that updates and changes view?

I think that my problem isn't very hard -but I'm pretty new to this and having issues finding an easy solution.
I have a form that collects a few items, and an output page that creates a table based on those few items. For example, one of the form options is "Which leg is affected?" And you must choose either "Left, Right, Both".
I would like to create a radio selection option on the view so that the person using this tool won't have to click the back button to update this one field. The table that is built changes based on this one selection, so it would be nice to see those changes without resubmitting the form.
If anyone can point me in the right direction - either JavaScript or some method that involves re-sending the form values from the view - I would be very grateful.

I believe what you're describing is exactly what the idea of "single page app" style coding with Javascript is for - modifying the page with logic without necessarily needing to make a server request. I.e., you want to make an "application." Albeit a simple one.
What I recommend you look into is "event handlers," specifically the click handler.
So, if you had html that looked like: (stolen from MDN's radio page)
<form id="radio_form">
<p>Please select your preferred contact method:</p>
<div>
<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2"
name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3"
name="contact" value="mail">
<label for="contactChoice3">Mail</label>
</div>
</form>
You could then have code that looked like
var radio = document.getElementById('radio_form');
radio.onclick = changeTable;
function changeTable(e){
// Do logic here to change table
}
The idea is your page is "waiting" for the form to be "clicked" (you could also look into onChange), and when it is clicked, a function is invoked that does further logic.
See here to figure out how to get the value of a selected radio.
See here for using javascript to insert a row into a table (what you may want to do in your changeTable function).
EDIT: One "gotcha" to look out for is if your script is running when the page is actually loaded. This can be a problem if your page loads asynchronously (doubtful). Just in case, also look into some kind of document.ready implementation: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

You can add an event listener for 'click' to each radio input and have the callback function modify the view in whatever way you want.
Here's an example:
const form = document.querySelector('.choice-form');
const display = document.querySelector('.display');
form.querySelectorAll('input[type="radio"]').forEach(input => {
input.addEventListener('click', () => {
display.innerHTML = "";
if (input.id === '1') {
display.innerHTML = "<span>You selected: <span class='red'>One</span></span>";
} else if (input.id === '2') {
display.innerHTML = "<span>You selected: <span class='blue'>Two</span></span>";
}
});
});
.red {
color: red;
}
.blue {
color: blue;
}
<div>
<form class='choice-form'>
<label for='choice'>Make a choice</label>
<input type='radio' id='1' name='choice'/>
<label for='1'>One</label>
<input type='radio' id='2' name='choice'/>
<label for='2'>Two</label>
</form>
<div class='display'>
</div>
</div>

Show cursor on two text box at same time

I have two text boxes like,
<input type="text" id="left" />
<input type="text" id="right" />
Is it possible to focus these two text boxes at the same time?
I don't know how it possible.I need to show cursor in these two text boxes at the same time.
if i focus #left ,#right lost its focus.
Note : I am trying to create a side by side web application.shows two same views on single web page.
I know how to show the same values,I need to show the cursor blinking on two inputs.

Try doing something like this...Every time the left input is changed the right one's value is change too.
$("#left").on("input",function() {
$("#right").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="left" />
<input type="text" id="right" />

If you want to clone your input, you can simply do this by adding an oninput attribute like:
<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />
No jQuery needed. Customize it the way you want it. Here's a fiddle:
<input type="text" id="left" name="left" oninput="right.value = left.value; return true;" />
<input type="text" id="right" name="right" oninput="left.value = right.value; return true;" />

You can't, and you really shouldn't...
That's like asking you to read a book while watching TV.
However, that sort of thing, might be possible on multi-user & multi-touch OS machines. That is, two users on the same machine can work two different tasks simultaneously on the same surface. But that's military. And even than, one user, can only have one input focus at a time.

you can't focus same time, but you make it like you write in one textbox same time bind it in other textbox using jQuery or AngularJS.

I found http://codepen.io/keilin/pen/lCkap for css.
And added:
$("#left").on('keydown change', function(e) {
$("#right").val($(this).val());
console.log($("#right").val());
$overlay.text($(this).val());
var offset = $cursor.offset();
var inputLeft = $(_this).offset().left;
offset.left = Math.min($overlay.outerWidth(), $(_this).innerWidth() - 4);
offset.left = inputLeft + Math.max(offset.left, 0);
$cursor.offset(offset);
});
If i understand correctly, you want something this: https://jsfiddle.net/8csab3t1/1/
ps: It's just an example. Please check with two chars.

How to identify which button was pressed in javascript?

How to identify which button was pressed in javascript
in have 4 buttons that present items and text box
when i press a buttons, the number in the text box add to sum

We would really like to help you but you should provide some more information how you would like to realize that and what your actual code looks like.
Did you say that you are trying to realize a calculator? There are many ways how to identify the button which was triggered, e.g. pressed. In the example you provided above (Calculator) a javascript function is called if the user clicks on a specific button. To achieve that, the function call is made within the onClick event:
<INPUT type="button" name="one" value="1" OnClick="btnPressed(1)">
The called function could look like this:
function btnPressed(value){
var obj = document.getElementById('ID_of_textbox')
obj.value = parseInt(obj.value) + value
}
If you would like to identify which button was clicked, you can do it with the numbers stored in the 'value' argument. Or on the other hand you could change the trigger to:
<INPUT type="button" name="one" value="1" OnClick="btnPressed(1, this)">
and the JS function to:
function btnPressed(value, sender){
...
}
If you are willing to use the 'this' reference like illustrated above, then you can also do a step further and change the whole thing to something like this:
<INPUT type="button" name="one" value="1" OnClick="btnPressed(this)">
function btnPressed(sender){
var obj = document.getElementById('ID_of_textbox')
obj.value = parseInt(obj.value) + parseInt(sender.value)
}
You can also do it directly in the onClick of the INPUT:
<INPUT type="button" value="1" OnClick="document.getElementById('ID_of_textbox').value = parseInt(document.getElementById('ID_of_textbox').value) + 1">
or:
<INPUT type="button" value="1" OnClick="document.getElementById('ID_of_textbox').value = parseInt(document.getElementById('ID_of_textbox').value) + parseInt(this.value)">

Changing yes/no value in database, on click of hyperlink

sorry about my limited coding skills and so on, but hopefully you can see what I am attempting. I want to scrap the form checkboxes and have 2 simple 'yes' 'no' hyperlinks, dependant on if image is hidden or shown. Will javascript do this? This is what I have so far, which was working but like I say, I just want 2 links instead of checkboxes.
if ($_POST['option']) {
if ($_POST['option'] == 'yes') {$hidden = 0;}
if ($_POST['option'] == 'no') {$hidden = 1;}
#mysql_query('UPDATE Image SET Hidden = ‘.$hidden.’ WHERE ID = '.$image->ID.'');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
<p>Show image?
<form method="post" action="?">
<input type="checkbox" name="option" value="yes">Yes
<input type="checkbox" name="option" value="no" >No
<input type="submit" name="submit" value="Go!" />
</form>
So then I can have HTML such as -
Show Image? Yes / No
(This image is shown) or (this image is not shown)
Any points in the right direction would be greatly appreciated, Many thanks!
Hi Guys, Sorry, I don’t think I explained myself properly.
All images have a default value of ‘Hidden = 0’ in the image database table, so they are all currently shown on the page. Here is the code -
// there is some SQL here that fetches all images
// here is the actual code that shows images:
foreach($ids as $id)
{
$tmp = new Image($id,true);
if (!$tmp->ID) continue;
<p>
<img src=”/myurl/’.$tmp->ID.’.jpg”>
</p>
}
What I want is, in that loop, underneath each image tag, is to have some HTML :
<p>Show Image? Yes / No </p>
I want the ‘yes’ and ‘no’ to be hyperlinks, which state will depend on the images ‘Hidden’ value.
So if the image is shown (all currently are), the word ‘Yes’ won’t be a clickable hyperlink, only ‘No’ will be.
If I then click ‘No’ I need it to post a query on click, to set Hidden = 1, to hide the image.
If the image is already hidden, then ‘Yes’ would be the only clickable link, which if clicked would post value Hidden = 0, so the image is shown.
I hope that makes sense. The other problem I have is the fact that there are multiple images, so the form or whatever system I use, needs to distinguish which image it is changing the Hidden value for.
In the code, the image’s unique id field is accessed like this: $tmp->ID

If you want hyperlinks just use something like
Yes
No
Also you will probably want to use single quotes ''s and not ‘'s for your query. Also I'd recommend using mysqli or PDO so you can use prepared statements instead of mysql_ functions which are prone to mysql injections.

Easiest way would be to use a hidden input field that will be submitted with the rest of your form and using javascript to change the value of that hidden field.
HTML:
<p>Show image?
<form method="post" action="?">
<input type="hidden" name="option" value="default" />
Yes
No
<input type="submit" name="submit" value="Go!" />
</form>
JS (requires JQuery):
$(".option").click(function (e) {
$("input[name=option]").val($(this).attr("data-value"));
});
Then when you submit the form $_POST should have the "option" value.

Try this
if(isset($_GET['cmd']))
{
if($_GET['cmd']=='yes')
{$hidden = 0;}
if($_GET['cmd']=='no')
{$hidden = 1;}
#mysql_query('UPDATE Image SET Hidden = '.$hidden.' WHERE ID = '.$image->ID.'');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
?>
<p>Show image? <br />
Yes <br /> <!--Replace page url according to yours -->
No

Just to reaffirm, the following form is my latest revision and works perfectly, updating the database and radio buttons on the page. However, it is still not the solution I want. I want hyperlinks only, as in the above examples posted by Boshi and Class, but for some reason my site won't accept those urls, the system churns me out to a different page and nothing works.
Here is the latest revision which works. Is there another solution? -
if ($_POST[''.$tmp->ID.'']) {
if ($_POST[''.$tmp->ID.''] == 'yes') {$hidden = 1;}
if ($_POST[''.$tmp->ID.''] == 'no') {$hidden = 0;}
#mysql_query('UPDATE Image SET Hidden = '.$hidden.' WHERE ID = '.$tmp->ID.' LIMIT 1');
header ('Location: ' . $_SERVER['REQUEST_URI']);
exit;
}
<p>Hide image?
<form method="post" action="?">
<input type="radio" name="'.$tmp->ID.'" value="yes" '.($tmp->Hidden ? 'checked' : '').'>Yes
<input type="radio" name="'.$tmp->ID.'" value="no" '.(!$tmp->Hidden ? 'checked' : '').'>No
<input type="submit" name="submit" value="Go!" />
</form>

Generating forms to fit in a table

So I have two forms side by side, and what I'm trying to do is allow the user to generate as many forms as he/she wants, and have each form stored as table data, two per row. The issue I'm having is that the forms won't store in a table, and I'm not entirely sure what I'm doing wrong. I start out making a form to find out how many forms the user wants to generate.
<table border='1'>
<span id='exForms'>
<input type='text' name ='number' id='number'>
<button type='button' onclick="add()">Add</button>
</span>
</table>
Next the number is sent to add()
add()
{
var number = document.getElementsByName('number')[0].value;
var x = document.getElementById('exForms');
number = parseInt(number);
var i;
x.innerHTML="";
x.innerHTML+="<tr><th>Form1</th> <th>Form2</th></tr>";
for(i = 0; i<number; i++)
{
x.innerHTML+="<tr><td><input type='text' name='commandsc[]'></td><tr><td><input type='text' name='commandsi[]'></td></tr>";
}
x.innerHTML+="<input type='submit' name ='submit' value='submit'>";
}
The output is basically all the forms on a line then a submit button.
Any help would be great. Thanks.

You can solve your problem by adding the new created row to the existing table tbody.
See this link how to do it: http://www.roseindia.net/javascript/javascript-add-row-to-table.shtml

This is the real layout:
<span id="exForms">
<input type="text" name="number" id="number">
<button type="button" onclick="add()">Add</button>
</span>
<table border="1"></table>
In short, your layout is invalid. That's why the further changes you did in the layout didn't work as expected.
exForms is not inside table. Also, planning something like
<table><span><tr/></span></table>
was a bad idea.