My html code is bellow
<li > <span class="add-on">ADdfgsdfgd</span>
<input class="" type="text" value="" >
<input class="picker" type="hidden" name="BIOLOGY" value="">
<input class="datepicker" type="date">
</li>
<li> <span class="add-on">Ecconomics</span>
<input class="Ecconomics" type="text" value="">
<input class="picker" type="hidden" name="ECONOMICS" value="">
<input class="datepicker" type="date">
</li>
<li> <span class="add-on">Business Study</span>
<input class="Business Study" type="text" value="">
<input class="picker" type="hidden" name="BUSINESS STUDIES" value="">
<input class="datepicker" type="date">
</li>
<input id="sss" value="get" class="datepicker" type="button">
And jquery code is bellow
$("#sss").on('click', function() {
$('li').each(function(){
var self= $(this);
var getDate= self.find('.datepicker').val();
var getMark= self.find('span + input').val();
var plusVal = getDate + getMark;
self.find('.picker').val(plusVal);
});
});
DEMO
I was able to put each first and last inputs values to middle hidden inputs via jquery.so now i want to send hidden value to php.What is the way of it?
Do this:
Assign name to each input.
In jquery get the value by $("input[name='field_name']").val()
With Jquery I use:
$.post("profile.php", {sel:"crop",pid:$("#sel_utypes").val()}, function(j)
{
//load form
$("#ext_page").html(j);
//diplay
$("#externalpage").overlay().load();
});
You can also serialize the forms with $("#fromid").serialize() and send that instead of manually writing the {sel:....}
<form action="yourpage.php" method="post">
<input type="text" value="" name="textbox">
<input type="hidden" value="<?php echo $some_variable ?>" name="hiddenfield">
</form>
With a form method="post", php creates an array under a variable called $_POST, so all you need to do is collect that and you're good to go.
In my example, you could:
<?php echo $_POST['hiddenfield'] ?>
To pull the variable after a postback.
Related
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.
Let's say I have a form that I send via GET:
<form method="get" action="/search.php?foo=bar&test=1&something=else">
<input type="text" name="day" placeholder="day"/>
<input type="text" name="link" placeholder="link"/>
</form>
And after submitting my form and processing the data (which consists of only saving it to a file), the url is changed to:
search.php?day=test&link=google.com
What should I do so the url becomes:
/search.php?foo=bar&test=1&something=else&day=test&link=google.com
(preserving the old parameters that were included in action attribute.)
The form action will change every time and it's difficult to keep the old GET parameters in the form action.
However, you can go with hidden fields.
Try this:
<form method="get" action="/search.php">
<input type="hidden" name="foo" value="bar"/> <!-- Add this -->
<input type="hidden" name="test" value="1"/> <!-- Add this -->
<input type="text" name="day" placeholder="day"/>
<input type="text" name="link" placeholder="link"/>
</form>
You could try changing the action before submitting, depending how you're going to submit the form. This can be done if you apply IDs to your texts and either a name or an ID to the form.
HTML:
<form id="frm" method="get" action="/search.php?foo=bar&test=1&something=else">
<input type="text" name="day" id="day" placeholder="day"/>
<input type="text" name="link" id="link" placeholder="link"/>
</form>
Then with JavaScript you can run a function and change the form's action:
var _form = document.getElementById('frm');
var day = document.getElementById('day').value;
var link = document.getElementById('link').value;
_form.action += '&day=' + day + '&link=' + link;
_form.submit();
You could try to use a hidden input field.
<input type="hidden" name="name" value="value">
if you are getting your variables first from get and then want to add into 2nd form you could get this and create input fields hidden with these get values
Now when you submit form in get url you will get all you desire data
<?php
if($_GET){
if(isset($_GET['submit1'])){
$foo = $_GET['foo'];
$test = $_GET['test'];
$something = $_GET['something'];
?>
<form method="get" action="/search.php">
<input type="hidden" name="foo" placeholder="foo" value="<?php echo $foo; ?>"/>
<input type="hidden" name="test" placeholder="test" value="<?php echo $test; ?>"/>
<input type="hidden" name="something" placeholder="something" value="<?php echo $something; ?>"/>
<input type="text" name="day" placeholder="day"/>
<input type="text" name="link" placeholder="link"/>
</form>
<?php
}
}
?>
I've 2 input fields which I want to have the same value.
When input field id="name_1" is filled in, I want to have it copied into input field id="name_2".
How, or is this possible?
<form action="" method="post">
<input type="text" name="name_1" id="name_1" value="">
<input type="text" name="name_2" id="name_2" value="">
</form>
You can do expected functionality using Jquery or Javascript. To make below operation work properly, you have to include latest jQuery in your html page
Try this
<form action="" method="post">
<input type="text" name="name_1" id="name_1" value="">
<input type="text" name="name_2" id="name_2" value="">
</form>
<script>
$("#name_1").keyup(function () {
var value = $(this).val();
$("#name_2").val(value);
}).keyup();
</script>
JS-FIDDLE
<script type="text/javascript">
$(document).ready(function(){
$('#field1').blur(function(){
$('#field2').val($(this).val());
});
});
</script>
<input type="text" name="field1" id="field1">
<input type="text" name="field2" id="field2">
HTML:
<input id="name1" class="name" type="text" /><input id="name2" class="name" type="text" />
jQuery:
$(document).ready(function(){
$(".name").keyup(function(){
var val = $(this).val();
$(".name").each(function(){
$(this).val(val);
});
});
});
JSFIDDLE: https://jsfiddle.net/yzmdu308/
This way, if the 1st one gets changed, it changes the value of name2, and if name2 gets changed, it changes the value of name1.
Without using Angular JS
It is better to use class selector to update bind to two input text box elements.
HTML
<input id="name1" class="name" type="text" />
JS
$(".name").keyup(function(){
$(".name").val($(this).val()); });
JS FIDDLE
Two way binding without Angular
With Angular JS
Angular providing very simple and efficient two way binding options. Please check the below sample.
HTML
<div ng-app>
<input id="name1" ng-model="name" type="text" />
<input id="name2" ng-model="name" type="text" />
JS FIDDLE
Two way binding with Angular
When the user clicks at the "Add New Job" link, a new form containing three fields will appear. That's the main form:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<h1>ADD NEW JOB +</h1>
//When clicked, it will show another form, with the same fields from the form above.
<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
<input type="text" value="Company" name="company2" />
<input type="text" value="Course" name="course2" />
<input type="date" value="Date" name="date2" />
</div>
I appreciate any help.
You can use jQuery .clone() to copy the original .job-content and then increment the form item names to replicate your example output.
This will also allow you to expand on the number of inputs if needed in the future without updating your JavaScript code.
$(function () {
var duplicates = 0,
$original = $('.job-content').clone(true);
function DuplicateForm () {
var newForm;
duplicates++;
newForm = $original.clone(true).insertBefore($('h1'));
$.each($('input', newForm), function(i, item) {
$(item).attr('name', $(item).attr('name') + duplicates);
});
$('<h2>JOB EXPERIENCE ' + (duplicates + 1) + '</h2>').insertBefore(newForm);
}
$('a[href="add-new-form"]').on('click', function (e) {
e.preventDefault();
DuplicateForm();
});
});
Working example - JSFiddle
Updated to clone the original job-content on page load so original form values are preserved.
It will add more form if u click "ADD NEW JOB +";
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<div id="concat"></div>
<h1>ADD NEW JOB +</h1>
<script>
$("#addfield").click(function(){
var detailContent = '<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>';
$('#concat').append(detailContent);
});
</script>
Use Jquery append method when the Button is clicked using click event
$('#id').click(function() {
var x=$("#formid").html();
$("body").append(x);
});
Working Fiddle: http://jsfiddle.net/2JgtT/
Note: you need somekind of logic to add more than 2 job fields.. this is just a sample.
HTML:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<div class="jobfields">
<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
<input type="text" value="Company" name="company2" />
<input type="text" value="Course" name="course2" />
<input type="date" value="Date" name="date2" />
</div>
</div>
<h1>ADD NEW JOB +</h1>
Jquery:
$(document).on("click", ".addjob", function (e) {
e.preventDefault();
$('.job-content').next('.jobfields').show();
});
OR this may be: http://jsfiddle.net/2JgtT/3/ look at the html, i have wrapped the divs in container
$(document).on("click", ".addjob", function (e) {
e.preventDefault();
addJobField();
});
function addJobField() {
$('.container').append("<div class='job-content'> " +
"<input type='text' value='Company' name='company' />" +
"<input type='text' value='Course' name='course' /> " +
"<input type='date' value='Date' name='date' /> </div>");
}
test
<div id="test1"></div>
<script>
$("#test").click(function(){
var detailContent = '<div>what portion need to add there</div>';
$('#test1').append(detailContent);
});
</script>
Try this:
Edited HTML:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<h1 id="add_job">ADD NEW JOB +</h1>
JavaScript:
var i = 1;
$("#add_job").click(function() {
$("body").append("<h2>JOB EXPERIENCE "+ ++i + "</h2>");
$("body").append($(".job-content:nth-child(2)").clone());
});
HTML Explanation:
Nothing much edited but on the click of the hyperlink I made sure that it should return false or else it would link to another page.
JavaScript Explanation:
First I set a variable to one which is the number of job experiences that will be incremented every time the button is clicked. Then on the click of the h1 of the link I append two things in the body. The first is the h2 which is the heading for the job experiences and the second thing is the copy of the first form that is present already their.
A quick JQuery solution:
$("#add-new-form").on("click",function{
var form = '<form>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
</form>';
$('body').append(form);
});
I have no means of testing but is this like something you were looking for?
I have a set of hidden input fields, which are cloned when the page is loaded and/or a button is clicked.
Html:
<div class="book_form" id="book_form_hidden">
<input type="checkbox" name="select" class="sell_checkbox" />
<h1>ISBN:</h1>
<input type="text" name="isbn" class="input_large" maxlength="20" />
<h1>Condition:</h1>
<input type="text" name="condition" class="input_medium" maxlength="100" />
<h1>Price:</h1>
<input type="text" name="price" class="input_price" maxlength="3" />
<input type="hidden" name="title" value="">
<input type="hidden" name="author" value="">
<input type="hidden" name="publisher" value="">
<input type="hidden" name="thumbnail" value="">
</div>
jQuery:
function addOne() {
var clone = $("#book_form_hidden").clone().removeAttr("id");
clone.find("input").each(function() {
$(this).attr("name", $(this).attr("name") + "[" + n + "]");
});
n++;
clone.appendTo($("#form_container"));
}
When I submit the form and send the data to PHP using a regular submit button, none of the inputs that were created through jQuery are submitted but only the input fields that were initially hidden (and have empty values).
Do I need use AJAX to submit form content that was created dynamically? I am confused.
Thanks so much for your help.