I have the following form in my php file :
<!-- START of HTML Form -->
<form id = "myForm">
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">*Select one Patient Set:</div>
</div>
<select name="employeeSetSelectList" id="listOfEmployeeSet">
<option value="-1111">--Select a Employee Set--</option>
<?php
foreach($empSet as $oneEmp) {
?>
<option value="<?php echo $oneEmp['queryResultInstanceID'];?>" >
<?php echo $oneEmp['querySetDesc'] ; ?>
<?php echo "; Employee Count:" . $oneEmp['querySetSize'] ; ?>
<?php echo "; Date Created:" . $oneEmp['queryStartDate'] ; ?>
</option>
<?php
}
?>
</select>
<div class="row" style="margin-bottom: 20px" name="infoDiv" ></div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Information Associated with this Request:</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoDiv" >
<div class="col-md-6">
<label for="projectTitle">*Title of Research Project</label>
<input type="text" class="form-control" id="projectTitle" value="<?php echo $previousProjTitle;?>" >
</div>
<div class="col-md-6">
<label for="projectDesc">*Description of the Research Project</label>
<input type="text" class="form-control" id="projectDesc" value="<?php echo $previousProjDesc;?>">
</div>
</div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Data Required :</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoNeededFromTeam" >
<div class="col-md-6">
<label for="protocolNumberIRB">HTTP Protocol Number</label>
<input type="text" class="form-control" id="protocolNumber">
</div>
<div class="col-md-6">
<label for="projectDesc">*Document Required?</label>
<select class="form-control">
<option selected disabled>Please Select one</option>
<option value="docRequired">Required</option>
<option value="docNotRequired">Not Required</option>
</select>
</div>
</div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Attach your documents:</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoRegAttachedDocuments" >
<div class="col-md-4">
<label for="docSubmission">Attach Original HTTP Submission</label>
<input type="file" id="docSubmission">
</div>
<div class="col-md-4">
<label for="docApproval">Attach Original HTTP Approval</label>
<input type="file" id="docAproval">
</div>
<div class="col-md-4">
<label for="additionalDocs">Attach any additional documents (if any)?</label>
<input type="file" id="additionalDocs">
</div>
</div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Standard Output:</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoDiv" >
<div class="col-md-6">
<label for="dataRequested">*Data Requested:</label>
<input type="text" class="form-control" id="dataRequested">
</div>
</div>
</form>
<!-- END of HTML Form -->
<div class="row"style="margin-top: 15px;" >
<button class="btn btn-primary" onclick="submitUsingjQuery()">Submit</button>
</div>
In the function, I am trying to serialize it into JSON object which I can use to forward to a java webservice later on using Ajax call.
function submitUsingjQuery(){
var formdata = $('#myForm').serializeArray()
}
In the browser console, I keep on getting Uncaught TypeError: Cannot read property 'serializeArray' of null. What am I doing wrong?
Since I have files involved, I am wondering if JSON object contains files/documents as well?
Jack_Tauson_Sr:
What am I doing wrong?
Your form control elements are nameless, so there is nothing serializeArray() can serialise.
http://api.jquery.com/serializeArray/:
The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. […] Data from file select elements is not serialized.
No.
Thanks for the answer.
Okay. I will add name for each of <input fields. For example :
<input type="text" name = "projTitle" class="form-control" id="projectTitle" value="<?php echo $previousProjTitle;?>" >
Is there a way I could convert uploaded files to JSON object? I mean by converting file to something else which JSON Object accepts. Because the whole point of having me convert form fields to JSON object is considering the documents as well.
If not then how would you recommend sending file value in a web service call? I mean I can send other form fields as parameters.
Thanks
What always works is the conversion to a string. But JSON never was intended to send binary data, so you would certainly lose some information about the file.
Okay, thanks! I tried adding name and it’s still throwing the same error. Could you please tell me what am I doing wrong?
<!-- START of HTML Form -->
<form id = "myForm">
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">*Select one Patient Set:</div>
</div>
<select name="employeeSetSelectList" id="listOfEmployeeSet">
<option value="-1111">--Select a Employee Set--</option>
<?php
foreach($empSet as $oneEmp) {
?>
<option value="<?php echo $oneEmp['queryResultInstanceID'];?>" name = "queryInfo" >
<?php echo $oneEmp['querySetDesc'] ; ?>
<?php echo "; Employee Count:" . $oneEmp['querySetSize'] ; ?>
<?php echo "; Date Created:" . $oneEmp['queryStartDate'] ; ?>
</option>
<?php
}
?>
</select>
<div class="row" style="margin-bottom: 20px" name="infoDiv" ></div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Information Associated with this Request:</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoDiv" >
<div class="col-md-6">
<label for="projectTitle">*Title of Research Project</label>
<input type="text" class="form-control" name = "projTitle" id="projectTitle" value="<?php echo $previousProjTitle;?>" >
</div>
<div class="col-md-6">
<label for="projectDesc">*Description of the Research Project</label>
<input type="text" class="form-control" name = "projDes" id="projectDesc" value="<?php echo $previousProjDesc;?>">
</div>
</div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Data Required :</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoNeededFromTeam" >
<div class="col-md-6">
<label for="protocolNumberIRB">HTTP Protocol Number</label>
<input type="text" class="form-control" id="protocolNumber">
</div>
<div class="col-md-6">
<label for="projectDesc">*Document Required?</label>
<select class="form-control">
<option selected disabled name="docInfo">Please Select one</option>
<option value="docRequired">Required</option>
<option value="docNotRequired">Not Required</option>
</select>
</div>
</div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Attach your documents:</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoRegAttachedDocuments" >
<div class="col-md-4">
<label for="docSubmission">Attach Original HTTP Submission</label>
<input type="file" name = "docSub" id="docSubmission">
</div>
<div class="col-md-4">
<label for="docApproval">Attach Original HTTP Approval</label>
<input type="file" name = "docAppr" id="docAproval">
</div>
<div class="col-md-4">
<label for="additionalDocs">Attach any additional documents (if any)?</label>
<input type="file" name = "addDoc" id="additionalDocs">
</div>
</div>
<div class="row" style="margin-bottom: 10px" name="infoDiv" >
<div class="col-md-12 heading">Standard Output:</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoDiv" >
<div class="col-md-6">
<label for="dataRequested">*Data Requested:</label>
<input type="text" class="form-control" id="dataRequested">
</div>
</div>
</form>
<!-- END of HTML Form -->
<div class="row"style="margin-top: 15px;" >
<button class="btn btn-primary" onclick="submitUsingjQuery()">Submit</button>
</div>
system
June 6, 2018, 5:02am
6
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.