How to append radio button using jquery or javascript to save into the databse?
I appended input types like text,textarea,checkbox,select with options.
My code is
<!DOCTYPE html>
<html lang="en">
<head>
<title>
apnd
</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var htmldata='<div>Name<input type="text" name="cname[]">Mobile Number<input type="text"name="mob[]">Gender<input type="radio" name="gender[]" value="M">Male<input type="radio" name="gender[]" value="F">FemaleAddress<textarea name="address[]"></textarea><input type="button" class="remove_field" value="remove"></div>';
$('.add_field').click(function(){
$('.wrapper').append(htmldata);
});
$('.wrapper').on('click','.remove_field',function(){
$(this).parent('div').remove();
});
});
</script>
</head>
<body>
<div class="container">
<form method="post" action="">
<div class="wrapper">
<div>
Name<input type="text" name="cname[]">
Mobile Number<input type="text" name="mob[]">
Gender<input type="radio" name="gender[]" value="M">Male
<input type="radio" name="gender[]" value="F">Female
Address<textarea name="address[]"></textarea>
<input type="button" class="add_field" value="Add">
</div>
</div>
<input type="submit" name="sub" value="Save">
</form>
</body>
</html>
using php I want to save the values to database.
$name=sc_sql_injection($_POST['cname']);
$mobile=sc_sql_injection($_POST['mob']);
$gender=sc_sql_injection($_POST['gender']);
$address=sc_sql_injection($_POST['address']);
$count=count($_POST['cname']);
for($i=0;$i<$count;$i++)
{
$sql="insert into t2(name,mobile,gender,address) values('$name[$i]','$mobile[$i]','$gender[$i]','$address[$i]')";
sc_exec_sql($sql,$con);
}
Update
Append radio button
<!DOCTYPE html>
<html lang="en">
<head>
<title>
apnd
</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var i=1;
$('.add_field').click(function(){
var htmldata='<div>Name<input type="text" name="cname[]">Mobile Number<input type="text"name="mob[]"> Gender<input type="radio" name="gender['+i+']" value="M">Male<input type="radio" name="gender['+i+']" value="F">Female Address<textarea name="address[]"></textarea><input type="button" class="remove_field" value="remove"></div>';
i++;
$('.wrapper').append(htmldata);
});
$('.wrapper').on('click','.remove_field',function(){
$(this).parent('div').remove();
i--;
});
});
</script>
</head>
<body>
<div class="container">
<form method="post" action="">
<div class="wrapper">
<div>
Name<input type="text" name="cname[]">
Mobile Number<input type="text" name="mob[]">
Gender<input type="radio" name="gender[0]" value="M">Male
<input type="radio" name="gender[0]" value="F">Female
Address<textarea name="address[]"></textarea>
<input type="button" class="add_field" value="Add">
</div>
</div>
<input type="submit" name="sub" value="Save">
</form>
</body>
</html>
$(document).ready(function(){
var i=1;
$('.add_field').click(function(){
var htmldata='<div>Name<input type="text" name="cname[]">Mobile Number<input type="text"name="mob[]"> Gender<input type="radio" name="gender['+i+']" value="M">Male<input type="radio" name="gender['+i+']" value="F">Female Address<textarea name="address[]"></textarea><input type="button" class="remove_field" value="remove"></div>';
i++;
$('.wrapper').append(htmldata);
});
$('.wrapper').on('click','.remove_field',function(){
$(this).parent('div').remove();
i--;
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="">
<div class="wrapper">
<div>
Name<input type="text" name="cname[]">
Mobile Number<input type="text" name="mob[]">
Gender<input type="radio" name="gender[0]" value="M">Male
<input type="radio" name="gender[0]" value="F">Female
Address<textarea name="address[]"></textarea>
<input type="button" class="add_field" value="Add">
</div>
</div>
<input type="submit" name="sub" value="Save">
</form>
</body>
</html>
Related
I am learning DOM and wanted to create a simple JavaScript with Html quiz (for exercise). Now the problem I'm having is that when I hit submit, all of the answers are right instead of one being right and 3 being wrong. I think it is a problem with my html and the way I assigned the ID's to the different tags but I cannot figure out what I am doing wrong.
Code
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="quiz.css">
</head>
<body>
<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>
<script src="quiz.js">
</script>
</body>
</html>
JavaScript
quizForm.addEventListener("submit",function(event) {
event.preventDefault();
var grabAnswer = document.getElementById('red')
console.log(grabAnswer.id);
if (grabAnswer.id == 'red') {
console.log('correct!');
}else{
console.log('wrong');
}
})
Thanks.
You can do this two ways
get the selected value and see if it's correct
get the correct answer and see if it's selected
The existing answer handles (1) so here's the solution for the other option.
Taking your original code, change
if (grabAnswer.id == 'red') {
to
if (grabAnswer.checked) {
(where grabAnswer is document.getElementById('red'))
quizForm.addEventListener("submit", function(event) {
event.preventDefault();
// get the correct answer
var grabAnswer = document.getElementById('red')
// see if it's been selected
if (grabAnswer.checked) {
console.log('correct!');
} else {
console.log('wrong');
}
})
<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>
Problem is that you always take the red in your grapAnswer, but you have to use var grabAnswer = document.querySelector('input[name="color"]:checked');
Demo
var quizForm = document.getElementById("quizForm")
quizForm.addEventListener("submit", function(event) {
event.preventDefault();
var grabAnswer = document.querySelector('input[name="color"]:checked');
console.log(grabAnswer.id);
if (grabAnswer.id == 'red') {
console.log('correct!');
} else {
console.log('wrong');
}
})
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="quiz.css">
</head>
<body>
<div class="QuestionOne">
<form id="quizForm">
<h1> What is your favorite color?</h1>
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<input type="submit" id="submit" name="color" value="Submit"><br>
</form>
</div>
<script src="quiz.js">
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Page Title</title>
</head>
<body>
<h1> What is your favorite color?</h1>
<form id="myForm">
<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label><br>
<p></p>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label><br>
<p></p>
<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>
<p></p>
<button type="button" id="button">Submit</button><br>
</form>
</body>
</html>
<script>
$(document).ready(function() {
$("#button").click(function() {
if($('input[name=color]:checked', '#myForm').val()=='red')
{
alert('Succesfully!');
}
else
{
alert("No");
}
});
});
</script>
Can you try this code?
Is there any possible way to get an input radio value information (externaly), from a class?
I did a million attempts...
Here is the code im stucked to:
Parent.htm
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="txtName" readonly="readonly" />
<input type="button" value="Select Name" onclick="SelectName()" />
<script type="text/javascript">
var popup;
function SelectName() {
popup = window.open("Popup.htm", "Popup", "width=300,height=100");
popup.focus();
return false
}
</script>
</body>
</html>
And here is the page that i can't define to get the information that are on value.
Popup.htm
<html>
<body>
<form class="ddlNames">
<input type="radio" name="ddlNames" id="num" value="one">
<input type="radio" name="ddlNames" id="num" value="two">
<input type="radio" name="ddlNames" id="num" value="three">
</form>
<br />
<br />
<input type="button" value="Select" onclick="SetName();" />
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("txtName");
txtName.value = document.getElementsByClassName("ddlNames")[0].value;
}
window.close();
}
</script>
</body>
</html>
I tried this way too:
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="one">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="two">
<input type="radio" class="ddlNames" name="ddlNames" id="num" value="three">
To give each one the ddlNames class, but it's not working?
You can get the checked value using a query-selector
document.querySelector('input[name="ddlNames"]:checked').value;
I have done some code for radio button group to show and hide the divs. but this code is not working properly. could you please look into this. Thank you.
<div class="col-md-7">
<div>
<h3 class="radio_heading">Radio Button Group</h3>
<form>
<label><input id="rdb1" type="radio" name="toggler" value="1" checked/>Book</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label>
</form>
<div id="blk-1" class="toHide">
<form action="success1.html">
Name1:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
<div id="blk-2" class="toHide" style="display:none">
<form action="success1.html">
Name2:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
</div>
</div>
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
I copied and pasted your code, added the jQuery library, and it appears to work fine.
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
<div class="col-md-7">
<div>
<h3 class="radio_heading">Radio Button Group</h3>
<form>
<label><input id="rdb1" type="radio" name="toggler" value="1" checked/>Book</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label>
</form>
<div id="blk-1" class="toHide">
<form action="success1.html">
Name1:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
<div id="blk-2" class="toHide" style="display:none">
<form action="success1.html">
Name2:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
I want to call gettotal function to get value from textbox and * 3 and show the result in other textbox , code does not work
where is the problem!?
<html>
<head>
<script type="text/javascript" language="javascript">
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").innerHTML="<b>"+x+"</b>";
}
</script>
<title>hello</title>
</head>
<body>
<form name="form1">
<input type="button" id="btn" name="btn" value="get" OnClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<br/>
<br/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript" language="javascript">
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").value=x;
}
</script>
<title>hello</title>
</head>
<body>
<form name="form1">
<input type="button" id="btn" name="btn" value="get" OnClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<br/>
<br/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
</body>
</html>
Instead of .innerHTML() (used to asign HTML tags to element) use .value to assign value to an input field like #Azzi mentioned in his answer :
function gettotal()
{
var x=0;
x=document.getElementById("pop").value*3;
document.getElementById("pop1").value=x;
}
<form name="form1">
<input type="button" id="btn" name="btn" value="get" onClick="gettotal()"/>
<input type="text" id="pop" name="pop" size="3"/>
<input type="text" id="pop1" name="pop1" size="5" value="val"/>
</form>
Hope this helps.
I'm trying to figure out how to get my radio buttons to direct me to the webpage after you make your selection and hit submit. This is the code I have thus far.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Radio Buttons</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
<legend>Choose a Website:</legend>
<label for="ESPN.com">ESPN.com</label>
<input type="radio" name="website" id="ESPN.com" value="http://espn.go.com">
<label for="Facebook.com">Facebook.com</label>
<input type="radio" name="website" id="Facebook.com" value="https://www.facebook.com">
<label for="Apple.com">Apple.com</label>
<input type="radio" name="website" id="Apple.com" value="http://www.apple.com">
</fieldset>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
You should add the event onclick = "document.location.href='somepage.htm'" inside your input radio tag
You can use JQuery like this:
$('input:radio[name="website"]').change(
function(){
if ($(this).is(':checked') && $(this).val() == '1') {
window.location = "http://espn.go.com";
}
else if ($(this).is(':checked') && $(this).val() == '2'){
window.location = "https://www.facebook.com";
}
else if ($(this).is(':checked') && $(this).val() == '3'){
window.location = "http://www.apple.com";
}
});
HTML Radio Buttons
<input type="radio" name="website" id="ESPN.com" value="1">
<label for="Facebook.com">Facebook.com</label>
<input type="radio" name="website" id="Facebook.com" value="2">
<label for="Apple.com">Apple.com</label>
<input type="radio" name="website" id="Apple.com" value="3">
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="window.open(whichsite(this), '_blank'); return false;">
<b>Where do you need to go?:</b>
<p>
<label><input type="radio" name="site" value="http://yahoo.com/">Yahoo</label>
<label><input type="radio" name="site" value="http://google.com/">Google</label>
<label><input type="radio" name="site" value="http://amazon.com/">Amazon</label>
<label><input type="radio" name="site" value="http://cnn.com/" checked>CNN</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>