I'm trying to submit a form like below
{foreach from=$myInfo item=list}
<tr>
<td>
<form id="formq" method="post" action="{eval var=$rootPath}/devt/index?request=getme">
<input type="text" name="taskida" value="{$list.pa_id}" >
<input type="button" onclick="addFunction();" value="Add Task">
</form></td></tr>{/foreach}
How will I submit only the pa_idwhich I click submit and not the entire list.
<script type="text/javascript">
function addFunction() {
document.getElementById('formq').submit();
}
First of all, You can assign one id to only one element. You can NOT use single ID for mutliple elements on the same page.
For example in the loop you have multiple forms after execution of loop with the same id formq. That is wrong. You have to use unique ID for each element.
So try your code in something like this:
HTML/PHP
{foreach from=$myInfo item=list}
<tr>
<td>
<form id="formq_{$list.pa_id}" post" action="{eval var=$rootPath}/devt/index?request=getme">
<input type="text" name="taskida" value="{$list.pa_id}" >
<input type="button" onclick="addFunction({$list.pa_id});" value="Add Task">
</form></td></tr>
{/foreach}
Javascript
<script type="text/javascript">
function addFunction(id) {
document.getElementById('formq'+id).submit();
}
solved it
using $list.pa_id as form id and passing it to script
<input type="button" onclick="addFunction($list.pa_id);" value="Add Task">
<script type="text/javascript">
function addFunction(id) {
document.getElementById(id).submit();
Related
I am trying to create multiple tag fields with jQuery.
The tag script that I am using is from http://codepen.io/k-ivan/pen/NxxGPv
It works perfectly fine, however, when adding more fields by appending, the script stops working.
Can anyone suggest a solution?
HTML:
<form role="form" method="POST" enctype="multipart/form-data" action="../test.php">
<label for="default">Default
<input type="text" id="default" class="tagged form-control" name="tag-1" data-removeBtn="true" placeholder="create tag">
</label>
<input type="button" value ="add More" id="add">
<input type="submit" value="submit">
</form>
jQuery for adding more fields (adding works perfectly fine):
<script >
$(document).ready(function(){
var Count =2;
$('#add').click(function(){
$('#add').before($('<div/>',{
class:'row',
})
.fadeIn('slow')
.append(' <input type="text" id="default" class="tagged form-control" name="tag'+Count+'" data-removeBtn="true" placeholder="create tag">')
)
Count++;
});
});
</script>
I would also like to ask how a PHP script can be added inside this append event?
I have a multiple forms in a page and i would like to get the elements of a specific form. For example:
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
How to get the value of message of form id=2...... Thanks in advance
Just use attribute selectors
$('form[id=2]') // get the form with id = 2
.find('input[name=message]') // locate the input element with attribute name = message
.attr("value"); // get the attribute = value
You really shouldn't use raw numbers for ids, let's rename those to form_1 and form_2, then your jquery selector would be:
$("#form_2 [name='message']").val();
Simply query the input from the id of the form you'd like
console.log($('#2 input').val());
//more specific
console.log($('#2 input[name="message"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
You can use jQuery, or you can use basic JavaScript to return the message value. With basic JS, you would have to give your form a name, but then could return the message value.
Code:
function getValue() {
var message = document.forms["form_name"]["message"].value;
}
You would then have to return the function when the form is submitted
<form class="form" name="form_name" onsubmit="return getValue()">
I have the following piece of code which deletes a document when the delete image is clicked
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="image" name="submit" src="images/delete.gif" alt="DELETE">
</form>
</tr>
Now I want to modify this and change the image to a button and put some basic JS validation so that it asks a confirmation message before deleting.
I have this as my code so far
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" onClick ="return confirm('Are you sure you want to delete the current project activities document')" name="submit" Value="Delete">
</form>
</tr>
But there is no change/effect in the page when I click this button, Can anyone point out whats happening here? Thanks
Add id="form" to <form>, then
<input type="button" onClick ="if(confirm('Are you sure you want to delete the current project activities document')==1){document.getElementById('form').submit();}" name="submit" Value="Delete">
That's where the rest of the JavaScript comes in... or an AJAX call to a PHP file to perform that task for you. May I give you a couple of pointers? First, give that button element and ID, say id="deleter". Then, to clean up your inline markup, add this eventListener in your <head> section:
<script>
var d = document.getElementById('deleter');
var f = document.getElementByName('delete_attachment_form');
d.onClick = function() {
var yn = confirm('Are you sure you want to delete the current project activities document?');
// Note that the 'confirm' dialog is an obsolete construct
if (yn) {
f.submit();
}
};
</script>
HTML Markup
<tr>To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" id="deleter" name="deleter" Value="Delete">
</form>
</tr>
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});
I have the following dynamically generated HTML
<div id="1">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
<div id="2">
<form name = "inpForm">
<input name="FirstName" type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
The outer divs have different IDs but the form names are the same. I am using Jquery to perform some validation when the form is submitted. However, when the second form is submitted, I always get the values of the first form.
$(document).ready(function () {
$('form[name="inpForm"]').live('submit', function () {
alert($('input[name="FirstName"]').val());
return false;
});
});
How can I modify myJquery to find the "FirstName" element that matches the current form where the submit was triggered?
Thanks
Add some context:
alert($(this).find('input[name="FirstName"]').val());
Use this (the form-element) as context-argument:
alert($('input[name="FirstName"]',this).val());