Submitting a form via submit event having hidden fields named submit - javascript

I have html form which contains one hidden input element that have name="submit":
<form method="post" action="url.php">
<input type="text" name="sometext" />
<input type="hidden" name="submit" value="go" />
</form>
I am using this code to submit form:
$("#link").click(function() {
$("form").get(0).submit();
});
When I change input name to any other name except name="submit" the form is submitted:
<form method="post" action="url.php">
<input type="text" name="sometext" />
<input type="hidden" name="othername" value="go" />
</form>
<button id="link">Click</button>
<script>
$("#link").click(function() {
$("form").get(0).submit();
});
</script>
The question is Why form is not submitted when hidden input has name="submit"?

According to MDN:
Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's action HTML attribute).
Because of that, when you name your button as submit, you overwrite the native submit function of your form with the button's DOM object. With that your call to form.submit() ends up to be equivalent to form.elements.submit.submit(), which fails as form.elements.submit.submit is actually undefined.

You cannot the name the element submit. It is a butoon type inside form. It send all elements of the form to action as you may know. I'd suggest to call your PHP function using that if possible. The submit() function is checking for that "submit" button primarily causing issues. If you name something else as "submit", it will be checked for input data.

Related

How to get input data from html to nodejs [duplicate]

When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^

How can I submit div data to MySQL

I was wondering how can I submit div data to MySQL. Im not used to javascript so I dont really know whats happening on the javascript part but how can I get or input the action="" part and method="" part and can I or should I add value="" to the hidden input???
Form html code:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" class="commenttext" contenteditable="true"></div>
<input type="submit" Value="Enter" id="submitthis">
</form>
Use the hidden field inside the form tag and use the JavaScript to put the value inside it. You can get the hidden field in the $_POST['hydName'].Put the data on the click of the submit button into the hidden field. Keep your action and method of the form same as required. After the click event is fired, it will submit the form to its action URL
<input type="submit" onclick="document.getElememtById('hidden').value = document.getElementById('div').innerHtml;" />

Pass parameter from a text field contained in another form

I have two forms in a JSP page, one contains a text field. I need to make sure that whenever the other form is submitted, it copies the value contained in that text field, and writes it's text value in an hidden parameter.
More clearly:
One form is named "search";
Another form is named "changeInitialForm";
The text field is contained in the "search" form, and it's name is "searchString";
The "changeInitialForm" has an hidden field, also this named "searchString";
The purpose is to make sure that whether the user submits one or another form, a "searchString" parameter is passed, with the value of the text field.
I tried to include an action in javascript, executed when the "changeInitialForm" is submitted, that reads the text field value and writes it into the hidden parameter:
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this.form);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
But after the "changeInitialForm" is submitted, regardless of the text field value, and empty parameter is passed, I am seeing this with firebug:
I would also appreciate an alternative solution, because I know what I am doing is tricky, but I don't find another method to do that. "search" and "changeInitialForm" cannot be joined in a single form, because they do very different things.
The following seems to work
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
Form 1:
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
Form 2:
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
Notice that searchContacts(this.form) was replaced with searchContacts(this).
UPDATE after some precisions by the author of the question:
The onsubmit event is not triggered when form.submit() is called by some javascript code. Thus, what you need when you submit the form is to call searchContacts separately, for example using
searchContacts(document.changeInitialForm);
document.changeInitialForm.submit();

Manually submitting a form using JavaScript doesn't send the submit button

