Develop Reference

Automatically tick checkbox when clicking on another form input field

I'm trying to have a checkbox next to a form text-input field. The checkbox can be ticked on/off normally, however when clicking on the text-input field, the checkbox should be automatically ticked as well.
I tried this with putting the text-input inside the label for the checkbox, but it doesn't work. It works fine when I use normal text instead of the input-field:
<input type="checkbox" id="box">
<label for="box">
<input type="text">
</label>
How can I achieve this with HTML/JS? I'm working in the context of a VueJS plugin.

The click action of <input> (focus & start editing) overrides <label>'s, so you'll have to use JS:
document.querySelector('#text').addEventListener('click', ()=>{
document.querySelector('#box').checked=true
})
<input type="checkbox" id="box">
<input type="text" id="text">

you can use jquery to achieve this:
HTML:
<input type="checkbox" id="box">
<label for="box"></label>
<input type="text" id="mytextinput">
JQuery:
$('#mytextinput').focus(function(){
$('#box').prop( "checked", true ); // true checks the checkbox false unchecks.
});

Simply add a listener to the text input that checks the box.
const checkbox = document.querySelector('#box');
const input = document.querySelector('input[type="text"]');
input.addEventListener('click', () => {
checkbox.checked = true;
});
<input type="checkbox" id="box">
<label for="box">
<input type="text">
</label>

You can do this easily by setting an onclick attribute on text field like:
<input type="checkbox" id="box">
<label for="box">
<input type="text" onclick="box.checked = true">
</label>

document.querySelector("#box").addEventListener('click',function(){
document.querySelector("#checkbox").checked = true;
});
<div>
<input type="checkbox" id="checkbox">
<input type="text" id="box">
</div>

Get RadioButton value with php

I can get the value of text input from a form.
Like this:
<label for="lblName">Name (*):</label>
<input type="text" name="txtBoxName" id="txtBoxName">
I submit the form with a validation check first:
<form name="contactDataForm" action="sendMail.php" onsubmit="return ValidationCheck()" method="post">
This is sendMail.php:
$Name = $_POST['txtBoxName'];
This works, but how you do it for a RadioButton value? The selected radio button value.
<input type="radio" name="test1" id="test1" value="test1" required> TEST 1<br>
<input type="radio" name="test2" id="test2" value="test2"> TEST 2<br>

A radio button is used for selecting a single value from multiple values. So, there will be only one single name for all the radio buttons and the values for each of them may vary. You can get the value using the usual $_POST['name'] in PHP.
<form action="" method="post">
<input type="radio" name="radio" value="1">Radio 1
<input type="radio" name="radio" value="2">Radio 2
<input type="radio" name="radio" value"3">Radio 3
<input type="submit" name="submit" value="Get Selected Values" />
</form>
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['radio']))
{
echo "You have selected :".$_POST['radio']; // Displaying Selected Value
}
}
?>

Make the 2 radio buttons with the same name attribute test1 example
you will find the radio button value at your PHP server with
$radioValue = $_POST['test1'];

This is a standard HTML Form. A HTML form always gives the value of the selected radio button. If you have a 2 radio buttons with the same name value this will work. The selected radio button will then post your answer to the server. You can then get the value the same way.
I hope this helps.

how to Link html form and anchor tag

I am new to HTML. I want the following to be done in html.
if(link is clicked) {
process one form tag
}
else {
some other form tag
}
this is my form tag .
<form name="input" action="abc.pl" method="get" id="sel">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
I want a link such that if i click on the link the above forms input(i mean the checkboxes value) should be taken and the link should process another .pl file in action ...

I think you could try to change the form action dynamically when user clicked the link by using jQuery. Here is a simple example:
HTML
<form id="form1" action="http://jimmy.right-pet.cc/test.php" method="post">
<legend>Test</legend>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name"/>
<input id="submit-btn" type="submit" value="submit"/>
</fieldset>
</form>
<a id="link" href="#">change form action link</a>
JS
<script>
$(function(){
$("#link").click(function(){
$("#form1").attr("action","http://jimmy.right-pet.cc/test2.php");
});
});
</script>
And try to use the browser dev tool to check if the form action is changed after you clicked the link.
Here is a jsFiddle demo.
Hope it helpful.

Not strictly an answer to the question, but still a solution to the problem.
From the comments:
Don't do that. Submit to one server side URI. Do it with submit buttons. Look at the value of the submit button in the form data to determine which branch of code to run on the server. – Quentin 1 hour ago
#Quentin Please Give me an example . I am new to HTML
In the HTML.
<form name="input" action="abc.pl" method="get" id="sel">
<label>
<input type="checkbox" name="vehicle" value="Bike">
I have a bike
</label>
<label>
<input type="checkbox" name="vehicle" value="Car">
I have a car
</label>
<input type="submit" name="sub" value="Some Action">
<input type="submit" name="sub" value="Some Other Action">
</form>
And then in abc.pl:
use strict;
use warnings;
use CGI;
my $c = CGI->new;
my $sub = $c->param('sub');
unless ($c) {
# No submit value was detected so either perform a default
# action or return an error
exit;
}
if ($c eq "Some Action") {
# Do one thing
} elseif ($c eq "Some Other Action") {
# Do another thing
}

regarding input name in javascript

