I'm submitting some of my forms with javascript/jquery.
$("#myform").submit();
this works fine in Firefox, but in Safari or Chrome, none of my form values are posted.
When I check the $_POST variable, in Firefox it's filled up correctly, but on safari/chrome the $_POST values are empty.
I submit like this when the dialog's OK buttong gets clicked (works fine in FF)
$("form#form_add_file_to_theme").submit();
this is my form (the surrounding div becomes a .jQuery UI dialog)
<div id="modal_create_themefile" style="display:none;">
<form action="" id="form_add_file_to_theme" name="form_add_file_to_theme" method="post">
<div class="field">
<label for="var_template_name">File name</label>
<input type="text" class="text" id="var_template_name" name="var_template_name" />
</div>
<div class="field">
<label for="var_template_type">File type</label>
<select id="var_template_type" name="var_template_type">
<option value="css">CSS</option>
<option value="include">Partial</option>
<option value="js">Javascript</option>
</select>
</div>
</form>
</div>
printing $_POST in php gives:
Array ( [var_template_name] => [var_template_type] => css )
so the select box gets submitted, not the text fields...
UPDATE: when I pass the value="test" options hard coded in my text fields, they get submitted. However, changing the values (what a normal user would do) after the page has loaded, has no effect in webkit. Chrome & Safari just take the "initial" or "default" values to submit.
As there is an item named "var_template_name" in the POST data that reaches the server, it means that the textbox is included in the post, but the value is empty.
So, somehow the value is cleared before it's posted.
Do you have any Javascript that verifies the contents in the form? Check that you haven't accidentally made an assignment, something like this:
if (document.getElementById('var_template_name').value = '')
instead of a comparison:
if (document.getElementById('var_template_name').value == '')
jQuery UI dialog is somehow creating or moving the form into the dialog, while webkit doesn't know this. Webkit just takes the original form code and submits that.
I could fix it by doing this:
dialog.data("dialog").uiDialog.find("form").submit();
that way, any browser is forced to look for the correct form in the dialog, not just in the page.
I've encountered the same problem. I have a theory that the form submit gets terminated once the page changes, thus it becomes incomplete. That's just a theory mind you, unprovable unless I analyze the webkit internals.
My solution - use ajax instead of form submit.
$.post("/submit_url",$("#form_id").serialize());
I'm not absolutely sure that strategy always works, but it might.
I have also encountered a similar problem. I have struggled a few hours and found how to get it work right. Here is my dialog html after the fix. I had the opening form tag outside of "interest-edit-dialog" div at first. The dialog didn't post input variables then. I was inspired by Jorre and I checked the source with Chrome tool when the dialog is up, and found the opening tag was gone. So I moved the opening form tag inside of "interest-edit-dialog" div. That is basically it. The input variables were posted all right. It means that you can't put your form tag outside the dialog html you register with jquery.ui.
<div style="display: none; z-index: 1000; outline-width: 0px; outline-style: initial; outline-color: initial; position: absolute; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-form">
<div id="interest-edit-dialog" title="whatever" class="ui-dialog-content ui-widget-content">
<form id="interestDialogForm" name="interestDialogForm" action="einterest" method="post" enctype="multipart/form-data">
<p class="validateTips"></p>
<fieldset>
<?php echo $interest_list; ?>
<p><input type="text" id="myinterest1" class="myinterest1" name="myinterest1" value="FOO" /></p>
<p><input type="text" id="myinterest2" class="myinterest2" name="myinterest2" value="BAR" /></p>
<p><input type="text" id="myinterest3" class="myinterest3" name="myinterest3" value="" /></p>
<p><input type="text" id="myinterest4" class="myinterest4" name="myinterest4" value="" /></p>
<p><input type="text" id="myinterest5" class="myinterest5" name="myinterest5" value="" /></p>
<input type="hidden" name="serial" id="serial" value="" />
</fieldset>
</form>
</div>
<div class="ui-dialog-buttonpane ui-helper-clearfix">
</div>
</div>
The javascript code to submit above form is
$("#interestDialogForm").submit();
Related
I'm creating a google add on for sheets. The sidebar I'm working on is intended to be sort of help ticket submission, but way before I can develop that part of things, I'm not getting the submit button in the form to call the javascript function I want to build.
I've removed all of the form data from the html button call to activate a Logger.log. No dice.
I created a completely separate (and very simple) button to call a different function to call Logger.log. This also did not work.
I've double checked the form data, the send call, and the function.
I made sure the name of the function (sendMsg) is unique.
I think that the issue may not be in my code but in some other way the html and javascript (.gs) are connected.
here is the html form:
<div class="block form-group">
<form>
<label for="reason">Purpose of Contact</label>
<select id="reason">
<option selected>Help Request</option>
<option>Feature Request</option>
<option>Error Report</option>
<option>Other</option>
</select>
<label for="email">Email</label>
<input type="text" id="email" style="width: 200px;">
<label for="phone">Phone</label>
<input type="text" id="phone" style="width: 120px;" value = "optional">
<br>
<label for="translated-text">
<b>Message</b></label>
<textarea id="userMsg" rows="15" cols="35">
</textarea>
<br>
<input id="app" name="appSrc" type="hidden" value="COE">
<input type="button" class="action" name="helpRequest" value="SEND" onClick="google.script.run.sendMsg(
document.getElementById('reason').value,
document.getElementById('email').value,
document.getElementById('phone').value,
document.getElementById('userMsg').value,
document.getElementById('appSrc').value
)" />
</form>
</div>
and here is the function called:
function sendMsg(appSrc,reason,email,phone,userMsg) {
appV = appSrc;
reasonV = reason;
emailV = email;
phoneV = phone;
userMsgV = userMsg;
Logger.log('cheese');
}
Right now the form should simply result in a Logger.log message. At this point nothing happens.
In your situation, when "SEND" button is clicked, the script of sendMsg() at Google Apps Script side doesn't work.
You want to run sendMsg().
If my understanding is correct, how about this modification?
Modification point:
When I saw <input id="app" name="appSrc" type="hidden" value="COE">, appSrc is not id. By this, an error occurs at document.getElementById('appSrc').value, and sendMsg() didn't work. So if your script is modified, for example, please use app.
From:
document.getElementById('appSrc').value
To:
document.getElementById('app').value
Or
From:
<input id="app" name="appSrc" type="hidden" value="COE">
To:
<input id="appSrc" name="appSrc" type="hidden" value="COE">
If I misunderstood your question and this was not the result you want, I apologize.
In case anyone has the same issue as I had... onpress doesn't seem to work here. I had to change it to onclick.
I coded a simple search form for my website using just a text input for the search term. Also i used the typeahead.js plugin which allows autocomplete while typing.
Everything seems to work fine except when i'm trying to submit the form using the Search button of the ios keyboard. When i tap it nothing happens.
Any ideas about why this is happening?
Here is the form's code:
<form action="[config.site_url]/search/find" method="post" id="main-search-form">
<div class="form-group" id="main-search">
<input id="topnav_search" name="search_text" class="form-control typeahead" placeholder="" type="text" value="">
</div>
<input type="submit" name="submit" style="display: none;" />
</form>
And this is the search ios button that i mean:
Finally, i just changed the css styling of the submit button to this:
style="position: fixed; top: -1000px;"
Solution found here: Getting iPhone GO button to submit form
I have simple HTML form with submit button. After hitting this button I would like to the see div#my_id which is not visible before.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
How can I make it work?
Is your HTML contained within the <form> tag? It is likely that your submit button is submitting the form and causing a page refresh before the JavaScript is executed.
If this is the case, try changing the input type to button to see the effect.
For example:
#my_id {
display: none;
}
<form>
<input type="button" name="xxx" value=" Show Text! " onclick="document.getElementById('my_id').style.display = 'block' ;" />
<div id="my_id"> My text </div>
</form>
It should work.
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
Are you sure not any other HTML is 'ruining' your code? I have tested this on Firefox, Chrome and IE (all latest versions tho)
Your submit button will submit the form it is placed in using the defined action and method. Any arguments / fileds in the form will be included as query parameters.
The reason you are not seeing your div appear, is because the click results in the page being reloaded. After the reload the div will be hidden again.
I'm using jquery mobile 1.0 alpha 4.1 to build a login form.
The login form submits just fine the first time when I load it from:
http://m.myapp.local/
the form action is the following:
<form action="http://m.myapp.local/default/login" method="post">
this works fine the first login attempt, but when the login fails, we return to the following URL (this is jquery mobile doing this):
http://m.myapp.local/#default/login
Now when I try to login again / submit the form again nothing happens and I can debug to find the error. It says:
Javascript console: Uncaught TypeError: Cannot call method '_trigger' of undefined
When I debug even further, I see that jquery mobile is trying to submit to the following url:
http://m.myapp.local/default/logindefault/login
instead of
http://m.myapp.local/default/login
of course, that url does not exist which causes the error. Question is, how can I prevent jq mobile from behaving this way?
Full form:
<div data-role="content" data-theme="c">
<form action="http://m.myapp.local/default/login" method="post">
<div data-role="fieldcontain" class="center">
<input placeholder="Shop Name" id="login_sitename" type="text" value="" name="sitename" />
<input placeholder="Email" id="login_username" type="text" value="" name="username" />
<input placeholder="Password" id="login_password" type="password" name="password" />
</div>
<button type="submit" data-theme="b">Log in</button>
</form>
</div>
a strange thing I've noticed is that when I remove the hash tag from the url and submit the form again, it all works, so it definitely has something to do with that.
BUT, when I remove the hash tag, it also stops using transitions, the back button is gone as well and the jquery mobile "loading" dialog is also gone...
seems like it's a jquery bug. When using alpha 2, it works...
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
You might try diabling AJAX for form posting. I had the same issues on my site:
http://jquerymobile.com/demos/1.0a4.1/#docs/api/globalconfig.html
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html
You can try this in the submission link:
data-ajax="false"
Try using a "%23" (without the quotes) in place of the # symbol. So if the URL reads
http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-sample.html
replace it as
http://jquerymobile.com/demos/1.0a4.1/%23docs/forms/forms-sample.html
Hope this helps!
I am trying to build a simple form for sending a newsletter:
<form method="post" id="newsletter_form" action="">
<label for="subject">Newsletter Subject:</label><br/>
<input type="text" name="subject" class="textField large" id="subject" /><br/><br/>
<label for="contents">Newsletter Contents:</label><br/>
<textarea class="textField" rows="6" cols="40" name="contents" id="contents"></textarea>
</form>
And then two buttons, one of them sets the action to a preview page, and target to _blank, to open in a new tab, and then the other button sets another action, and removes the target, so that it submits normally and sends out the newsletter. However, hitting the preview button only works once in Chrome/Safari.
I have searched, and found out that this is a bug in Chrome and Safari. However, I am trying to bypass this by creating another form using jQuery, with a different ID, removing the first form, and making the preview submit that second form. This still doesn't work. It works for IE and Firefox, just not in Webkit based browsers.
Is there any way to get around this?
This seems to work for webkit. Not sure how it will work for IE.
$("#newsletter_form").submit(function(){
$("#newsletter_form").submit();
});