I want to ask about how can I put a form with method GET in a table tag.
In the table element I have a text field. When I submit this form it should validate. My validation works fine but this form doesn't actually submit itself, so I can't get any value at the URL.
Below is the code:
<form method="GET" id="my_form">
<table>
<tr>
<td>
<input type="text" name="company" form="my_form">
</td>
<button type="button" form="my_form" onclick="return submitvalidation();">ok</button>
</td>
</tr>
</table>
</form>
Your problem has nothing to do with putting a form in a table.
You just need to have a submit button.
A plain button is designed to hang JS off and nothing else. It won't submit the form.
Use type="submit" not type="button".
You should make sure that your button is in inside a table cell though. You either have an extra </td> or a midding <td>.
There doesn't seem to be any reason to use a table here at all though.
Return true after the validation completed.
Related
Not sure how I did this last time or else I wouldnt asking here but here is what I'm trying to do.
I have the usual basic form with a javascript function that will submit the form. Question is that after the form is submitted, I have an if statement in PHP that echos a that the form has been submitted. Any help would be greatly appreciated.
//PHP
if($_POST['submitDelete']){
echo "welcome, You form has been submitted";
}
//HTML
<form id="form_id" action="" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" TYPE="submit">
</form>
<button type="button" onclick="myFunction()">Submit</button>
//JAVASCRIPT
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
I can't seem to trigger the if statement in PHP. I also tried using the form name in the if statement and that didnt work either.
A form element must be told where to submit its data to when the submit event takes place. This is accomplished by setting the action attribute value for the form. Leaving that attribute empty does not implicitly set the form to post back to the current page. So, if you want to have a single page form/form processor, you need the action to be set to the current page file name:
<form action="currentPageFileName.php" method="post">
Next, there's no reason a single page can't have multiple forms on it. In that case you would need multiple submit buttons, each tied to a specific form. For this reason, you can't just drop a submit button anywhere on the page that you like unless you add the form attribute to the button to tie it back to the form it is supposed to trigger the submit for. Also, if you simply place the submit button within the form element it "belongs" to, you don't have to worry about this.
Also, you have some invalid HTML with:
<input type="hidden" name="submitDelete" TYPE="submit">
An element may not have the same attribute repeated within it (the case that you type the attribute in makes no difference since HTML is not case-sensitive). So, that code would wind up simply creating a submit button.
Lastly, if all you want to do with your submit button is cause its related form to be submitted, there is no need for JavaScript at all. That is what submit buttons do by default.
So, in the end, you can get rid of the JavaScript in your code completely and change your HTML to this:
<form id="form_id" action="currentFileName.php" method="POST">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="hidden" name="submitDelete" value="true">
</form>
<button type="submit" form="form_id">Submit</button>
I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>
Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.
I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.
I'm trying and searching now for days and can't find an answer.
My problem is this: I use a Hyperlink and Javascript to submit a form, but I also need to submit a parameter with the link. The code looks like this:
<form action="Action.jsp" method="post" id="form-id">
<input .../>
...
<c:forEach items="${items}" var="item" varStatus="vs">
<a href="Action.jsp?id=${vs.count}"
onclick="javascript:document.forms['form-id'].submit(); return false">
${vs.count}
</a>
</c:forEach>
</form>
If I leave away the return false the param id is transferred but the other <input .../> parameters not and vice versa. How you see I can't use a <input type="hidden" .../> param, because I need only the param of the link.
If you please could help me, I would be grateful....
You need to add your parameter into the action property of form as well. This determines what URL the page is submitted to when submit occurs.
So you will probably need to use javascript to change this property value when the link is clicked to where it behaves like this.
<form action="Action.jsp?id=${vs.count}" method="post" id="form-id">
When you remove return false, what you are in essence doing is just getting the default behavior of the link after the form quickly submits.
If you add a hidden input outside the loop, you can set the value of that input before submitting:
<form action="Action.jsp" methode="post" id="form-id">
<input .../>
<input type="hidden" id="button-id"/>
...
<c:forEach items="${items}" var="item" varStatus="vs">
<a href="Action.jsp"
onclick="javascript:document.getElementById('button-id').value=${vs.count};document.forms['form-id'].submit(); return false">
${vs.count}
</a>
</c:forEach>
</form>
If you don't need to have anchors, you could solve this without JavaScript by submitting using button elements instead:
<button name="id" type="submit" value="${vs.count}">${vs.count}</button>
Note that Internet Explorer, prior version 8, will submit the text between the <button> and </button> tags, while other browsers will submit the value.
If I submit a disabled text field via POST, what will the resulting value be on the action page?
For example, I have:
<table border=0 cellpadding=4 cellspacing=0>
<tr><td>
<input type="checkbox" id="chk_$item"
onClick="javascript:handleClick('$item')">
</td><td>
<input type="text" id="txt_$item" name="addresses[]" value="$item">
</td></tr>
<tr><td>
...etc...
</td></tr>
</table>
the handleClick() javascript function checks if chk_$item is checked, if not, it disables the txt_$item text field.
When I submit it, all of the text fields go to an addresses[] array in a PHP script.
But, can I prevent the field from submitting anything if it is disabled? Will it do this by default? If not, how should I change the behavior? (I really don't want to clear the fields when they get disabled).
Disabled inputs will not be submitted with the form; that's part of the defined behavior of disabled, cf. W3C HTML 4.01 Form docs.
If you don't want it changed, make it readonly.