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.
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
}
}
?>
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.
I have this form:
<form action="http://xxx" method="post">
<img src="" id="imagenOriginal">
<label>Nombre</label>
<input type="text" name="nombre" />
<label>Apellido</label>
<input type="text" name="apellido" />
<input id="a" type="submit" value" "name="btnRegistro">
</form>
And if I dont set a value to the submit input the form dont submit , but if I put value="SEND" or any thing its make the submit ? Why occurs that?
Should be
<input id="a" type="submit" value="" name="btnRegistro">
I have the below form that i want to remove the submit button from (or hide it).
<form action="cart.php" method="post">
<input name="quantity" type="text" value="3" size="1" maxlength="2" />
<input name="adjustBtn" type="submit" value="change" />
<input name="item_to_adjust" type="hidden" value="1" />
</form>
In a jQuery file called test.js that i have included in the page i have the bellow that should submit the form when the input field "quantity" has changed, but it does not, i cannot get it to work and i have tried all sorts of form submit functions from other posts on SO. One person even said that if the submit button had a name of submit it would not work but i do not have that.
$(document).ready( function() {
$('#quantity').change(function(){
//$(this).closest("form").submit(); <-- commented out as not working either.
//$(this).closest('form')[0].submit(); <-- commented out as not working either.
$('#adjustBtn').submit();
});
} );
Anyone have any idea why it wont submit the form? I have tested in chrome and IE.
You need to submit the form instead of the button:
$("#adjustBtn").closest("form").submit();
Also, you didn't give an id to your adjustBtn, thus $("#adjustBtn") won't work;
<input id="adjustBtn" name="adjustBtn" type="submit" value="change" />
The same thing happens with #quantity, that's why the change handler doesn't get fired, you need to also add the id:
<input id="quantity" name="quantity" type="text" value="3" size="1" maxlength="2" />
It should be:
<form action="cart.php" method="post" id="autoSubmit">
<input name="quantity" type="text" value="3" size="1" maxlength="2" />
<input name="item_to_adjust" type="hidden" value="1" />
</form>
And the jQuery:
$(document).ready( function() {
$('#quantity').change(function(){
$('#autoSubmit').submit();
});
} );