It seems that the the body of the document doesn't see the javascript functions when im ca. I tried different ways: applying a function on the element from the head (form.addEventListener("submit", submitEvent)); and onsubmit but none of them works. Could you help me to solve the problem, please?
<html>
<head>
<Title>Adminostrative interface</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function getInput(cssSelector){
var input= ducument.querySelector(cssSelector);
return input;
}
function submitEventAddTour(event){
var count=true;
var inp_nonD= getInput(".nonDigits");
var inp_D= getInput(".digits");
if((inp_nonD.value=="")|| (!isNaN(name.value)){
count=false;
}
if((inp_D.value=="") || (isNaN(name.value)){
count=false;
}
if(count==false){
event.preventDefault();
alert ("Incorrect input! Check each of the gaps");
}
}
var form=getInput("formNewTour");
form.addEventListener("submit", submitEvent);
</script>
</head>
<body>
<h3>Hello, <?php echo $_SESSION['name']; ?></h3>
<h3>Add new tour</h3>
<form method="POST" action="" class="formNewTour" >
<p><label>Country:</label>
<input type="text" name="country" class="nonDigits"
value= "<?php if(isset($error_country)){echo $_POST["country"];}?>"/>
</p>
<?php if (isset($error_country)){ echo $error_country;
} ?>
<p><label>Tour name:</label>
<input type="text" name="tourName" class="nonDigits"
value="<?php if(isset($error_tourName)){echo $_POST["tourName"];}?>"/>
</p>
<?php if (isset($error_tourName)){ echo $error_tourName;
} ?>
<p><label>Tour path:</label>
<input type="text" name="path" class="nonDigits"
value="<?php if(isset($error_path)){echo $_POST["path"];}?>"/>
</p>
<?php if (isset($error_path)){ echo $error_path;
} ?>
<p><label>Amount of days:</label>
<input type="text" name="days" class="digits" value= "<?php if(isset($error_days)){echo $_POST["days"];}?>"/>
</p>
<?php if (isset($error_days)){ echo $error_days;
} ?>
<p><label>Hotel:</label>
<input type="text" name="hotel" class="nonDigits"
value="<?php if(isset($error_hotel)){echo $_POST["hotel"];}?>"/>
</p>
<?php if (isset($error_hotel)){ echo $error_hotel;
} ?>
<p><label>Hotel price(single room):</label>
<input type="text" name="priceSingleRoom" class="digits"
value="<?php if(isset($error_priceSingleRoom)){echo $_POST["priceSingleRoom"];}?>"/>
</p>
<?php if (isset($error_priceSingleRoom)){ echo $error_priceSingleRoom;
} ?>
<p><label>Hotel price(double room):</label>
<input type="text" name="priceDoubleRoom" class="digits"
value="<?php if(isset($error_priceDoubleRoom)){echo $_POST["priceDoubleRoom"];}?>"/>
</p>
<?php if (isset($error_priceDoubleRoom)){ echo $error_priceDoubleRoom;
} ?>
<p><label>Breakfast price:</label>
<input type="text" name="priceBreakfast" class="digits"
value="<?php if(isset($error_priceBreakfast)){echo $_POST["priceBreakfast"];}?>"/>
</p>
<?php if (isset($error_priceBreakfast)){ echo $error_priceBreakfast;
} ?>
<p><label>Lunch price:</label>
<input type="text" name="priceLunch" class="digits"
value="<?php if(isset($error_priceLunch)){echo $_POST["priceLunch"];}?>"/>
</p>
<?php if (isset($error_priceLunch)){ echo $error_priceLunch;
} ?>
<p><label>Dinner price:</label>
<input type="text" name="priceDinner" class="digits"
value="<?php if(isset($error_priceDinner)){echo $_POST["priceDinner"];}?>"/>
</p>
<?php if (isset($error_priceDinner)){ echo $error_priceDinner;
} ?>
<p><label>Total tour price: </label>
<input type="text" name="totalTourPrice" class="digits"
value="<?php if(isset($error_totalTourPrice)){echo $_POST["totalTourPrice"];}?>"/>
</p>
<?php if (isset($error_totalTourPrice)){ echo $error_totalTourPrice;
} ?>
<input type="submit" value="Add new tour" name="submitNewTour"/>
</p>
</form>
<form method="POST" action="" class="formNewDate">
<p>Add new date: Tour name: <input type="text" name="newDateTour"
value="<?php if(isset($error_newDateTour)){echo $_POST["newDateTour"];}?>"/>
Date: <input type="text" name="newDate"
value="<?php if(isset($error_newDate)){echo $_POST["newDate"];}?>">
Amount of places:<input type="text" name="places"
value="<?php if(isset($error_newPlaces)){echo $_POST["places"];}?>"/></p>
<p><input type="submit" value="Add new date" name="addDate"/></p>
<p><?php if (isset($error_newDateTour)){ echo $error_newDateTour;
} ?></p>
<p><?php if (isset($error_newDate)){ echo $error_newDate;
} ?></p>
</p><?php if (isset($error_newPlaces)){ echo $error_newPlaces;
} ?></p>
</form>
Related
I have some input hiddens on this foreach and i need to copy these values to a other input hidden that is outside
<?php
$comentarios = $SQL->query("SELECT * from comentarios WHERE anime = '$get_anime' AND respostaId = 0");
foreach($comentarios as $comentario) { ?>
<button class="replyButton" onclick="copyFormValue()">Responder</button>
<input type="hidden" name="comentarioId" id="comentarioId" value="<?php echo $comentario['id']; ?>">
<input type="hidden" name="comentarioAvatar" value="<?php echo $comentario['avatar']; ?>">
<input type="hidden" name="comentarioNome" value="<?php echo $comentario['nome']; ?>">
<input type="hidden" name="comentarioData" value="<?php echo $comentario['data']; ?>">
<input type="hidden" name="comentarioTexto" value="<?php echo $comentario['comentario']; ?>">
<?php } ?>
<input type="hidden" name="respostaId" id="respostaId" value="">
<script>
function copyFormValue() {
formInput1 = document.getElementById("comentarioId");
form2Input1 = document.getElementById("respostaId");
form2Input1.value = formInput1.value;
}
</script>
The problem is that always copy the first foreach value, i need to copy the exact value reference to the button that i click..
I don't want to use post and forms to get post values..
EDIT: i put the code to be more clear to understand
Please try this:
<?php foreach($comentarios as $key => $comentario) { ?>
<div class="comentarioBox">
<img src="images/avatars/<?php echo $comentario['avatar']; ?>"/>
<div class="comentario">
<div class="comentarioHeader">
<span class="usuario"><?php echo $comentario['nome']; ?></span><span class="data">- <?php echo $comentario['data']; ?></span>
<button class="replyButton" onclick="copyFormValue(<?php echo $key;?>)">Responder</button>
<input type="hidden" name="comentarioId" value="<?php echo $comentario['id']; ?>">
<input type="hidden" name="comentarioAvatar" value="<?php echo $comentario['avatar']; ?>">
<input type="hidden" name="comentarioNome" value="<?php echo $comentario['nome']; ?>">
<input type="hidden" name="comentarioData" value="<?php echo $comentario['data']; ?>">
<input type="hidden" name="comentarioTexto" value="<?php echo $comentario['comentario']; ?>">
</div>
<p><?php echo $comentario['comentario']; ?></p>
<?php $respostasCount = $SQL->query("SELECT COUNT(*) from comentarios WHERE respostaId > 0 AND respostaId = ". $comentario['id'] ."")->fetch_row();
if ($respostasCount['0'] > 0) { ?>
<button class="respostas" id="respostasBox-<?php echo $comentario['id']; ?>"><?php echo $respostasCount['0']; ?> Resposta<?php echo (($respostasCount['0'] > 1) ? 's' : ''); ?></button>
<?php } ?>
<div class="respostasComentarioBox-<?php echo $comentario['id']; ?>" style="display:none;">
<?php foreach($respostasComentario as $resposta) {
if ($resposta['respostaId'] == $comentario['id']) { ?>
<div class="respostaComentarioBox">
<img src="images/avatars/<?php echo $resposta['avatar']; ?>"/>
<div class="respostaComentario">
<div class="comentarioHeader">
<span class="usuario"><?php echo $resposta['nome']; ?></span><span class="data">- <?php echo $resposta['data']; ?></span>
</div>
<p><?php echo $resposta['comentario']; ?></p>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
<input type="hidden" name="respostaId" id="respostaId" value="">
<script>
function copyFormValue(id) {
document.getElementById("respostaId").value = document.getElementById("comentarioId")[id].value;
}
</script>
I have created the following code.
for some reason its skips my if event when the radiobutton changes.
the if statment is whitin a FORM i dont think this matters?
<p><?php echo $rijden[$lan][0];?></p><input type="radio" name="JA" id="waarde1" value="waarde1" onClick="gestuurdjanee();"><b>Ja</b> <input type="radio" name="JA" value="waarde0" id="waarde0" onClick="gestuurdjanee();" ><b>Nee</b></br>
<?php
function gestuurdjanee() {
if(document.getElementById("waarde0").checked == true) {
//nee?>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen"/></p>
<p><?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing"/></p>
<?php
}elseif(document.getElementById("waarde1").checked == true) {
//ja?>
<p><?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer"/></p>
<p><?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig"/></p>
<p><?php echo $merk[$lan][0];?> <input type="text" name="merk"/></p>
<p><?php echo $onstype[$lan][0];?> <input type="text" name="onstype"/></p>
<p><?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas"/></p>
<?php
}
else {
// niksingevuld
?>
<?php echo"Vink een van de optie's aan"?>
<?php
}
}
Combining JS and PHP like that won't work. As been commented, the PHP will only run once on the server. When it's done, it shows the result in the browser. Then the Javascript will run.
Instead create three divisions with different classes.
Then bind an event on changing the input.
Also see the comments in my code:
$(function() {
$('.div1, .div2').hide(); // hide div1 and div2 on page load
$('[name=JA]').on('change', function() { // bind an onchange function to the inputs
if( $('[name=JA]:checked').val() == 'waarde1' ) { // get the value that is checked
$('.div1').show(); // show div1
$('.div2, .div3').hide(); // hide other divs
}
else {
$('.div2').show(); // show div2
$('.div1, .div3').hide(); // hide other divs
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<?php echo $rijden[$lan][0];?>
</p><input type="radio" name="JA" id="waarde1" value="waarde1"><b>Ja</b>
<input type="radio" name="JA" value="waarde0" id="waarde0"><b>Nee</b></br>
<div class="div1">
DIV1
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $totaalassen[$lan][0];?> <input type="text" name="totaalassen" /></p>
<p>
<?php echo $gestuurdenassen[$lan][0];?> <input type="text" name="gestuurdenassen" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig2" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="typebesturing" /></p>
</div>
<div class="div2">
DIV2
<p>
<?php echo $typeconcurent[$lan][0];?> <input type="text" name="typetrailer" /></p>
<p>
<?php echo $asconfig[$lan][0];?> <input type="text" name="asconfig" /></p>
<p>
<?php echo $merk[$lan][0];?> <input type="text" name="merk" /></p>
<p>
<?php echo $onstype[$lan][0];?> <input type="text" name="onstype" /></p>
<p>
<?php echo $gestuurdas[$lan][0];?> <input type="text" name="gestuurdas" /></p>
</div>
<div class="div3">Vink een van de optie's aan</div>
I was trying to post the form data with onclick event in an ajax function.but the data are not being posted in the next page. I was using the serialize method of from data submission but its not working. Meanwhile when I use jQuery .val function it captures the right data in th right field
Here is my html:
<form id="customer_from" class="form-group">
<div class="row">
<div class="col-lg-2">
<div id="customer_information" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Customer Information
</div>
<div id="registry_details" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Registry Details
</div>
<div id="send_email" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
E-mail
</div>
<div id="add_comment" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Add Comment
</div>
</div>
<div class="col-lg-10" id="dynamic" >
<div class="col-lg-5">
<label for='customer_id'> Customer ID: <span class='required-field'>*</label>
<input name='customer_id' type='text' value="<?php echo $data['customer_id'] ?>" class='form-control' required /> </span>
<label for='customer_name'> Customer Name: <span class='required-field'>*</label>
<input name='customer_name' type='text' value="<?php echo $data['firstname'] ?>" class='form-control' required /> </span>
<label for='customer_email'> E-mail: <span class='required-field'>*</label>
<input name='customer_email' type='text' value="<?php echo $data['email'] ?>" class='form-control' required /> </span>
<label for='customer_telephone1'> Telephone#1: <span class='required-field'>*</label>
<input name='customer_telephone1' type='text' value="<?php echo $data['phone'] ?>" class='form-control' required /> </span>
<label for='customer_telephone2'> Telephone#2:<span class='required-field'>*</label>
<input name='customer_telephone2' type='text' value="<?php echo $data['alt_phone'] ?>" class='form-control' required /> </span>
<label class="checkbox-inline"><input type="checkbox" value="yes">Pattern</label>
</div>
<div class="col-lg-5">
<label for='customer_address'> Address: <span class='required-field'>*</label>
<input name='customer_address' type='text' value="<?php echo $data['address'] ?>" class='form-control' required /> </span>
<label for='customer_city'> City: <span class='required-field'>*</label>
<input name='customer_city' type='text' value="<?php echo $data['city'] ?>" class='form-control' required /> </span>
<label for='customer_province'> Province: <span class='required-field'>*</label>
<input name='customer_province' type='text' value="<?php echo $data['province'] ?>" class='form-control' required /> </span>
<label for='customer_postal'> Postal code: <span class='required-field'>*</label>
<input name='customer_postal' type='text' value="<?php echo $data['postal_code'] ?>" class='form-control' required /> </span>
<label for='customer_country'> Country: <span class='required-field'>*</label>
<select id = "customer_country" name="customer_country" class="form-control" title="Select a Category" required>
<?php echo $customer_country; ?>
</select>
<label class="checkbox-inline"><input type="checkbox" value="yes">Newsletter</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-11 col-md-12">
<input type="button" class="btn btn-success" id="update-registry" value="Update Registry" style="float:right;">
<input type="button" class="btn btn-danger" id="delete-registry" data-registry="<?php echo $_POST['order_ref'];?>" data-type="<?php echo $_POST['registry_type']; ?>" value="Delete" style="float:left;">
</div>
</div>
</div>
</form>
and here is the ajax call:
$("#update-registry").on("click",function(){
$.ajax({
type: "POST",
url: "ajax/update_customer.php",
data:$("from#customer_form").serializeArray(),
beforeSend: function() {
},
success: function(msg) {
$("#registry").find(".update_registry").html(msg);
},
error: function() {
alert("failure");
}
});
})
See the form ID:
<form id="customer_from"
There is a typo:
data:$("from#customer_form").serializeArray(),
//------^^^^----------^^^^should be from
//------^^^^should be form
change from to form. Even better as IDs are unique so there is no need to prefix the tag name:
data:$("#customer_from").serializeArray(),
I want to hide all children divs except first one. When I select a radio option from first div, show the second one. This is my code.
<?php if ($options) { ?>
<div class="options <?php echo $this->journal2->settings->get('product_page_options_push_classes'); ?>">
<h3><?php echo $text_option; ?></h3>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'radio') { ?>
<div class="option form-group<?php echo ($option['required'] ? ' required' : ''); ?> option-<?php echo $option['type']; ?>">
<label class="control-label"><?php echo $option['name']; ?></label>
<div id="input-option<?php echo $option['product_option_id']; ?>">
<?php foreach ($option['product_option_value'] as $option_value) { ?>
<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" class="clickclass" />
<?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
Here is my output.
By default, only first set of options "Custom Size" should appear. When I click on any of the radio button, the next set "Custom Style" should appear.
Is there any way to achieve it?
Do you need something like this:
<html>
<head>
<style>
div {
border: 1px solid;
margin: 20px;
padding: 20px;
width: 200px;
}
.secound {
display: none;
}
</style>
<script>
//you need jQuery
$(function(){
$('.first input').change(function(){
$('.secound').fadeIn('slow')
})
});
</script>
</head>
<body>
<div class="first">
<p>First Div</p>
<label>small</label><input type="radio" name="name" value="value">
<label>medium</label><input type="radio" name="name" value="value1">
<label>large</label><input type="radio" name="name" value="value2">
</div>
<div class="secound">
<p>Secound Div</p>
<label>small</label><input type="radio" name="name1" value="value">
<label>medium</label><input type="radio" name="name1" value="value1">
<label>large</label><input type="radio" name="name1" value="value2">
</div>
</body>
See demo: http://jsfiddle.net/sabeti05/73oprqv0/
It may seems that this question is repeated but my question is little different and i did'nt find its answer in other questions so i am starting it as a new thread.
I have a form where there is a link on clicking which will add the html content on the div inside the form.user can add multiple times. but when i submit the form. The field added for the first time using javascript is submitted through the form but if i add multiple times then the data of second and after form is not posted through form.
I have posted my code below can anyone help me to find and solve the issue.
<form action="<?php echo $this->getUrl('children/index/addChild') ?>" method="post" id="form-validate" autocomplete="off">
<div class="fieldset">
<?php //echo $this->getBlockHtml('formkey')?>
<h2 class="legend"><?php echo $this->__('Child Name') ?></h2>
<?php if(sizeof($model)==0): ?>
Add Child
<div id="child" style="display:none;">
<li>
<div class="field">
<label for="firstname" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
<div class="input-box">
<input type="text" name="firstname" id="firstname" value="<?php ?>" title="<?php echo $this->__('First Name') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="lastname" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
<div class="input-box">
<input type="text" name="lastname" id="lastname" value="<?php ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" />
</div>
</div>
</li>
<li>
<div class="field">
<label for="schoolname" class="required"><em>*</em><?php echo $this->__('School Name') ?></label>
<div class="input-box">
<select id='schoolname' name='schoolname'>
<option value="0">Select School</option>
<?php foreach ($schools as $key => $school): ?>
<option value="<?php echo $school['school_id']; ?>"><?php echo $school['school_name'] ?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="field">
<label for="year" class="required"><em>*</em><?php echo $this->__('Year') ?></label>
<div class="input-box">
<input type="text" name="year" id="year" value="<?php ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="class"><?php echo $this->__('Class(if applicable)') ?></label>
<div class="input-box">
<input type="text" name="class" id="class" value="<?php ?>" title="<?php echo $this->__('Class') ?>" class="input-text" />
</div>
</div>
</li>
<button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
</div>
<?php else: ?>
<?php $i=1;
foreach ($model as $key => $value): ?>
<div id="child">
<?php
$arr = array();
$id= $value['child_id'];
?>
<!-- <button type="button" id="removechild">Remove Child</button> -->
Remove Child
<li>
<input type="hidden" value="<?php echo $id; ?>" name="childid<?php echo $i ?>" />
<div class="field">
<label for="firstname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('First Name') ?></label>
<div class="input-box">
<input type="text" name="firstname<?php echo $i ?>" id="firstname<?php echo $i ?>" value="<?php echo $value["firstname"]; ?>" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="lastname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label>
<div class="input-box">
<input type="text" name="lastname<?php echo $i ?>" id="lastname<?php echo $i ?>" value="<?php echo $value['lastname']; ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" />
</div>
</div>
</li>
<li>
<div class="field">
<label for="schoolname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('School Name') ?></label>
<div class="input-box">
<select id='schoolname<?php echo $i ?>' name='schoolname<?php echo $i ?>' value='<?php echo $value['school_id'] ?>' >
<option value="0">Select School</option>
<?php foreach ($schools as $key => $school): ?>
<option value="<?php echo $school['school_id']; ?>" <?php if($school['school_id']==$value['school_id']){echo "selected" ;} ?> ><?php echo $school['school_name'] ?></option>
<?php endforeach;?>
</select>
</div>
</div>
<div class="field">
<label for="year<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Year') ?></label>
<div class="input-box">
<input type="text" name="year<?php echo $i ?>" id="year<?php echo $i ?>" value="<?php echo $value['age']; ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" />
</div>
</div>
<div class="field">
<label for="class<?php echo $i ?>"><?php echo $this->__('Class(if applicable)') ?></label>
<div class="input-box">
<input type="text" name="class<?php echo $i ?>" id="class<?php echo $i ?>" value="<?php echo $value['class']; ?>" title="<?php echo $this->__('Class') ?>" class="input-text" />
</div>
</div>
</li>
</div>
<?php $i++; ?>
<?php endforeach; ?>
<input type="hidden" value="<?php echo $i; ?>" name="count" />
<div id="addition"></div>
Add Another Child
<input type="hidden" id="test" value="0" name="test"/>
<button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button>
<?php endif; ?>
</form>
and the script is
function duplicate(){
var id=document.getElementById('test').value;
var div = document.createElement('div');
div.className = "row"+id;
div.innerHTML = '<label for="firstname" class="required"><em>*</em><?php echo $this->__("First Name") ?></label><div class="input-box"><input type="text" name="firstname'+id+'" id="firstname'+id+'" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" /></div><label for="lastname" class="required"><em>*</em><?php echo $this->__("Last Name") ?></label><div class="input-box"><input type="text" name="lastname'+id+'" id="lastname'+id+'" title="<?php echo $this->__("Last Name") ?>" class="input-text required-entry" /></div><label for="schoolname" class="required"><em>*</em><?php echo $this->__("School Name") ?></label><div class="input-box"><select id="schoolname'+id+'" name="schoolname'+id+'"><option value="0">Select School</option><?php foreach ($schools as $key => $school): ?><option value="<?php echo $school["school_id"]; ?>" <?php if($school["school_id"]==$value["school_id"]){echo "selected" ;} ?> ><?php echo $school["school_name"] ?></option><?php endforeach;?></select></div><label for="year" class="required"><em>*</em><?php echo $this->__("Year") ?></label><div class="input-box"><input type="text" name="year'+id+'" id="year'+id+'" title="<?php echo $this->__("Year") ?>" class="input-text required-entry" /></div><label for="class"><?php echo $this->__("Class(if applicable)") ?></label><div class="input-box"><input type="text" name="class'+id+'" id="class'+id+'" title="<?php echo $this->__("Class") ?>" class="input-text" /></div>';
document.getElementById('addition').appendChild(div);
document.getElementById('test').value= ++id;
}
Do not bother about the jumbled code, I just want to add the html in javascript to div named "addition".
Let me explain my scenario more clearly.There is a link to "Add another Child" when i click this link there appear the html block which is inside javascript to the div "addition".I also can add multiple child. but while submitting only one child is submitted.
Can anyone help please.Any suggestions are appreciated.
Refer this jsfiddle. It has submit handler which serializes your data and sends it to the server.
$('#form-validate').on('submit', function (e) {
//prevent the default submithandling
e.preventDefault();
alert($(this).serialize())
//send the data of 'this' (the matched form) to yourURL
$.post('yourSubmitUrl.php', $(this).serialize());
});