UGH.
Hi.
I have a form. I'd like to know how/if I could submit this form to an iFrame that has the page that will handle the file upload/naming.
If I try even something simple like post an input/text to the form, nothing happens (the handler is set to echo the $_POST). I have tried setting the iframe name/id et. al. and setting the form target to the respective iframe name/id. When I hit submit, the iframe just sits there like a dummy. WTF am I doing wrong?
Thx.
<form action="/clients/testAddTrans/<?=$clientID?>" id="reportEdit" class="EditName" method="POST" target="transFrame">
<div class="inputDiv">
<span class="inputLabel">Description:</span>
<span class="textInput">
<input type="text" id="transDesc" name="transDesc" value="" size="40" class=""/>
</span>
</div>
<div class="inputDiv">
<span class="inputLabel">Date:</span>
<span class="textInput">
<input type="text" id="date" name="transDate" value="" size="40" class=""/>
</span>
</div>
<div class="inputDiv">
<span class="inputLabel">File:</span>
<span class="textInput">
<input type="file" id="file" name="transFile" value="" size="40" class=""/>
</span>
</div>
<input name="name_id" type="hidden" value="<?=$itemid?>" />
<input type="submit" value="Submit" name="submit"/>
<input type="button" class="secondaryAction" onclick="hideOverDiv()" value="Close"/>
<div id="overDivNotice" class="overDivNotice" style="display:none"></div>
<iframe action="/clients/testAddTrans/<?=$clid?>" id="transFrame" name="transFrame" style=""></iframe>
</form>
Generated html via firebug:
<div class="content" id="overDivContent"><div class="inputDivContainer">
<fieldset class="inputOverDiv" id="tfa_Names">
<legend><b>Add Transmittal:</b></legend>
<div class="data"><form target="transFrame" method="POST" class="EditName" id="reportEdit" action="/clients/testAddTrans/fsdf1556"><div class="inputDiv"><span class="inputLabel">Description:</span><span class="textInput"><input type="text" class="" size="40" value="" name="transDesc" id="transDesc"/></span></div><div class="inputDiv"><span class="inputLabel">Date:</span><span class="textInput"><input type="text" class="" size="40" value="" name="transDate" id="date"/></span></div><div class="inputDiv"><span class="inputLabel">File:</span><span class="textInput"><input type="file" class="" size="40" value="" name="transFile" id="file"/></span></div><input type="hidden" value="121" name="name_id"/>
</form><br/>
<div align="center" class="actions" id="overDivActions">
<input type="submit" name="submit" value="Submit"/>
<input type="button" value="Close" onclick="hideOverDiv()" class="secondaryAction"/>
</div>
<div style="display: none;" class="overDivNotice" id="overDivNotice">
</div></div>
<iframe style="" name="transFrame" id="transFrame">tyh</iframe>
</fieldset>
</div></div>
I don't know why it is putting the </form> tag where it is.. It is supposed to be after the iframe, but whatever. Does that even matter? Is the iframe supposed to be inside the form?
Nice, I was wrong.. I found the problem.
First use html for write html;
With the code below works:
for 'testSubmitiFrame.html':
<form target="transFrame" method="POST" class="EditName" id="reportEdit" action="testSubmitiFrame.php">
<div class="content" id="overDivContent">
<div class="inputDivContainer">
<fieldset class="inputOverDiv" id="tfa_Names">
<legend><b>Add Transmittal:</b></legend>
<div class="data">
<div class="inputDiv">
<span class="inputLabel">Description:</span>
<span class="textInput"><input type="text" class="" size="40" value="" name="transDesc" id="transDesc"/></span>
</div>
<div class="inputDiv">
<span class="inputLabel">Date:</span>
<span class="textInput"><input type="text" class="" size="40" value="" name="transDate" id="date"/></span>
</div>
<div class="inputDiv">
<span class="inputLabel">File:</span>
<span class="textInput"><input type="file" class="" size="40" value="" name="transFile" id="file"/></span>
</div>
<input type="hidden" value="121" name="name_id"/>
<br/>
<div align="center" class="actions" id="overDivActions">
<input type="submit" name="submit" value="Submit"/>
<input type="button" value="Close" onclick="hideOverDiv()" class="secondaryAction"/>
</div>
<div style="display: none;" class="overDivNotice" id="overDivNotice"></div>
</div>
</fieldset>
</div>
</div>
</form>
<iframe style="" name="transFrame" id="transFrame">tyh</iframe>
for 'testSubmitiFrame.php':
<?php
var_dump($_POST);
?>
Your problem is html syntax. This works.
Apparently, a div or stupid fieldset tag being out of place was preventing the thing from working. I really gotta start checking my code before bothering you nice people.
Thanks anyway.
Your logic appears valid, can you setup a test page?
This page will do what you want, so you may want to look through it and see what may be different from what you are already doing:
http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml
Is the action in the html the php file that will do the processing?
I think it's because of these two lines:
echo "</div>";
echo "</div><br>
You're closing <div> with no opening tags. This is making Firefox close the <form> early - your submit button isn't inside your form, which is why it's not working.
The position of the iframe inside or outside the form doesn't matter - just make sure the rest of the HTML is valid and it should work.
Related
i have a searchbox in my website like below:
<div style="" class="col-sm-8">
<div class="wrapda">
<div class="searchda">
<a href="https://google.com">
<input type="text" class="searchTermda" placeholder="Search Image">
<button type="submit" class="searchButtonda">
<i class="fa fa-search">Search</i>
</button>
</a>
</div>
</div>
</div>
am trying to pass the user entered keyword in the input box to next page , is there anyway to do this using anchor tags, please help. thanks in advance
Instead of using anchor tag, the more standard way is to use form.
<div style="" class="col-sm-8">
<div class="wrapda">
<div class="searchda">
<form method="POST" action="your target url">
<input type="text" name="searchInput" class="searchTermda" placeholder="Search Image">
<button type="submit" class="searchButtonda">
<i class="fa fa-search">Search</i>
</button>
</form>
</div>
</div>
</div>
You have to specify the action attribute in the form tag which will be your target url.
You also have to specify the name attribute in the input tag.
This way your input will be sent to your target url.
You can use form for this purpose.
<form action="https://www.google.com/search" method="GET" />
<input type="text" placeholder="Search Image" name="q" />
<input type="submit" value="Search Image" />
</form>
i have a foreach row that displays the "message icon" (i dont think it has anything to do with the form since the form is outside the loop:
enter image description here
which displays a chat form that you can either type a chat or send an attachment:
enter image description here
How can i make one of them required before submission? I tried through multiple JQuery ways but because they are in a for loop and each of them do not have a special id, its not working. any help please? I just need it to show an alert
Here is my code for the form:
<form method="post"action="<?php echo base_url();?>form_support_chat" enctype="multipart/form-data" class="ticket-reply-form">
<div class="row">
<div class="col-xs-12">
<div class="chat-left">
<input type="text" name="message" placeholder="Type Message ..." class="form-control" autocomplete="off">
<input type="hidden" name="cst_id" value="<?php echo $cst_id; ?>">
<input type="hidden" name="arch_ticket" value="<?php echo $arch_ticket; ?>">
<input type="hidden" name="ticket_number" value="<?php echo $ticket_number?>">
</div>
<div class="chat-right">
<label>
<img src="<?php echo base_url();?>/assest/icon-img/paperclip.png" class="ic_img" >
<input type="file" name="file" class="form-control" style="display:none;" id="hidden_upload_file_chatting">
</label>
<button type="submit" class="btn btn-flat" name="reply" value="reply" >Reply</button>
<button type="button" class="btn btn-flat" data-dismiss="modal" style="margin-left: 10px !important;">Close</button>
<span id="_showName"></span>
</div>
</div>
</div>
</form>
Simply use html5's required value
<input name="cst_id" value="<?php echo $cst_id; ?>" required>
or
<input name="cst_id" value="<?php echo $cst_id; ?>" required="true">
update
Using jQuery, add id value to each input
$(document).ready(function() {
if( $('#input1').valid() || $('#input2').valid(); ):
console.log("Success");
endif;
});
I cant get the two forms to play with each other.. - meaning I have one form that sends an email - and another that is using a search function. The email form is working ok. Validates just fine, but when I click on the search button, it doesn't do anything. ( the search form is working fine if I remove the email form )
What am I missing ??.. ugh..
I've been working on this, but my brain is fried. I am sure it is something simple.
Any help from you guys would be much appreciated.
<form method="post" action="contact.php" name="contactform" id="contactform">
<div class="full-lenght">
<div class="to-left">Name<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<input name="name" type="text" id="name" value="" class="contact-field" />
</div>
</div>
<div class="clear"></div>
<div class="full-lenght">
<div class="to-left">Email<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<input name="email" type="text" id="email" value="" class="contact-field" />
</div>
</div>
<div class="clear"></div>
<div class="full-lenght">
<div class="to-left">Phone<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<input name="phone" type="text" id="phone" value="" class="contact-field" />
</div>
</div>
<div class="clear"></div>
<div class="full-lenght">
<div class="to-left">Message<br>
<span class="small-required">Required</span> </div>
<div class="to-right">
<textarea name="comments" rows="3" id="comments" class="contact-message"></textarea>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="human">3 + 1 = ?<br>
<input name="verify" type="text" id="verify" size="4" value="" style="width: 30px;" />
<input name="e" type="submit" class="contact-button" id="submit" value="Submit" />
</div>
</form>
<div class="search">
<form class="form" action="search_results.php" method="get">
<input name="q" type="text" class="search_field" value="Search.." onfocus="if (this.value=='Search..') this.value='';">
<a onclick=" document.forms[0].submit();return false" href="#"><img class="search_button" title="Search Button" src="images/search_button.jpg" alt="" width="24" height="24"></a> <br>
<br>
</form>
</div>
This is the code. The second form starts in search div. The first one is an email form with ajax validation.
try this,
in the second form
<form class="form" id="searchform" action="search_results.php" method="get">
<input name="q" type="text" class="search_field" value="Search.." onfocus="if (this.value=='Search..') this.value='';" />
<a onclick=" document.getElementById('searchform').submit();return false" href="#"><img class="search_button" title="Search Button" src="images/search_button.jpg" alt="" width="24" height="24"/></a> <br/>
<br/>
</form>
This doesn't have anything to do with PHP, but does have everything to do with JavaScript.
Change:
<a onclick=" document.forms[0].submit();return false" href="#">
to:
<a onclick="document.forms[1].submit();" href="#">
You're using legacy DOM notation in your JavaScript, which is OK but outdated. When you have forms[0] you're referring to the first form in the DOM which isn't the search form (the contact form is), forms[1] is the search form. Clicking the icon will fail without the change, but you could type in the box and hit enter and it will work, since the JavaScript you have won't be triggered (no click). I also see no need to keep the return false statement in there.
<form class="form" action="search_results.php" method="get">
<input name="q" type="text" class="search_field" value="Search.." onfocus="if (this.value=='Search..') this.value='';">
<input type="submit" value='Search'> <br>
<br>
This problem you used anchor tag as button form and it doesn't work for submitting form so you can either replace anchor tag with input tag "submit type" as you see in code or you can use JavaScript to make anchor tag when you click on it, it fires a submitting form.
Enjoy :)
I have a form with a datepicker and I want to pass the selected date to my php file but it doesn't seem to work.
My html is like this
<form method="post" action="http://www.domainname.com/?from=20/04/2014&to=25/04/2014" name="easy_widget_form" id="easy_widget_form">
<div class="input_container">
<div class="input_prefix">
Check in:
</div><input id="easy-widget-datepicker-from" type="text" name="from" value="20.04.2014" class="hasDatepicker">
</div>
<div class="input_container">
<div class="input_prefix">
Check out:
</div><input id="easy-widget-datepicker-to" type="text" name="to" value="25.04.2014" class="hasDatepicker">
</div>
<p class="easy-submit"><input type="submit" class="easybutton" value="Reserve now!"> </p>
</form>
Javascript :
jQuery('#easy-form-from,#easy-widget-datepicker-from').val(d);
But when I echo $easy-widget-datepicker-from in my php file, it doesn't show anything. Any help is appreciated!
make your page as this
contact.php
<?PHP
if($_REQUEST['Submit']=='Reserve now!'){
echo $from= $_POST['from'];
echo $to= $_POST['to'];
}
?>
<form method="post" action="contact.php" name="easy_widget_form" id="easy_widget_form">
<div class="input_container">
<div class="input_prefix">
Check in:
</div><input id="easy-widget-datepicker-from" type="text" name="from" value="20.04.2014" class="hasDatepicker">
</div>
<div class="input_container">
<div class="input_prefix">
Check out:
</div><input id="easy-widget-datepicker-to" type="text" name="to" value="25.04.2014" class="hasDatepicker">
</div>
<p class="easy-submit"><input name="Submit" type="submit" class="easybutton" value="Reserve now!"> </p>
</form>
i have made changes to your form, and submit button. Please try the above code.
php only takes "name" not "id"
so echo "$_POST['from']" to get "easy-widget-datepicker-from"'s value
i got a form.
<form id="site-contact-form">
<div>
<div class="wrapper"><span>Ձեր անունը:</span>
<div class="bg">
<div>
<input type="text" class="input" name="contactname" id="contactname" />
</div>
</div>
</div>
<div class="wrapper"><span>Ձեր E-mail-ը:</span>
<div class="bg">
<div>
<input type="text" class="input" name="email" id="email" />
</div>
</div>
</div>
<div class="textarea_box"><span>Տեկստ:</span>
<div class="bg">
<div>
<textarea cols="1" rows="1" name="message" id="message"></textarea>
</div>
</div>
</div>
<div style="clear:both;"></div>
<button id="sub" name="submit">ուղարկել</button>
</div>
</form>
As you see i got no action on it, no method. But when im clicking on button, its refreshing the page (like when it have action) and adding to URL ?contactname=&email=&message=&submit= ... I never met this problem before, why it is sending variables? I dont have any php on page yet...
Beacause the default method is GET and the URL is the same of the page. Use:
<form method="POST" action="/reactor">
<!-- .... -->
</form>
Actually, the action property is mandatory.
Please correct the code with:
<form id="site-contact-form" method="post">
And the submitted values will not be displayed on the URL.
If you do not specify the form method, it will "get" by default.
This is happening here.
Change the type of button as button
<button id="sub" name="submit" type="button">ուղարկել</button>