I have a form, and i want to post it to mysql, without submit. I found out to post the values with ajax on every values. If i click on the one text field it inserts a new row to mysql and if i move to the next field it updates the mysql with my values. Is it possible?
My form:
<input type="text" maxlength="50" size="50" value="" name="name">
<input type="text" maxlength="50" size="50" value="" name="level">
<input type="text" maxlength="50" size="50" value="" name="pass">
<input type="text" maxlength="50" size="50" value="" name="date">
etc.
Create a hidden input with the id and give it no value, then on the submit on every keyup event, and if the id field is empty run an insert query and return the id, and update the id field with the value. If the value is not empty, run an update query with the form data. I provided an example using jQuery, but you could do the same thing without it. Ajax is just much easier with jQuery or any other library.
<input type='hidden' id='id' name='id' value=''/>
$('input').keyup(function(){
var data = $('#myform').serialize();
$.ajax({
type:'post',
data:data,
url:'...',
dataType:'json',
success:function(response){
var id = response.id;
if(typeof(id) != 'undefined'){
$('#id').val(id);
}
}
});
});
Related
I'm new to HTML/CSS and have created a simple contact form to enter a name, number, and have a populated textarea with a short message but would like to automatically populate the name area within the text field with whatever was put into the name's input field previously in the contact form. What is the best way to do this?
<fieldset>
<h1>Contact Form</h1>
<label for="name">Patient Name:</label>
<input name="name" id="name" type="text" size="40" maxlength="100">
<label for="number">Patient Number:</label>
<input name="number" id="number" type="text" size="40" maxlength="12">
<label for="message">Text Messge:</label>
<textarea name="message" id="message" cols="40" rows="10">
Hi [name], thank you for visiting us!
</textarea>
<input class="btn" name="submit" type="submit" value="Send">
</fieldset>
Some JavaScript should solve your problem.
Insert this script tag into your HTML file after the form.
<script>
// save the location of the name field
var name_field = document.getElementById('name');
//add an event listener to activate if the value of the field changes
name_field.addEventListener('change', function() {
// when the field changes run the following code
// copy the text (value)
var name = name_field.value;
// concatenate it with the desired message
var autoFill = 'Hi ' + name + ', thank you for visiting us!';
// and paste it into the message field.
document.getElementById('message').value = autoFill;
})
</script>
For dynamic behavior you are gonna need some javascript.
<input name="number" id="number" type="text" oninput="getNumber()" size="40" maxlength="12">
<script>
var getNumber = function() {
document.getElementById("message").innerHTML = "Hi " + document.getElementById("name").value + ", thank you for visiting us";
}
</script>
And as it looks right now, you probably shouldn't be using a textArea to display this message, rather use a paragraph element.
AngularJS is perfect for a scenario like this if you are more interested.
Consider the following code:
<input type="text" oninvalid="alert('Missing required fields!');" id="input1" name="input1" required/>
<input type="text" oninvalid="alert('Missing required fields!');" id="input2" name="input2" required/>
<input type="text" oninvalid="alert('Missing required fields!');" id="input3" name="input3" required/>
I wish that regardless of how many of the three fields the user leaves blank, the alert message only appears once. With my current code, the alert message is displayed as many times as there are invalid fields.
You could use a JavaScript function that is called by oninvalid. It works by using an if statement that is only true the first time the function is called, after that alert() will no longer be called.
var once = false;
function prompt(){
if(once == false){
alert('Missing required fields!');
once = true;
}
}
Then use oninvalid="prompt();" in your input tag.
Amongst many other controls, I have the following HTML elements on a form
<input ID='cmdRegisterMe' name='cmdRegisterMe' value='Register Me' onclick="return preSubmit();" type='submit' />
<input type="hidden" ID="NewHash" name="NewHash" value="">
<INPUT TYPE="TEXT" ID="email" NAME="email" VALUE="" SIZE="50" MAXLENGTH="50">
<INPUT TYPE="PASSWORD" ID="password1" NAME="password1" VALUE="" SIZE="30" MAXLENGTH="25">
<INPUT TYPE="PASSWORD" ID="password2" NAME="password2" VALUE="" SIZE="30" MAXLENGTH="25">
and JS functions
function preSubmit() {
document.getElementById("NewHash").value = doNewHash(document.getElementById("password1").value, document.getElementById("email").value.toLowerCase());
alert(document.getElementById("NewHash").value);
document.getElementById("password1").value = '';
document.getElementById("password2").value = '';
return true;
}
function doNewHash(pw, strUsername) {
var hash_padding = '************';
return SHA1(SHA1(pw) + hash_padding + strUsername);
}
When I click Submit, I see the expected hashed value displayed by the call of alert().
However, in my PHP, the value of $_POST['NewHash'] is an empty string. I cannot fathom why this happens. In my understanding, there is no other code executed after the onclick() function returns true. I have done a global search on my code for 'NewHash' and there are no other assignments to it.
If I replace this line
document.getElementById("password1").value = '';
with this
document.getElementById("password1").value = document.getElementById("NewHash").value;
and inspect $_POST['password1'], it contains the hash value. What on earth could be happening to wipe out the value of 'NewHash'?
I have found what was wrong, but I hope posting the question may help someone else. I saved the PHP-generated HTML as a file, added to the top, and resolved to remove code piece by piece and submit until the submitted value for NewHash was no longer empty. I found I had TWO hidden controls called NewHash - so JS was displaying the value in one, and the browser was submitting the other!
I need to get information from my online form added in to my URL string and get it submitted to the dialler.
I have a working URL string that submits data to our dialler ok.
I need to get the first name, last name and phone number from the form submission in to the URL string.
This is how the URL string looks;
http://domain.com/scripts/api.php?user=admin&pass=password&function=add_lead&source=MobileOp&phone_number=07000000000&phone_code=44&list_id=3002&first_name=NAME&last_name=SURNAME&rank=99&campaign_id=campaign&callback=Y&callback_datetime=NOW
This is the form I have;
<form id="contact_form" method="post" action="">
<div class="contactform">
<fieldset class="large-12 columns">
<div class="required">
<label>Your First Name:*</label>
<input name="first_name" type="text" class="cms_textfield" id="first_name" value="" size="25" maxlength="80" required="required" />
</div>
<div class="required">
<label>You Last Name:*</label>
<input name="last_name" type="text" class="cms_textfield" id="last_name" value="" size="25" maxlength="80" required="required" />
</div>
<div class="required">
<label>Phone Number:*</label>
<input name="phone_number" type:"number" id="phone_number" size="25" maxlength="11" required="required"></input>
</div>
</fieldset>
<p class="right"><strong>Call us now on 01656 837180</strong></p>
<div class="submit"><input type="submit" value="Submit" class="button small radius"></div>
</div>
</form>
I am struggling to get anywhere with this. I have a basic knowledge of PHP.
If you change your form to method="GET" and the action to your url action="http://domain.com/scripts/api.php" it will include it in the URL string. That said, showing a user's password as a query string variable is probably a bad idea in the long run.
Instead, you can process the input from the form in PHP by referring to the $_POST array in your code. For example, to get the first name you'd just use $_POST['first_name']
Change
<form id="contact_form" method="post" action="">
to
<form id="contact_form" method="GET" action="">
(notice the method 'GET'). GET sends form variables through the URL.
You can use PHP for this.
if you have an input field of name attribue 'first_name', It'll be stored in the variable $_POST['first_name'] in case of POST as method and $_GET['first_name'] in case of GET method
If you have a url
http://domain.com/scripts/api.php?user=admin&pass=password&function=add_lead&source=MobileOp&phone_number=07000000000&phone_code=44&list_id=3002&first_name=NAME&last_name=SURNAME&rank=99&campaign_id=campaign&callback=Y&callback_datetime=NOW,
notice the x=y pattern repeating in it, like user=admin. Here, the first element, x becomes the key to tha PHP array and the second becomes the value.
You can use this function. on your submission page
<script type="text/javascript">
function iter() {
var str = "";
$("#contact_form .contactform .required :input").each(function () { // Iterate over inputs
if ($(this).attr('id')) {
str += $(this).attr('id') + "=" + $(this).val() + "&"; // Add each to features object
}
});
str = str.substring(0, str.length - 1);
$.ajax({
type: "GET",
url: "http://domain.com/scripts/api.php",
data: str,
async: true,
error: function (error) {
},
success: function (data) {
}
});
}
</script>
just attach it to the submit button as shown below
$("#contact_form .submit").on("click", function () {
iter();
return false;
});
I have an input field:
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" />
I want the field to display on my form but don't want the user to be able to edit the field. When the user clicks submit I want the form value to be sent back to the server.
Is this possible. I tried different combinations of disabled = "disabled", readonly = "readonly". Seems I always get nothing sent back for the field.
Adding a hidden field with the same name will sends the data when the form is submitted.
<input type="hidden" name="my_name" value="blablabla" />
<input type="text" name="my_name" value="blablabla" disabled="disabled" />
With Chrome browser on Windows 10 just having name="your_name" and the readonly attributes works fine: client cannot change a value, but it is sent to the server.
On the assumption you're using a script to create the form, I'd suggest using <input type="hidden" /> which will submit the variable with the form, but also use a regular <input type="text" readonly="readonly" /> to show the variable to the user. This won't submit the value, obviously, but will make it visible (while the hidden input will submit the value, but not show the value).
You could also do this with JavaScript:
var theForm = document.getElementsByTagName('form')[0];
var inputs = document.getElementsByTagName('input');
for (i=0; i<inputs.length; i++){
if(inputs[i].type == 'hidden'){
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.setAttribute('disabled');
newInput.value = inputs[i].value;
theForm.appendChild(newInput);
}
}
Clumsy JS Fiddle demo.
alternatively u can make a little manipulation with javascript, remove the disabled property before form submitted
<form action="target.php" method="post">
<input type="text" id="anu" name="anu" value="data anu" disabled="disabled" />
<button onclick="document.getElementById('anu').disabled=''">send</button>
<script type="text/javascript">
function myFn(event) {
event.stopPropagation(); event.preventDefault();
}
</script>
<input onkeydown="myFn(event)" >
You can add 'readonly'='true' in the input element. With this the user cant edit and also send the value back to the server.
<input cid="Topic_Created" name="Topic.Created" size="25" type="text" value="6/5/2011 8:22:45 AM" readonly='true' />
You should consider using input type="hidden" when submitting read-only fields. Otherwise, if you still need the value of input field to be visible, you should create another input (type=text) with a different name.
<input cid="Topic_Created" name="Topic.Created" type="hidden" value="6/5/2011 8:22:45 AM" />
<!--This is visible: -->
<input cid="Topic_Created" name="doesntmatter" size="25" type="text" value="6/5/2011 8:22:45 AM" />