I have a form that I am trying to pass a JavaScript variable into. The custom hidden field works, but nothing gets passed into it... is there something wrong with the onsubmit code?
Embedded form code:
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email" required>
<input type="hidden" name="REFERID" id="MERGE1" value="">
Here is the JS Code later in the page:
<script type="text/javascript">
function addref() {
var urlref = (document.url);
var refcode = urlref.substring(urlref.indexOf "ref" +4 != urlref.length);
document.mc-embedded-subscribe-form.MERGE1.value = refcode;
}
</script>
Try to use:
document.getElementById("MERGE1").value = refcode;
Related
I'm trying to populate a hidden field in a form that I have created with the current URL of the page including all the UTM tags.
I seem to be having trouble when trying to get the value of the URL into the field, for some reason it keeps reporting null
var urlnew = window.location.href;
document.querySelector("input[name='url_hidden']").value = "urlnew";
if I hard code a value it works correctly and submits but it's just anytime i try to use something else
You should remove the quote:
<html>
<body>
<input type=text name=url_hidden>
</body>
<script type="text/javascript">
var urlnew = window.location.href;
document.querySelector("input[name='url_hidden']").value = urlnew;
</script>
</html>
function submitForm(e) {
e.preventDefault();
const username_el = document.querySelector("input[name='username']");
const password_el = document.querySelector("input[name='user_password']");
const hidden_el = document.querySelector("input[name='hidden_url']");
const url = window.location.href;
hidden_el.value = url;
window.alert(`${username_el.value} - ${password_el.value} - ${hidden_el.value}`);
}
<form onsubmit="submitForm(event)">
Username: <input type="text" name="username" id="username" placeholder="Username">
<br>
Password: <input type="password" name="user_password" id="user_password" placeholder="Password">
<br>
Hidden URL: <input type="hidden" name="hidden_url" id="hidden_url">
<br>
<button type="submit">Submit</button>
</form>
You might as well want to populate the value attribute:
document.querySelector("input[name='url_hidden']").value = urlnew;
What I am trying to do is to get all inputs and data when someone click the submit button.
My code HTML is this:
<form id="form" action="index.php" method="POST" class="register" name="Register">
<label>Patient Name:</label>
<input id="pname" name="pname" placeholder="John Doe" type="text" data-role="justText" value=""><br><br>
<label>Phone Number:</label>
<input id="ptel" type="tel" name="ptel" value=""><br><br>
<label>Email:</label>
<input id="pemail" placeholder="example#gmail.com" type="email" value=""><br><br>
<button id="submit" class="submit" type="submit" name="register">Registrar</button>
</form>
Don't know if it's the best use the button or input tag for submit the form. And the jQuery to handle what I am trying to do is this:
jQuery.fn.extend({
hello: function () {
submitbutton = $(this).find('button').attr('id');
$inputs = $(this).find('input');
knowInputs = function() {
$inputs.each(function () {
console.log( $(this).attr('name') );
});
}
$('#'+submitbutton).on('click', function () {
knowInputs();
})
return this;
}
});
So, I put the form ID and init the function like this:
$(#form).hello();
P.D.: If I put the code knowInputs outside the on(click), it seems to work fine. My problem is when I am trying to gather all when clicking the submit button.
Any help shall be appreciated. Thanks in advance!
Forms have a native Javascript event, submit. jQuery also has a function, $.serialize which will turn a form into an encoded URL string, which is probably the most standard format you'd want it in. You can easily convert this into JSON or a JS Object.
$('#form').submit(function(e){
e.preventDefault();
return $(this).serialize();
});
I am using form twice on same page.
HTML Code
<form action="post.php" method="POST" onsubmit="return checkwebform();">
<input id="codetext" maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
It's working fine with one form but when i add same form again then it stop working. The second form start showing error popup alert but even i enter text in form field.
JS Code
function checkwebform()
{
var codecheck = jQuery('#codetext').val();
if(codecheck.length != 5)
{
alert('Invalid Entry');
} else {
showhidediv('div-info');
}
return false;
}
How can i make it to validate other forms on page using same function?
As I commented, you can't have more than one element with the same id. It's against HTML specification and jQuery id selector only returns the first one (even if you have multiple).
As if you're using jQuery, I might suggest another approach to accomplish your goal.
First of all, get rid of the codetext id. Then, instead of using inline events (they are considered bad practice, as pointed in the MDN documentation), like you did, you can specify an event handler with jQuery using the .on() method.
Then, in the callback function, you can reference the form itself with $(this) and use the method find() to locate a child with the name codetext.
And, if you call e.preventDefault(), you cancel the form submission.
My suggestion:
HTML form (can repeat as long as you want):
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
JS:
$(document).ready(function() {
//this way, you can create your forms dynamically (don't know if it's the case)
$(document).on("submit", "form", function(e) {
//find the input element of this form with name 'codetext'
var inputCodeText = $(this).find("input[name='codetext']");
if(inputCodeText.val().length != 5) {
alert('Invalid Entry');
e.preventDefault(); //cancel the default behavior (form submit)
return; //exit the function
}
//when reaches here, that's because all validation is fine
showhidediv('div-info');
//the form will be submited here, but if you don't want this never, just move e.preventDefault() from outside that condition to here; return false will do the trick, too
});
});
Working demo: https://jsfiddle.net/mrlew/8kb9rzvv/
Problem, that you will have multiple id codetext.
You need to change your code like that:
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
<form action="post.php" method="POST">
<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" />
<input class="button" type="submit" value="SUMBIT" />
</form>
And your JS:
$(document).ready(function(){
$('form').submit(function(){
var codecheck = $(this).find('input[name=codetext]').val();
if(codecheck.length != 5)
{
alert('Invalid Entry');
} else {
showhidediv('div-info');
}
return false;
})
})
I'm having trouble resetting the label inside a paper-input-container after submitting a form. The form is a simple login form. If a user logs in, out, and back in again without a page refresh (from the browser), the label appears to be stuck as if there were a value in the input.
Here's an image to show the difference:
Here's the form inside the element:
<form is="iron-form">
<paper-input-container id="email_container">
<paper-input-error>E-mail or Password is incorrect</paper-input-error>
<label>E-Mail Address</label>
<input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}">
</paper-input-container>
<paper-input-container id="password_container">
<label>Password</label>
<input is="iron-input" id="password" type="password" value="{{passwordInput::input}}">
</paper-input-container>
<paper-button raised dialog-dismiss>Cancel</paper-button>
<paper-button raised on-tap="handleCsrf">Login</paper-button>
</form>
These two approaches both get the form to the "after login" state the same:
//
this.emailInput = null;
this.passwordInput = null;
//
this.emailInput = "";
this.passwordInput = "";
I thought this would reset the entire container somehow, but it does nothing:
this.$.email_container = null;
this.$.password_container = null;
iron-input
bindValue
String
Use this property instead of value for two-way data binding.
<paper-input-container id="email_container">
<paper-input-error>E-mail or Password is incorrect</paper-input-error>
<label>E-Mail Address</label>
<input is="iron-input" id="email" on-blur="validateEmail" bind-value="{{emailInput::input}}">
</paper-input-container>
<paper-input-container id="password_container">
<label>Password</label>
<input is="iron-input" id="password" type="password" bind-value="{{passwordInput::input}}">
</paper-input-container>
With bindValue apparently both this.emailInput = null and this.set('emailInput, null) do the trick.
I'm not sure why the first form didn't work (I'm using a paper-input, not iron-input, and it worked there), it's possible the problem is somewhere in the code not shown. But something else to try is directly setting the value:
this.$.email.value = null; // where 'email' is the ID of the iron-input
I'm not entirely sure how this will interact with bind-value, but the docs do say
iron-input adds the bind-value property that mirrors the value
property
You can reset a complete iron-form by calling the reset() method:
document.getElementById('idOfForm').reset();
I have seen some other threads like this but they don't seem to help me in my problem. I am new to Javascript and I am struggling to understand which value in the email input has to be called in my javascript function to make it work.
<input type="email" name="myEmail" value="" class="form-control" required placeholder="Please Enter your email" maxlength="50">
The function I am using is this:
function check_v_mail('myEmail') {
fld_value = document.getElementById(field).value;
is_m_valid = 0;
if (fld_value.indexOf('#') >= 1) {
m_valid_dom = fld_value.substr(fld_value.indexOf('#')+1);
if (m_valid_dom.indexOf('#') == -1) {
if (m_valid_dom.indexOf('.') >= 1) {
m_valid_dom_e = m_valid_dom.substr(m_valid_dom.indexOf('.')+1);
if (m_valid_dom_e.length >= 1) {
is_m_valid = 1;
}
}
}
}
if (is_m_valid) {
update_css_class(field, 2);
m_valid_r = 1;
} else {
update_css_class(field, 1);
m_valid_r = 0;
}
return m_valid_r;
}
This function is saved as email_script.js and is called in my footer as follows:
<script src="includes/js/email_script.js"></script>
What am I doing wrong?
You need to call the check_v_mail function. Usually, this is done when the user clicks the button to submit the form.
<form name="myForm" onsubmit="return check_v_mail('myEmail')" method="post">
Email: <input type="email" name="myEmail" value="" class="form-control" required placeholder="Please Enter your email" maxlength="50">
<input type="submit" value="Submit">
</form>
You can add it in form's onsubmit
In addition to calling the function on form submit or field exit, you also need to add id attribute to your element because your function uses getElementById() to get the element but your input element doesn't have id attribute
<input type="email" name="myEmail" id ="myEmail" value="" class="form-control" required placeholder="Please Enter your email" maxlength="50">
To expand on a comment by Mani:
Right now the signature of your function check_v_mail is incorrect, it is written like a call to a function.
Signature in email_script.js could be:
function check_v_mail(emailFieldId) {
fld_value = document.getElementById(emailFieldId).value;
return m_valid_r;
}
Calling on the form could be:
<form onsubmit="return check_v_mail('myEmail');" method="post"></form>
A slight tweak is to have a validate function or class that handles the validation. This can be expanded to call multiple different validation methods and decreases the likelihood that the onsubmit will become complex with additional validations.
<form onsubmit="return validateForm();" method="post"></form>
function validateForm() {
var emailValid = check_v_mail('myEmail')
var firstNameValid = validateFirstName('firstNameInput');
return emailValid && firstNameValid;
}