Including JavaScript validation in a form submit in PHP - php

Is it possible to to submit an HTML Form (with a PHP action) and include a javascript onsubmit="VerifyFields()?
I am trying to do it now, but it seems that it will do the PHP action and not do the onsubmit.
Update:
Thanks for all of your help.
The problem was that I was putting my VerifyMe() function in the <head></head>, as opposed to the <body></body>.

If return false in the onsubmit handler, the form will not submit, if you return true, it will.
You should make the function VerifyFields return true or false, and call it like this:
onsubmit="return VerifyFields();"

<script type="text/javascript">
function validateForm(){
...
}
</script>
<form name="contact" action="<?=$_SERVER['PHP_SELF']?>"
method="post" onsubmit="return validateForm();">
<label> Foo </label>
<input type="text" class="txt_input" name="sender_name" />
...
<input type="image" src="img/send.jpg" id="submitButton"
name="submitForm" value="send" />
</form>

I would test the inputs bevor submitting any fields to the server.
I would test it client side by javascript and finaly send it to the server.
You could call Your script also this way.
<input type="text" class="txt_input" name="sender_name" onchange="validateForm();" />

Related

Remove the form input fields data after click on submit?

hi i am using a form for users subscription on the website with target is _new.
when i click on the submit button that the submitting message shows on the new window but the previous window still holding the data.
How to remove input fields data after submitting.
<form target="_new" action="samplepage.php" method="post">
<input type="text" name="inputtxt1" />
<input type="text" name="inputtxt2" />
<input type="submit" value="submit" />
</form>
Any suggestions???
Make the autocomplete - off
try this
<form target="_new" action="samplepage.php" method="post" autocomplete="off">
<input type="text" name="inputtxt1" />
<input type="text" name="inputtxt2" />
<input type="submit" value="submit" />
</form>
Reset form data using this
$('form').get(0).reset();
$(document).ready(function(){
$('form_name').submit(function(){
$('input[type="text"]').val('');
});
});
You can set value to null for text field using jquery on submit button click
$("input[type=submit]").click(function()
{
$("input[type=text]").val('');
});
EDIT:
I don't know is this a good approach, use blur instead of click event
$("input[type=submit]").blur(function()
{
$("input[type=text]").val('');
});
But it will meet your need.

Post variables from js to form and then to php file

first of all, greetings and excuse my English...
I explain my problem:
I have some JS functions that generate some variables, I would like to send these variables via the POST method to a php file to be consulted in a database...
I have read that the best way to do this is sending the variables to the respective values ​​about inputs within a form, Below I show the variables and the form:
Javascript variables:
On click in "Buscar"
$('#Buscar').on('click', function () {
document.getElementById("tipo").value=TipoDeInmuebleDATA.selectedData.value;
document.getElementById("operacion").value=TipoDeOperacionDATA.selectedData.value;
document.getElementById("habitaciones").value=HabitacionesDATA.selectedData.value;
document.getElementById("MetrosCuadrados").value=MetrosCuadrados;
document.getElementById("banos").value=BanosDATA.selectedData.value;
document.getElementById("precio").value=Precio;
});
The Form:
<form name="FormBuscar" method="post" action="consulta.php">
<input id="tipo" name="tipo" type="hidden" />
<input id="operacion" name="operacion" type="hidden" />
<input id="MetrosCuadrados" name="MetrosCuadrados" type="hidden" />
<input id="habitaciones" name="habitaciones" type="hidden" />
<input id="banos" name="banos" type="hidden" />
<input id="precio" name="precio" type="hidden" />
<input type="submit" name="Buscar" class="BotonBuscar">
</form>
I suspect that something is wrong, in the sense that I think the variables are not being sent to consultation
In consultation, if I do the following:
$tipo=$_POST['tipo'];
echo $tipo;
No result :-(
Greetings, I will await your answers in!
The event is wrong. You want to change the values right before submitting. So also add id="buscar-form" to the form tag. Then you can change the jQuery to this:
$('#buscar-form').on('submit', function () {
$('#tipo').val(TipoDeInmuebleDATA.selectedData.value);
$('#operacion').val(TipoDeInmuebleDATA.selectedData.value);
...
});
Forget about the #buscar button. When you click the button, the form is going to submit. So that's the event captured above. Careful with your typing, there are a lot of typos!

Form Submit - Prevalidation throws IE off

Background: The website I am working on has a search bar at the top. The user inputs a part code for a product and the website returns information about that product.
So, I have a basic search bar that posts parameters from a HTML form into a PHP script, which then does a lookup on a MySQL server to get the Product.
The problem is because some part codes have "#" characters, I have to use Javascript to insert escape characters, otherwise I only get some of the part code in the PHP script.
Example - 123#ABC would be read as 123.
I use a hidden value in the form, which is populated with the Text Box value, modified by the escape() function in Javascript.
This is my code currently, it works in every browser except for IE.
Any help would be much appreciated :)
<script language="jscript">
function changeTextBox()
{
hiddenSearch.value = escape(txtSearch.value);
formSearch.submit;
}
</script>
<form id="formSearch" name="Search" action="?page=search" method="post">
Search by <u>Part Code</u> or <u>Description</u>
<input id="txtSearch" type="text" size="35">
<input id="hiddenSearch" name="Search" type="hidden">
<input name="Submit" onclick='jscript:changeTextBox();' type="submit" value="Submit">
</form>
take a look at changes-- i think there were issues with your javascript.
<script language="jscript">
function changeTextBox()
{
document.getElementById("hiddenSearch").value = escape(document.getElementById("txtSearch").value);
this.submit();
}
</script>
<form id="formSearch" name="Search" action="?page=search" method="post" onsubmit='changeText()'>
Search by <u>Part Code</u> or <u>Description</u>
<input id="txtSearch" type="text" size="35">
<input id="hiddenSearch" name="Search" type="hidden">
<input name="Submit" type="submit" value="Submit">
</form>

