I am facing a problem. I have created a form where a user has to input the details about a candidate and also upload his/her image. The problem is that in the form there is a button that says "Click To Add More Candidate", so when this button is clicked the same form should reappear under a division called "moreCandidates". Now to achieve this how should I go about it? Things that are coming in my mind is as follows:
To create a function in javascript that exactly creates the form contents (ie. all the input fields,etc) and onclick of the button "Click To Add More Candidate", call the function under the mentioned division. I can do this as in the past I have done something very similar to this. However, this time I don't think it would be good idea to create the whole form again as I have written a PHP function in between to read a directory.
Or the second thought that I have is to have the form code written in a file called candidate.php and call that file with AJAX. The problem here could be that I might be calling the whole form again (whereas I just want to call the contents of the form like the candidate name, and other stuff)
I very confused at the moment, and help from you all would be greatly appreciated. Thanks in advance.
My html code:
<div id="candidateForm">
<table border="0">
<form method="post" action="formDetails.php" enctype="multipart/form-date">
<tr>
<td>Candidate Name:</td>
<td><input class="candidateForm" type="textbox" name="candidateName" placeholder="Candidate's Name"/></td>
</tr>
<tr>
<td>Enroll No:</td>
<td><input class="candidateForm" type="textbox" name="enrollNumber" placeholder="Enroll No"/></td>
</tr>
<tr>
<td>Candidate Image:</td>
<td><input class="candidateForm" type="file" name="candidateImage" placeholder="Select a Image"/></td>
</tr>
<tr>
<td>Cadidate Post:</td>
<?php
//This is the target folder that is going to be read.
$target="uploads/";
//I an using a directory function in PHP scandir() which scans tha contains of the give directory
$dir=scandir($target);
?>
<td>
<select name="candidatePost">
<option value="candidatePost" select="selected">---------Select---------</option>
<?php
foreach($dir as $folders)
{
//When we loop throung the target folder/directory we get this annoying two folder that is "." and ".." so just to rule then out i m using an IF condition
if($folders!="."&& $folders!="..")
//echo $folders;
echo "<option class='candidateForm' value=$folders>$folders</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>About The Candidate:</td>
<td><textarea name="aboutCandidate" cols="40" rows="5"></textarea></td>
</tr>
<div id="moreCandidates"> </div>
<tr>
<td></td>
<td><input type="button" value="Click To Add More Candidate"></input> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="candidateFormSubmit" value="Press Here To Submit The Details" onclick=""/></td>
</tr>
</form>
</table>
</div>
Related
I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.
<body>
<form method="post">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="txtName" placeholder="Enter Your Name Please" /></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="txtAdd" placeholder="Enter Your Address Please" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="btnSave" value="Click to Save Me...." /></td>
</tr>
</table>
</form>
When I Click Submit Button Data are Saved in Database.
But I want When i submit data data will save and print window should be open
Try with this one
For saving data and open print window in one click you have to use AJAX and on success of AJAX you can open print window. For this change your submit button to simple button and call ajax on button click.
OR
After submitting form you can add script tag instead of header function.
<script>
window.open(URL)
</script>
I have a form which contains a foreach. This is my code:
<table style="direction: rtl;text-align: right;width: 1500px;font-family: tahoma;" align="center">
<thead>
<tr>
<th style="width:5%; ">#</th>
<th style="width:20%;">Name</th>
<th>Date</th>
<th>Buyer Code</th>
<th>User Code</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($Items as $Item)
{
echo '<form method="post" action="/provider/provider/checkUserCodeValidation">
<tr>
<td>'.$i.'</td>
<td>'.$Item->getUser()->getFullName().'</td>
<td>'.$Item->getCreationDate(true,'Date').'</td>
<td>'.$Item->getBuyerCode().'</td>
<td><input name="userCode" id="userCode" value=""/></td>
<td><input type="submit" name="Submit" id="submit_butt" value="Submit"/></td>
</tr>
</from>';
$i++;
}
?>
</tbody>
</table>
The output will be this:
Now what I want to do is, when user inputs an integer into UserCode and clicks submit, it checks the existence of that integer in database. I am handling the process in checkUserCodeValidation (action of the form). The problem is, if any of the fields are filled, it sends the value of userCode as null. But the last one works. What should I do to submit each one individually?
IMPORTANT!!: I tried using one button where all the table is in one form, but then the problem was that it sends an array which will be a pain in head because I have to implode it and stuff later in my function. So Please help me on this, if you have any solution via Javascript, that will be also appreciated.
Cheeeeers
You have to give a unique id to each input. So you get all values.
Other way is you make each line a form.
Ajax would be the best solution, but in this case the input type must be button instead of submit. Then you have to define the click handler, which makes the ajax call. Here is jquery doc for ajax post: http://api.jquery.com/jquery.post/
You can do it in vanilla js too: http://vanilla-js.com
yout text box id are same
so add any dynamic value to your textbox and name
like
<input name="userCode[]" id="userCode<?php $i ?>" value=""/>
I have a table created in a html form.
The first column displays data pulled from a web server and the second column allows for changing the value and then submitting the new value to the web server.
I also have another table that is pulling live data from the web server that needs to be refreshed every 20 seconds.
At the moment I have the entire page refreshing every 20 seconds.
The problem is when the page refreshes if you have started to type a value into the table cell the value is lost after the refresh.
I have tried some JavaScript to retain the values in cookies and this has worked so far. But I wondered if there was a way to simply stop the refresh from happening if the cursor has been selected in the input box in the table cell.
<form id=form1 name=f1 method=post action=/scripts/write-tags autocomplete=on>
<input type=hidden name=tag1 value=9>
<input type=hidden name=tag2 value=61>
<input type=hidden name=tag3 value=44>
<input type=hidden name=tag4 value=25>
<input type=hidden name=back value=/savetest.htm>
<input type=hidden name=page value=1>
<table id=data border="1" cellpadding="10" width="700" style="font-family:Arial; font-size:15px";>
<th>Operation</th><th>Value</th><th>New Value</th>
<tr>
<td width="400">Enter the Value of the desired motor RPM</td>
<td width="100">[[130]]</td>
<td width="100"><input type=text size=3 name=data1 value="[[9]]"></td>
</tr>
<tr>
<td width="400">Enter the Value of the Target FOP in feet (TVD)</td>
<td width="100">[[61]]</td>
<td width="100"><input type=text size=3 name=data2 value="[[61]]"></td>
</tr>
<tr>
<td width="400">Enter the Value of the Shutdown Delay in minutes</td>
<td width="100">[[256]]</td>
<td width="100"><input type=text size=3 name=data3 value="[[44]]"></td>
</tr>
<tr>
<td width="400">Enter the Value of the Flow Rate Delay in seconds</td>
<td width="100">[[24]]</td>
<td width="100"><input type=text size=3 name=data4 value="[[25]]"></td>
</tr>
<tr>
<td width="700"><input style="font-family:Arial; font-size:15px;"type=submit name=submit value= OK ></td>
</tr>
</table>
</form>
I have updated some example code. The web server is built into a PLC. The tag and data name refers to a value in the PLC. The value inside the [[]] is the value that needs to be refreshed and the input value is for changing the value. Apologies if this is too vague. I appreciate the help but cant post too much code for confidential reasons.
Instead of refreshing the whole page, you could download your data using AJAX in 20s intervals, then you won't need to refresh the whole page, so your input won't be lost :)
Try to reset the timer to 20 every time after user type.
If you add your code maybe I could help more...
is your refresh called by a setInterval ?
If it's true, simply do something like that :
var interval;
interval = setInterval(refreshPage(), 20000);
$("input").keypress(function(){
clearInterval(interval);
});
then restart interval when value is changed
I am trying to load in thumbnail of an inputted webpage when the user clicks a button. The thumbnail is generated properly on the page by itself, but when I attempt to load it into the div element, it replaces the whole page. Currently, this is just a proof of concept. I will switch to user inputted url if I can get this working.
Here is my click event code:
$('#check_url').click(function() {
$('#thumb_loader').load('load_thumb.html');
});
thumb_loader is just a div. I have also tried it like this:
$('#check_url').click(function() {
$('#thumb_loader').html($('<div>').load('load_thumb.html'));
});
Here is load_thumb.html:
<div>
<script type="text/javascript">
wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');
</script>
</div>
wsr_snashot is WebSnapr. The image is generated on their server and appears where this code is.
First off, can I even load javascript like this? I have used load to drop in content that contains javascript before, so I doubt that is the case.
Anyone see any problems here?
EDIT:
Here is the table where the div I wish to load into is and the button that the user would click to trigger the AJAX.
<table>
<tr>
<td colspan="2">
<div id="thumb_loader"></div>
</td>
</tr>
<tr>
<td>
<label>Link Title:</label>
</td>
<td>
<label>Link Description:</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_title" />
</td>
<td rowspan="3">
<textarea name="link_description"></textarea>
</td>
</tr>
<tr>
<td>
<label>Link URL:</label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_url" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input id="check_url" type="button" value="Check URL" />
</td>
<td align="right">
<input type="button" value="Cancel" /><input disabled="disabled" type="submit" value="Add Link" />
</td>
</tr>
</table>
I don't see anything else that could be relevant in the code. Hope this is enough.
Put JS code out of load_thumb file and keep in a new js file like image.js and use $.getScript to dynamically add it in your principal page:
$.getScript('path/image.js', function(){
// file loaded
});
You should put above code in your main file where you want to run your thumb image.
More:
http://api.jquery.com/jQuery.getScript/
jQuery#load(): When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
if wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small'); contains any document.write calls, you're entire document is overwritten. Make sure you know what that function does.
Update:
according to the question's comments, this really is the issue. You need to figure out how wsr_snapshot() can be used in an asynchronous fashion. What API is that from anyways?