I have some hidden text fields in my table which become visible one by one when I click the add button. I want to validate(in rails) only those rows which are visible.
<div class="info_type">
Internet<hr>
<table id="email_add">
<tr id="email_1">
<th><%= f.label(:email1,"Email :") %></th>
<td><input id="contact_email1" type="text" name="contact[email1]"></input>
</td>
</tr>
<tr id="email_2">
<th><%= f.label(:email2,"Email 2:") %></th>
<td><input id="contact_email2" type="text" name="contact[email2]"></input>
</td>
</tr>
<tr id="email_3">
<th><%= f.label(:email3,"Email 3:") %></th>
<td><input id="contact_email3" type="text" name="contact[email3]"></input>
</td>
</tr>
</table>
<input type="button" id="add_email" value="Add Email"/>
<input type="button" id="delete_email" value="Delete Email"/>
</div>
I hide rows email_2 and email_3 using jquery and display when add is clicked.
Is there any method of checking the text field visibility while using validates email tag or will I have to do it in jquery only??
Send a list of the hidden fields to the request then in the create method you can remove the fields you do not want to save from the params before you save.
To determine the hidden fields use JQuery's $("#contact_email1").is(":visible")
Then in the controller before saving remove the hidden elements variables using params[:info].delete :email1 or params.delete :email1 depending where it is located.
So, just create a list using some logic to keep track of the hidden elements, possibly by just using an int. Then iterate over that list and remove them from the params.
Related
In my html file, I'm adding two forms, each with their own submit_button. I have a text input in one of the forms and want to make it required to be not blank but it doesn't seem to work...
userQueryForm = SQLFORM.factory(
Field('userQuery', label='', requires=IS_NOT_EMPTY() ),
submit_button = T('Generate Report')
)
The html that gets rendered is as follows
<td class="w2p_fw">
<input class="string" id="no_table_userQuery" name="userQuery" type="text" value="">
</td>
...
<tr id="submit_record__row">
<td class="w2p_fl"></td>
<td class="w2p_fw">
<input type="submit" value="Generate Report" class="btn">
</td>
</tr>
I want my <input> to have an id so i can access it in Jquery...
My ultimate goal is to not allow the form to be subitted if the text
You can access the submit button server-side DOM element via userQueryForm.custom.submit, so to add an id attribute:
userQueryForm.custom.submit.update(_id='submit_button')
Alternatively, there are other methods to access the submit button via jQuery rather than relying on an id. For example:
jQuery('input[value="Generate Report"]')
I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:
<div class='wrapper'>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table>
<tbody>
<tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
<tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
<tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9#gmail.com</p></td>
</tbody>
</table>
<button>Change</button>
</div>
I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it
You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.
$('#edit').click(function(){
$('#form').toggleClass('view');
$('input').each(function(){
var inp = $(this);
if (inp.attr('readonly')) {
inp.removeAttr('readonly');
}
else {
inp.attr('readonly', 'readonly');
}
});
});
.view input {
border:0;
background:0;
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table id="form" class="view">
<tbody>
<tr>
<td>
<p class='leftspacing'>Cellphone Numbers</p>
</td>
<td>
<p><input type="text" value="072 215 3372" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>Phone Numbers</p>
</td>
<td>
<p><input type="text" value="011 310 9967" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>email address</p>
</td>
<td>
<p><input type="email" value="s.nyama9#gmail.com" readonly/></p>
</td>
</tr>
</tbody>
</table>
<button id="edit">Change</button>
There are a number of different ways you can do this, but the "classical" way would be to put the values in <input/> tags with IDs that are styled to be transparent. Wrap the whole table in a form, then use JavaScript when the user clicks the button to remove a disabled property from each of the input fields and change the button label. The second click of the button would then be validation and/or a form submit. The easiest way to keep track of which is the first and second click would be to compare text, but you might want to just set a variable on the element instead. Try here for a good starting point on pure-Javascript form submission or here for JQuery. This is a Stack-Overflow question about making input fields transparent.
We have a table(A) and we want a specific row to become editable on click. Currently we have a directive that inserts a new table into the td of table(A) where it is called. We do this so we can use the <form> element around the table.
uneditable-table.html
<table>
<tbody>
<tr>
<td ng-show="editing" class="editing" colspan="2">
<div edit-form-directive
model="thing"
on-success="thingUpdated(thing); editing=false;"
on-cancel="editing=false; setUpdating(false);"
enabled="editing" />
</td>
</tr>
</tbody>
</table>
edit-template.html inserted via the editFormDirective
<form ng-submit="save(thingCopy)" name="EditForm">
<table>
<tbody>
<tr>
<td>
<input ng-model="thing.field1"/>
</td>
<td>
<input ng-model="thing.field2"/>
</td>
</tr>
</tbody>
<table>
</form>
Question:
We have tried putting the <form> element around each row to be editable, and this works, however, this is not semantically correct with the <form> around a <tr> within a table.
We also considered putting the <form> around the entire table in uneditable-table.html. This causes a form validation issue, where we may have many errors per non-unique form node, so we would have to index the nodes to get specific errors.
We settled on the code as it is here, with having the <form> element around a whole new table (in edit-template.html) and inserting that into a <td>, as this seemed the least harmful.
We do have to have the form tag so we can access validation based on the form name and nodes.
Is there a more Angular (or elegant) way to do this?
Thank you!
Angular way. Form tag isn't needed:
<table ng-form="EditForm">
...
</table>
http://docs.angularjs.org/api/ng.directive:ngForm
I have a table that I need to make focusable by tabbing. Right now as I tab through my page it will jump over the table entirely. I have added a href="#" and that allows tab focus on the element I put that on, but that breaks my onclick Javascript that I have. Is there any other way to do this other then doing tab indexing?
I didn't understand your questions entirely but if you are talkinf about form fill ups then use this method, and tab the input fields with a tab.. You can also change tab numbers accordingly,
<form>
<table>
<tr>
<td><input tabindex="1" name=""/></td>
<td><input tabindex="3" name=""/></td>
</tr>
<tr>
<td><input tabindex="2" name=""/></td>
<td><input tabindex="4" name=""/></td>
</tr>
</table>
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>