I have a form that has two submit buttons. I want to submit the form manually using JavaScript and have the input button used to submit the form posted along with the other form elements, as it would be if the form was submitted automatically. There's quite a lot of chatter on this subject, but I can't find an answer.
<form method="post" action="echoToScreenAndLog.jsp" id="form1">
<input id="field1" name="field1"/>
<input type="text" size="20" id="field2" name="field2"/>
<input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
<input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form>
When the form is submitted above using the "Do One" button, the posted parameters are field1="xxx", field2="yyy", sub1_name="Do One".
But I want to submit the form manually...
<form method="post" action="echoToScreenAndLog.jsp" id="form1">
<input id="field1" name="field1"/>
<input type="text" size="20" id="field2" name="field2"/>
<input type="submit" value="Do One" name="sub1_name" id="sub1_id"/>
<input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/>
</form>
<script type="text/javascript">
var btn = document.getElementById('sub1_id');
btn.onclick=function() {
return mySubmit(document.getElementById('form1'), ...);
}
</script>
but doing a manual submission of the form in the mySubmit function does not post the sub1_name parameter. I can understand that - I've bypassed the submission so the form is not being submitted using the buttons and therefore it makes no sense to post a parameter representing the button used to submit the form.
When I look at the elements of the form in the onclick handler, I can see both buttons. I'm not overly surprised by that either, they are elements on the form after all, but what I don't get is that if I add an element inside my onclick handler then the element I add IS posted and the two original submit buttons are not posted. Just to complete the picture, here's the code that adds the element:
<script type="text/javascript">
var btn = document.getElementById('sub1_id');
btn.onclick=function() {
var f = document.getElementById('form1');
var s = document.createElement("input");
s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";
f.appendChild(s);
// s gets posted
return mySubmit(f, ...);
}
</script>
Adding the input element could work for me, but I'm confused how the browser knows to post my added element and not the original two input elements.
Thank you.
The specification says that the first step for form submission is:
Step one: Identify the successful controls
"Successful controls" are defined as:
A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.
However:
...
If a form contains more than one submit button, only the activated submit button is successful.
Since none of the submit buttons are activated, none are sent. Hidden input elements, on the other hand, are valid and will just be submitted along. Note that you add the hidden elements before calling mySubmit(), so at the time the above steps are executed (i.e. during submit), the hidden element is just another successful control part of the form, and thus sent.
may use
var btn = document.getElementById('sub1_id');
btn.onsubmit=function() {
return false;
}
btn.onclick=function() {
var f = document.getElementById('form1');
var s = document.createElement("input");
s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";
f.appendChild(s);
f.submit()
}

Cannot submit form with .submit()

I need to trigger a form submit event when any form value changes and all the fields in the form are filled. Everything in this works apart from the $('#date_filter_form').submit(); line. I can .hide() the form but can't submit() it for some reason. Documentation says submit() is the same as trigger('submit') so I can't figure out why it wouldn't be working.
$('#date_filter_form input[type="text"]').change(function() {
var from_val = $('#date_filter_form #from_date').val();
var to_val = $('#date_filter_form #to_date').val();
if(from_val != '' && to_val != '') {
$('#date_filter_form').submit();
}
});
HTML:
<form method="post" id="date_filter_form" name="date_filter_form" action="">
<label class="left required" for="from_date">From</label>
<input type="text" id="from_date" class="datepicker hasDatepicker" value="" name="from_date">
<label class="left required" for="to_date">to</label>
<input type="text" id="to_date" class="datepicker hasDatepicker" value="" name="to_date">
<input type="hidden" value="" name="from_date_db">
<input type="hidden" value="" name="to_date_db">
<input type="submit" id="submit" class="button" value="Show results" name="submit">
</form>
Your submit button is named 'submit', and it clashes with the form.submit method.
This happens because browsers provide shortcut accessors to form elements, properties that refer to the elements, are bound to the form element, using the name attribute as the property name.
An element named submit will replace the form.submit method, you should simply change name.
Also keep in mind that in IE you will have the same problems with the id attribute.
See also:
Form Access - The Most Common Mistake
The most common mistake made when defining the form HTML that a script will interact with follows from the existence of the shortcut accessors for form controls. It is to give the control a NAME (or possibly ID) that corresponds with an existing property of FORM elements. And the most common example of that is an INPUT element of type="submit" with the NAME "submit". Because the named controls are made available as named properties of the FORM element this INPUT element is made available under the property name "submit". Unfortunately FORM elements already have a property with the name "submit", it is the submit method that can be used to submit the form with a script.
yo your from is named
date_filter_form
but you are looking for a form named
date_filter
So your validation is not going to pass

Categories