<head>
<title>jQuery Add & Remove Dynamically Input Fields in PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>jQuery Add & Remove Dynamically Input Fields in PHP</h1>
<form method="post" action="">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
<input type="checkbox" name="caf[]" class="checkbox-inline caf" />
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
<input type="checkbox" name="caf[]" class="checkbox-inline caf" />
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function() {
if ($('body').find('.fieldGroup').length < maxGroup) {
var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
});
});
</script>
</body>
in the above code i get the check box values but not corresponding to the text field value
kindly help
i need out put as the data for eg
if i entered abcd then check one check box associated with it the the out i need is abcd-value of checkbox clicked
this will repetet up to the number of input group
I assume "cdrtxt" is in the same node as ".cdr"?
Use .parent() on ".cdr"
$(document).on('click', '.cdr', function() {
alert(1);
$(this).parent().find('.cdrtxt').val("1");
});
There are several issues with this one line of code:
$("this").find('.cdrtxt').val("1");
There is no such thing as $("this"). At least if you do not have a non-standard <this> tag in your HTML. When you want to refer to the node that received the event and wrap it in a jQuery object, you should use $(this) <-- no quotes.
There is no cdrtxt class in your HTML code.
The solution in your case is to search for the text input sibling of the clicked checkbox. Something like:
$(this).siblings('input[type=text]').val('something');
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
You can not properly associate the text input field values and checkbox values, using this naming scheme.
Text fields always cause an entry in the form submission data set, even if they are empty - checkboxes don’t, they only create one if they actually where checked.
If you had the above combination of fields four times, but you only checked the first and third checkbox, then you would get $_POST['phno'] as an array of four text values, indexed from 0 to 3, and $_POST['cdr'] would contain only two checkbox values (you did not specify one here explicitly, so those checkboxes would submit the value on), indexed with 0 and 1.
Based on those indexes, it is impossible to tell now, which of those checkboxes where checked. If you had checked the third and fourth instead, you would still get those values under the indexes 0 and 1.
You need to specify the index upfront here:
<input type="text" name="phno[0]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[0]" class="checkbox-inline cdr" />
and that 0 needs to become 1 for the next set, and so on.
Then the checked checkboxes would get an index that corresponds to that of the text field.
There would still be “holes” in the indexes in $_POST['cdr'] - if you checked the first (index 0) and fourth (index 3) one, then $_POST['cdr'][0] and $_POST['cdr'][3] would be set afterwards.
But if you loop over $_POST['phno'], which contains all indexes from 0 to 3, then you can use that index value to check if the corresponding index in $_POST['cdr'] is set.
So you will have to modify your JavaScript part, that simply “clones” those existing rows, so that it sets the proper fields names, including the index.
The problem with checkbox is that if it is not checked then it is not posted with the form. If you check a checkbox and post a form you will get the value of the checkbox in the $_POST variable , if it's unchecked no value will be assigned to the $_POST variable. So as to know which checkbox is checked assign a distinct value to it.This code might solve your problem
<?php
if(isset($_POST['submit'])){
if(isset($_POST['checkbox'])){
echo 'Checkbox: ';
print_r($_POST['checkbox']);
}
if(isset($_POST['text'])){
$text=$_POST['text'];
echo 'Textbox: ';
print_r($text);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" action="tests.php">
<input type="checkbox" name="checkbox[]" class="check" value="1">
<br>
<input type="checkbox" name="checkbox[]" class="check" value="2">
<br>
<input type="checkbox" name="checkbox[]" class="check" value="3">
<br>
<input type="text" name="text[]" class="text">
<br>
<br>
<input type="submit" name="submit">
</form>
<button id="add">ADD</button>
</body>
<script>
$(document).ready(function()
{
$('#add').on('click',function()
{
var breaks="<br>"
var checkbox="<br>";
var textbox="<br><input type='text' name='text[]' class='text'>";
var check_length=$('.check').length;
console.log(check_length);
for(var i=check_length+1;i<check_length+4;i++)
{
checkbox=checkbox+"<input type='checkbox' name='checkbox[]' class='check' value='" + i + "'><br>";
}
$('input[type="text"]').last().after(checkbox,textbox);
});
});
</script>
</html>
Related
I am trying to figure out a way to get the value of an input box that is not in a form and put it in the URL of a form under it. Here is what I am talking about:
<div id="wrapper">
<h1>[ <input type="text" name="to" id="to" placeholder="To"> ]</h1>
<div id="menu">
<p class="welcome">Welcome, <b><?php echo htmlentities($user); ?></b></p>
<p class="logout"><a id="exit" href="#">Logout</a </p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="../new_private.php?n=<?php echo $_POST['to']; ?>" method="post">
<input name="usermsg" type="text" id="usermsg" size="63">
<input name="submitmsg" type="submit" id="submitmsg" value="Send">
<input name="from" type="hidden" value="<?php echo $user; ?>">
</form>
</div>
When I try it this way, I get an undefined error saying $_POST['to'] is not a valid index.
I would like to get the value of the input box "to" and put into the URL for the form under it. How can I achieve this?
Thanks in advance!
Alex
In HTML5, you can include <input> elements outside the <form> by using the form attribute with the value of the form's id.
For example...
<h1>[ <input type="text" name="n" id="to" placeholder="To" form="message"> ]</h1>
<!-- snip -->
<form id="message" action="../new_private.php" method="post">
The only difference here would be that the n field will be in $_POST instead of $_GET.
If you really need the value in the URL, you'll need some JavaScript. Something like this
<h1>[ <input type="text" name="to" id="to" placeholder="To"> ]</h1>
<!-- snip -->
<form name="message" action="../new_private.php" method="post">
<!-- form contents, etc -->
</form>
<script>
(function() { // IIFE so as not to pollute the global scope
const form = document.forms.message
const action = form.action // original action
document.getElementById('to').addEventListener('input', function() {
form.action = action + '?n=' + encodeURIComponent(this.value)
}, false)
})()
</script>
I have a form as follow.
<form action="action.php" method="post">
<div class="add_another">
<label for="BrotherAdmissionNumber" class="p-label-required">Admission Number</label>
<input type="text" name="BrotherAdmissionNumber[]" placeholder="Admission Number" />
<label for="varName" class="p-label-required">Name</label>
<input type="text" name="BrotherName[]" placeholder="Name" class="form-control" />
<label for="BrotherGrade" class="p-label-required">Grade</label>
<input type="text" id="varGrade" name="BrotherGrade[]" placeholder="Grade" class="form-control" />
<label for="BrotherClassTr" class="p-label-required">Class Teacher</label>
<input type="text" id="varClassTeacher" name="BrotherClassTr[]" placeholder="Class Teacher" class="form-control" />
<button class="btn add_field_button" style="float: right;">Add Another Brother</button>
</div>
<button class="submit" >Submit</button>
</form>
And I am using following jQuery to add another section to the form.
This will create the set of fields again.
<script>
var max_fields = 10;
var wrapper = jQuery(".add_another");
var add_sec_3 = '<div class="add_another" style="border-top: 1px solid #f0f0f0; border-spacing: 7px;"><label for="BrotherAdmissionNumber" class="p-label-required">Admission Number</label><input type="text" name="BrotherAdmissionNumber[]" placeholder="Admission Number" /><label for="varName" class="p-label-required">Name</label><input type="text" name="BrotherName[]" placeholder="Name" class="form-control" /><label for="BrotherGrade" class="p-label-required">Grade</label><input type="text" id="varGrade" name="BrotherGrade[]" placeholder="Grade" class="form-control" /><label for="BrotherClassTr" class="p-label-required">Class Teacher</label><input type="text" id="varClassTeacher" name="BrotherClassTr[]" placeholder="Class Teacher" class="form-control" />Remove</div>';
jQuery(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
jQuery(wrapper).append(add_sec_3); //add section
jQuery('.add_another .add_another:last').hide();
jQuery('.add_another .add_another:last').show('fast');
}
});
</script>
When clicking on add another button a section is added successfully.
So that's fine.
My issue is, I tried several methods of retrieving for arrays but nothing works.
I want to create another form with hidden fields of brother details to send it to another page.
How can I show the all generated fields values in a php page during the submission?
How do I have to update this action.php file?
action.php
<?php
$BrotherAdmissionNumber = $_POST['BrotherAdmissionNumber'];
$BrotherName = $_POST['BrotherName'];
$BrotherGrade = $_POST['BrotherGrade'];
$BrotherClassTr = $_POST['BrotherClassTr'];
foreach(){
//brothers details start here
?>
<form action="action2.php" method="post">
Admission Number :<?= $BrotherAdmissionNumber ?>
<input type="hidden" value="<?= $BrotherAdmissionNumber ?>" name="BrotherAdmissionNumber" />
Name :<?= $BrotherName ?>
<input type="hidden" value="<?= $BrotherName ?>" name="BrotherName" />
Grade :<?= $BrotherGrade ?>
<input type="hidden" value="<?= $BrotherGrade ?>" name="BrotherGrade" />
Teacher :<?= $BrotherClassTr ?>
<input type="hidden" value="<?= $BrotherClassTr ?>" name="BrotherClassTr"/>
<button name="send_to_other_page">CONFIRM</button> <!-- when this button is clicked the form shoukd send the hidden values -->
</form>
<?php } ?>
Now when send_to_other_page button is clicked the form should send the hidden values to next page action2.php
What I have to update in foreach loop above?
How I can collect these details in action2.php ?
Take a look at this link
You have to serialise form data and then you can easily retrieve and save in database.
I am trying to find value of the input element in a popup window which is being opened from a parent page.
My code is below. I am getting not able to get pc value from input.
<html>
<head>
<?
$pid=$_GET['pid'];
$cart_url = '../cart.php?action=add&p='.$pid;
echo $cart_url;
?>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function sendValue(val){
window.opener.document.getElementById('details_<?=$pid?>').value = val;
window.opener.location.href='<?php echo $cart_url; ?>&pc='.concat(val);
window.close();
window.location.reload();
}
</script>
<form name="selectform">
<label>Enter Price:</label>
<input id="1" name="details_<?=$pid?>" type="text"></input>
<input type="Submit" onsubmit="sendValue(this.value)"></input>
</form>
</body>
</html>
Code:
<input id="1" name="details_<?=$pid?>" type="text"></input>
<input type="Submit" onsubmit="sendValue(this.value)"></input>
Change to:
<input id="details" type="text">
<input type="button" value='Send...' onclick="sendValue(document.getElementById('details').value)">
Just make your input box id from
<input id="1" name="details_<?=$pid?>" type="text"></input>
to
<input id="details_<?=$pid?>" name="details_<?=$pid?>" type="text"></input>
It should work
If you're using getElementById, you have to use pass the id of the element you're trying to get the value from (in this case 1).
I have two different forms which are being included in a php file. Their visibility is based on a onClick JS toggle function. The toggle works great. However if I was to fill only one of the forms out and click its respective submit button, I get sent back to the same page rather than the action.php file that i have specifed with this in the broswer:
http://localhost/?user_temp=f&pass_temp1=f&pass_temp2=ff&email_temp=f&answer1=3&submitbtn=Signup+Now
And this Javascript error: "TypeError undefined document.hform.sSecureUser
Both Forms also have their own javascripts to MD5 some data and sSecureUser comes from the Signup Form.
Interestingly, if I was to remove one of the inlcude forms leaving only the Submit form lets say, it would work. It seems that these forms' javascript is clashing with one another :/ ...
I tried this but it didnt work for me since each one of my forms is using java script. PLEASE HELP AND THANKS IN ADVANCE!!!... Let me know if you would like to see any of my forms, javascript, or php files...
Toggle Code:
<div>
Login
<div id="login-div" style="display:none">
<?php include($_SERVER['DOCUMENT_ROOT'].'/forms/login-form.php');?>
</div>
Sign up
<div id="signup-div" style="display:none">
<?php include($_SERVER['DOCUMENT_ROOT'].'/forms/signup-form.php'); ?>
</div>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
//-->
</script>
</div>
Login Form:
<div id="hasJavaScript1" style="display:none">
<form name="login">
Username:
<input type="text" name="user_temp" size=32 maxlength=32><br>
Password:
<input type="password" name="pass_temp" size=32 maxlength=32><br>
<input onClick="passResponse(); return false;" type="submit" name="submitbtn" value="Login now">
</form>
<form action="/action/login-action.php" METHOD="POST" name="hform">
<input type="hidden" name="secureuser">
<input type="hidden" name="securepass">
</form>
</div>
<script language="javascript" src="/js/md5.js"></script>
<script language="javascript">
<!--
document.getElementById('hasJavaScript1').style.display = 'block';
function passResponse() {
document.hform.secureuser.value = MD5(document.login.user_temp.value);
document.hform.securepass.value = MD5(document.login.pass_temp.value);
document.login.pass_temp.value = "";
document.hform.submit();
}
// -->
</script>
SignUP Form:
<?php include ($_SERVER['DOCUMENT_ROOT'].'/functions/functions.php');?>
<div id="hasJavaScript" style="display:none">
<form name="signup">
<label>Username</label> <input type="text" name="user_temp" size=32 maxlength=32><span>alphanumeric, no spaces</span><br>
<label>Type password</label> <input type="password" name="pass_temp1" size=32 maxlength=32><span>alphanumeric, 8-12 long</span><br>
<label>Retype password</label> <input type="password" name="pass_temp2" size=32 maxlength=32><br>
<label>Email</label> <input type="text" name="email_temp" size=32 maxlength=32><br>
<label> What is: </label><?php $captchaArray = myCaptcha(); echo $captchaArray['equation'];?><br>
<label>Answer</label><input type="text" name="answer1">
<input onClick="passResponse1(); return false;" type="submit" name="submitbtn" value="Signup Now">
</form>
<form action="/action/signup-action.php" METHOD="POST" name="signup-hform">
<input type="hidden" name="sSecureUser">
<input type="hidden" name="sSecurePass1">
<input type="hidden" name="sSecurePass2">
<input type="hidden" name="secureEmail">
<input type="hidden" name="answer2">
<input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">
</form>
</div>
<script language="javascript" src="/js/md5.js"></script>
<script language="javascript">
<!--
document.getElementById('hasJavaScript').style.display = 'block';
function passResponse1() {
document.signup-hform.sSecureUser.value = MD5(document.signup.user_temp.value);
document.signup-hform.sSecurePass1.value = MD5(document.signup.pass_temp1.value);
document.signup.pass_temp1.value = "";
document.signup-hform.sSecurePass2.value = MD5(document.signup.pass_temp2.value);
document.signup.pass_temp2.value = "";
document.signup-hform.secureEmail.value = MD5(document.signup.email_temp.value);
document.signup-hform.answer2.value = document.signup.answer1.value;
document.signup.answer1.value = "";
document.signup-hform.submit();
}
// -->
</script>
One problem I see is that you do not specify any value attributes or values in your hidden fields:
<input type="hidden" name="sSecureUser">
<input type="hidden" name="sSecurePass1">
<input type="hidden" name="sSecurePass2">
<input type="hidden" name="secureEmail">
<input type="hidden" name="answer2">
But then in your JS, you're trying to access the value attribute.
document.hform.sSecureUser.value = ...
Try adding values to those. I would also give your hidden forms ids and use the document.getElementById() syntax instead of the document.hform.sSecureUser syntax.
As far as your form submits, you are suppressing the action of the first form, trying to fill in values for the hidden fields in the second form and then submitting that. Both of your scripts use the same name for the forms "hform". They need to be unique. I would also give them a unique id.
Another possible issue is this line:
<input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">
You're using the . for string concatenation, but it's not in an echo/print statement. I think it's supposed to be:
<input type="hidden" name="checker" value="<?php echo $captchaArray['answer'];?>">
I am done with the search page where the user enters the information and select from the drop-list. I've also added the button AddList where you can have more than one search form with tag names changed. All of the searches will eventually be executed in one Submit button and each search will go in one single query. My table caries all the information and tuples contain only numbers.
UPDATED: I tried changing the input type of the input tags but the enable and disable functions can't seem to work on integers, only on text fields. How can I fix that?
My submission is tomorrow, and here is my search code:
<script type="text/javascript">
$('#exactButton').live('click', function(){
$(this).prev().prev().prev().prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().attr('disabled',true);
$(this).prev().prev().prev().prev().attr('disabled',true);
});
$('#rangeButton').live('click',function(){
$(this).prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().removeAttr('disabled');
$(this).prev().prev().prev().prev().attr('disabled',true);
});
})
</script>
And this is my HTML code:
<button id="button">Add List</button><br><br>
<form id ="form" name="search" method="get" action="test.php">
<div id="div">
<select name ="select" >
...options...
</select>
Value:<input type="text" name="exact" id="exactField" />
From: <input type="text" name="from" id="fromField" />
To: <input type="text" name="to" id="toField" />
<br>
<input type="button" name="answer" value="Range" id="rangeButton" />
<input type="button" name="answer" value="Exact" id="exactButton" />
</div>
<br>
<input type="submit"name="search" value="Submit">
</form>
Thank you in advance..
as Dagon said, you will see all submitted parameters in the URL since you are submitting the form with method GET. here is very good explanation for this: http://www.w3schools.com/php/php_get.asp
One idea:
add some custom attributtes to the elements (to the clones too).
this.attr("mycustomattribute","somevalue");
after this, you can get all elements on the page with your custom attribute and your value.
divs = $('div[mycustomattribute="somevalue"]'); //should give all div container with attribute "mycustomattribute" with value "somevalue"
divs.each(function(){
console.log(this,$(this).attr('name'));//show expression (for debug)
});
then you can collect this elements, serialize it and add it to your post Not tested, but an idea.
Kind Regards
In PHP, it's already there.
print_r($_GET); will list all parameters sent by GET method
print_r($_POST); will list all parameters send by POST method.
Then, of course, you will need to iterate in the array to include each values in your query statement.
You can naming input with prefix or suffix correspond to sequence that user click to add list and add those set of inputs to only form.
<form id ="form" name="search" method="get" action="test.php">
<div>
<select name ="select[1]" >
...options...
</select>
Value:<input type="text" name="exact[1]" class="exactField" />
From: <input type="text" name="from[1]" class="fromField" />
To: <input type="text" name="to[1]" class="toField" />
<br>
<input type="button" name="answer[1]" value="Range" class="rangeButton" />
<input type="button" name="answer[1]" value="Exact" class="exactButton" />
</div>
<div>
<select name ="select[2]" >
...options...
</select>
Value:<input type="text" name="exact[2]" class="exactField" />
From: <input type="text" name="from[2]" class="fromField" />
To: <input type="text" name="to[2]" class="toField" />
<br>
<input type="button" name="answer[2]" value="Range" class="rangeButton" />
<input type="button" name="answer[2]" value="Exact" class="exactButton" />
</div>
.
.
.
<br>
<input type="submit"name="search" value="Submit">
</form>