Using jQuery mobile and javascript I'm attempting to produce a small quiz which would be functional on a smart phone. It isn't fully finished.
I'm attempting to create a list of radio buttons which one selected the value is carried over and submitted but why is the input name "radio=choice-v-6" when this is one of the options.
<script type="text/javascript">
var answer1 = 2;
function submit()
{
if ($('input[name=radio-choice-v-6]:checked', '#myForm').val() == answer1)
{
alert("Correct");
window.location = "#question-2"
}
else
{
alert("Incorrect");
window.location = "#incorrect"
}
}
</script>
then when I use the jQuery mobile pre-set button names I use.
<form id="myForm" name="myForm">
<fieldset data-role="controlgroup" id="radiobuttons" data-mini="true">
<input name="radio-choice-v-6" id="radio-choice-v-6a" type="radio" onclick="question1()" value="1">
<label for="radio-choice-v-6a">One</label>
<input name="radio-choice-v-6" id="radio-choice-v-6b" type="radio" onclick="question1()" value="2">
<label for="radio-choice-v-6b">Two</label>
<input name="radio-choice-v-6" id="radio-choice-v-6c" type="radio" onclick="question1()" value="3">
<label for="radio-choice-v-6c">Three</label>
</fieldset>
<td><button type="submit" id="submit" name="submit" value="Submit" onclick="submit()"></td>
</form>
I assumed I would put the input name as "radiobuttons" or "myForm"
I'm new to JavaScript and would like to know why "radio-choice-v-6" works.

'input[name=radio-choice-v-6]:checked' is the selector and targets only the radio button that is checked and has the name of radio-choice-v-6. The form in general cannot be deemed as checked and neither can the fieldset. So myForm and radiobuttons will not target the currently checked radio button.

jQuery, submit() with multiple forms using .each()

First off, I realize this is not an optimal solution, but the actual production environment is a product of a drunken orgy involving Magento and a lot of cheap plugins, so don't judge me too harshly. I can't be held responsible for other peoples' messes.
I'm trying to submit multiple forms from one page using jQuery. It works fine in IE and FF. Page has four forms, which I loop through them in JS to see if their checkbox is checked and then submit them one by one, using .each() and .submit(). In Chrome, jQuery(this).submit() does not fire until after you have completely exited the function, and then it only actually submits the last form.
Uses jQuery 1.8.1. The working mockup is here
The code follows:
<!DOCTYPE html>
<html>
<head>
<title>asdfad</title>
<script type="text/javascript" src=http://code.jquery.com/jquery-1.8.1.min.js"></script>
</head>
<body class=" listraknewsletter-index-index">
<form id="form4" method="post" class="signup-form"
action="http://www.example.com/action1"
target="_blank">
<input type="hidden" name="crvs" value="hiddenValue1"/>
<label for="checkbox">newsletter 1</label>
<input name="checkbox" type="checkbox"
class="signup-checkbox"
name="sos-checkbox" />
</form>
<form id="form2" method="post" class="signup-form"
action="http://www.example.com/action2"
target="_blank">
<input type="hidden" name="crvs" value="hiddenValue2"/>
<label for="checkbox">newsletter 2</label>
<input name="checkbox" type="checkbox"
class="signup-checkbox"
name="sos-checkbox" />
</form>
<form id="form3" method="post" class="signup-form"
action="http://www.example.com/action3"
target="_blank">
<input type="hidden" name="crvs" value="hiddenValue3"/>
<label for="checkbox">newsletter 3</label>
<input name="checkbox" type="checkbox"
class="signup-checkbox" name="sos-checkbox" />
</form>
<form id="form1" method="post" class="signup-form"
action="http://www.example.com/action4"
target="_blank">
<input type="hidden" name="crvs" value="hiddenValue4"/>
<label for="checkbox">newsletter 4</label>
<input name="checkbox" type="checkbox"
class="signup-checkbox" name="sos-checkbox" />
</form>
<!-- Area for entering in information -->
<form method="post" action="/">
<label for="email">email</label>
<input type="text" id = "nl_email" name="email"
size="40" maxlength="100" value = ""/>
<label for="name">name</label>
<input type="text" name="name" id = "nl_name" maxlength="50" size="40" value=""/>
<input type="button" value="Subscribe" onclick="processSignups();" />
<script type="text/javascript">
// requires jQuery
jQuery.noConflict();
function processSignups() {
// make sure you have a valid email and name
// make sure email is at least not null
// this is not a pretty regex for sure lol,
// but tis' RFC 2822 valid
var nl_email = jQuery('input#nl_email').val();
var re = new RegExp(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/);
if (re.test(nl_email) == false) {
alert('Please enter a valid email');
return false;
}
// name is not null
if (jQuery('input#nl_name').val() == '') {
alert('Please enter your name');
return false;
}
// make sure at least one checkbox is selected
var checkboxes = jQuery('input.signup-checkbox');
var atLeastOne = false;
jQuery(checkboxes).each(function() {
if (jQuery(this).is(':checked')) {
atLeastOne = true;
}
});
if (atLeastOne == false) {
alert('Please select at least one newsletter checkbox');
return false;
}
// select your forms by class
// var forms = jQuery('form.signup-form');
// for each form
var formIds = new Array();
jQuery('form.signup-form').each(function(index) {
// get the checkbox
var checkbox;
checkbox = jQuery(this).children('input.signup-checkbox');
// if it is checked
if (jQuery(checkbox).is(':checked')) {
// add a hidden field to the form to hold the email
jQuery(this).append('<input type="hidden" name="email" value="' + nl_email + '" />');
// and submit form
jQuery(this).submit();
}
});
// might as well clear the email and name inputs
jQuery('input#nl_name').val('');
jQuery('input#nl_email').val('');
// return false;
}
</script>
</form>
</body>
</html>

Chrome doesn't treat target="_blank" like the other browsers. Try _tab, or dynamically changing them $(this).attr('target', '_'+$(this).attr('id'));