Disable Button HTML

I have a submit form for a URL and I want it to have specific behavior which I am not able to achieve so far. Initially I want the button to be enabled. After someone enters a URL and hits the "submit" button, I want to call my checkURL() function. If the function returns true, I want the button to become disabled and I want to then open remote_file.php. If it returns false, I want the button to be enabled and make them try another URL.
<form name=URLSubmitForm
action="remote_file.php"
method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit"
onchange="this.disabled=false"
onclick="this.disabled=true; checkURL();"
value="submit">
</form>
Edit: It looks like I was just putting the onchange in the wrong place. I ended up doing this to fix reenabling the button
<input type="text" onchange="submit.disabled=false" name="name" size="50">
Thanks!
I would propose that you attach the event handling code to the form's onsubmit event, not the button event(s). What you're trying to control is whether or not the form is posted. The button being disabled while your validation logic runs is a secondary goal.
Try this instead:
<script type="text/javascript">
function checkURL(){
var submitButton = document.getElementById('submitButton');
submitButton.disabled=true;
/* implement your validation logic here
if( url is invalid ){
submitButton.disabled=false;
return false;
}
*/
// everything is valid, allow form to submit
return true;
}
</script>
<form name="URLSubmitForm" action="remote_file.php" onsubmit="return checkURL();" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit" name="submitButton" id="submitButton" value="submit">
</form>
<input type="submit"
onclick="if (checkURL()) { this.disabled='disabled'; return true; } else { return false; }"
value="submit">
How about in the form's onsubmit event:
<form onsubmit="(function(){
if(checkURL()){
this.elements['submit'].disabled = 'disabled';
}
else{
return false;
}
})()">
Since you haven't given any ajax code, the form will still be submitted normally and when the page is reloaded the button will be enabled again.
onclick="checkURL(this);"
function checkURL(arg){
this.disabled=true;
if(<something>) this.disabled=false;
}

send the form value into the form action parameter

Can i send a input value into form action ?Let say, on the form the phone number taken.Now can i send the phone number as form action parameter "number"? Is their any way to send it?
<form method="post" action="abc.php?number=ph_number" enctype="multipart/form-data">
<input type="text" name="ph_number" value=""/>
<input type="submit" name="search" value="SEND"/>
</form>
How can i do it?
Thanks in advance
riad
<form method="GET" action="abc.php" enctype="multipart/form-data">
<input type="text" name="number" value=""/>
<input type="submit" name="search" value="SEND"/>
</form>
Change action="abc.php?number=ph_number" to action="abc.php
Change name="ph_number" to name="number"
When you click submit, the value contained in "number" text field will be passed to abc.php.
Receive the value with $value = $_REQUEST['number']; in abc.php.
You can leave an empty action, and use the onSubmit event to load a javascript function that does whatever and redirects to the page according to the input value.
Html
<form .. action="" onsubmit="return abcByPhone(this);">
Javascript
function abcByPhone(form) {
url = from.number.value;
...
}
EDIT:
I actually didn't read the question properly. I thought you wanted to redirect to different pages according to the input. Using plain GET (like the others mentioned) is fine for this.

Categories